In my application have a table and one tr is display:none. I want to show using jquery.
$(document).on('click','.btn',function(){
var name = $('#name').val();
var email = $('#email').val();
var phno = $('#phno').val();
var mes= $('#message');
if (phno.length == 10) {
}else{
mes.style.display = "block";
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<tbody>
<tr>
<td><label>NAME</label></td>
<td><input type="text" class="form-control" id="name" style="text-transform:uppercase" name="txtname"></td>
</tr>
<tr>
<td><label>EMAIL</label></td>
<td><input type="email" class="form-control" id="email" name="txtemail"></td>
</tr>
<tr>
<td><label>PHONE NO.</label></td>
<td><input type="text" class="form-control" id="phno" maxlength="10" name="txtphno"></td>
</tr>
<tr id="message" style="display: none; color: red;">
<td>Invalid Phone Number</td>
</tr>
<tr>
<td colspan="2">
<button class="btn btn-success btn-lg btn-block" type="submit">REFER</button>
</td>
</tr>
</tbody>
</form>
this is my table. I want to show message row for 5 seconds.I am unable to do that.
this is my jquery. But it is not working. Please help me.
You should use $("#name") to get an element istead of ("#name") and querySelectorAll will retrieve a list of elements matching with input. Instead of this use $("#message") to get element.
Use below code:
$(document).on('click','.btn',function(){
var name = $('#name').val();
var email = $('#email').val();
var phno = $('#phno').val();
var mes= $('#message');
if (phno.length == 10) {
}else{
$('#message').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td><label>NAME</label></td>
<td><input type="text" class="form-control" id="name" style="text-transform:uppercase" name="txtname"></td>
</tr>
<tr>
<td><label>EMAIL</label></td>
<td><input type="email" class="form-control" id="email" name="txtemail"></td>
</tr>
<tr>
<td><label>PHONE NO.</label></td>
<td><input type="text" class="form-control" id="phno" maxlength="10" name="txtphno"></td>
</tr>
<tr id="message" style="display: none; color: red;">
<td>Invalid Phone Number</td>
</tr>
<tr>
<td colspan="2">
<button class="btn btn-success btn-lg btn-block" type="submit">REFER</button>
</td>
</tr>
</tbody>
</table>
<input class="btn" value="click me" type="button"/>
Related
I have tried to add input text element to my form
through this jquery code below
$(document).ready(function () {
var counter = 0;
$("#addrow").on("click", function () {
counter++;
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" class="" name="item'+counter+'"/></td>';
cols += '<td><input type="text" class="" name="rate'+counter+'"/></td>';
cols += '<td><input type="text" class="" name="quantity'+counter+'"/></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("#myTable").append(newRow);
$("#itemcounter").val(counter);
});
$("table.order-list").on("click", ".ibtnDel", function (event) {
$(this).closest("tr").remove();
var count = $("#itemcounter").val();
$("#itemcounter").val(count-1);
counter = count -1;
});
});
Now the form is as below:
<form action="{{url('/billgenerate')}}" method="post">
<input type="hidden" name="itemcounter" id="itemcounter" value="">
<table id="myTable" class="table order-list">
<thead>
<tr>
<td>Item Name</td>
<td>Rate</td>
<td>Quantity</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-4">
<input type="text" name="item0" class="" style="width:22em" />
</td>
<td class="col-sm-3">
<input type="text" name="rate0" class=""/>
</td>
<td class="col-sm-3">
<input type="text" name="quantity0" class=""/>
</td>
<td class="col-sm-2"><a class="deleteRow"></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: left;">
<input type="button" class="btn btn-lg btn-block" name="addrow" id="addrow" value="Add Row" />
</td>
</tr>
<tr>
</tr>
</tfoot>
</table>
</form>
when I add add new row, it adds successfully, and also the element is added with its name increment by 1 so that while posting the page the name does not get conflicts.
but when I try to add a input predefined inside the table, php recognizes that particular element.
but when I try to add it through jquery code, it does not return the elements which are added. where am i going wrong?
I have a problem with my code, when I add the javascript multiplication not running, but at first row just fine. I think the problem id must be unique and i change to name, but still not work.
You can try mycode below.
function multiplyBy() {
num1 = document.getElementById("input1").value;
num2 = document.getElementById("input2").value;
document.getElementById("output").value = num1 * num2;
}
$(document).ready(function() {
$("#addCF").click(function() {
$("#customFields").append('<tr><td>1</td><td><input class="form-control" name="kode_barang[]" placeholder="Ketik Kode / Nama Barang" type="text"></td><td><input class="form-control" name="harga_satuan[]" id="input1" onkeyup="calc()" value="" type="text"></td><td><input class="form-control" id="input2" onkeyup="calc()" name="jumlah_beli[]" type="text"></td><td><input class="form-control" name="sub_total[]" value="" id="output" type="text"></td><td><button class="remCF"><i class="fa fa-times" style="color:red;"></i></button></td></tr>');
});
$("#customFields").on('click', '.remCF', function() {
$(this).parent().parent().remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<table class='table table-bordered' id='customFields'>
<thead>
<tr>
<th style='width:35px;'>#</th>
<th style='width:210px;'>Nama Barang</th>
<th style='width:120px;'>Harga</th>
<th style='width:75px;'>Qty</th>
<th style='width:125px;'>Sub Total</th>
<th style='width:40px;'></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<input class="form-control" name="kode_barang[]" id="cariBrg" placeholder="Ketik Kode / Nama Barang" type="text">
</td>
<td>
<input class="form-control" name="harga_satuan[]" id="input1" onkeyup="multiplyBy()" value="" type="text">
</td>
<td>
<input class="form-control" id="input2" onkeyup="multiplyBy()" name="jumlah_beli[]" type="text">
</td>
<td>
<input class="form-control" name="sub_total[]" id="output" onkeyup="multiplyBy()" type="text">
</td>
<td>
<button class="remCF"><i class="fa fa-times" style="color:red;"></i></button>
</td>
</tr>
</tbody>
</table>
<button id='addCF' class='btn btn-default pull-left'><i class='fa fa-plus fa-fw'></i> Baris Baru (F7)</button>
You are using same id multiple times and it gives wrong behavior with jquery/javascript. I have added some classes into each text boxes and replaced mutiplyby function with on keyup jquery function.
Try this with your page and see it gives you your desired output.
$(document).on('keyup','.input',function(){
var num1 = $(this).parents('tr:first').find('.input:first').val();
var num2 = $(this).parents('tr:first').find('.input:last').val();
$(this).parents('tr:first').find('.sub-total').val(num1 * num2);
});
$(document).ready(function() {
$("#addCF").click(function() {
$("#customFields").append('<tr><td>1</td><td><input class="form-control" name="kode_barang[]" placeholder="Ketik Kode / Nama Barang" type="text"></td><td><input class="form-control input input1" name="harga_satuan[]" id="input1" onkeyup="multiplyBy(this)" value="" type="text"></td><td><input class="form-control input input2" id="input2" onkeyup="multiplyBy()" name="jumlah_beli[]" type="text"></td><td><input class="form-control sub-total" name="sub_total[]" value="" id="output" type="text"></td><td><button class="remCF"><i class="fa fa-times" style="color:red;"></i></button></td></tr>');
});
$("#customFields").on('click', '.remCF', function() {
$(this).parent().parent().remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<table class='table table-bordered' id='customFields'>
<thead>
<tr>
<th style='width:35px;'>#</th>
<th style='width:210px;'>Nama Barang</th>
<th style='width:120px;'>Harga</th>
<th style='width:75px;'>Qty</th>
<th style='width:125px;'>Sub Total</th>
<th style='width:40px;'></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<input class="form-control" name="kode_barang[]" id="cariBrg" placeholder="Ketik Kode / Nama Barang" type="text">
</td>
<td>
<input class="form-control input" name="harga_satuan[]" id="input1" onkeyup="multiplyBy()" value="" type="text">
</td>
<td>
<input class="form-control input" id="input2" onkeyup="multiplyBy()" name="jumlah_beli[]" type="text">
</td>
<td>
<input class="form-control sub-total" name="sub_total[]" id="output" onkeyup="multiplyBy()" type="text">
</td>
<td>
<button class="remCF"><i class="fa fa-times" style="color:red;"></i></button>
</td>
</tr>
</tbody>
</table>
<button id='addCF' class='btn btn-default pull-left'><i class='fa fa-plus fa-fw'></i> Baris Baru (F7)</button>
The values of id attributes must be unique across the whole document. Each time you do the calculation you are adding another element with the id output. The DOM doesn't know which one you mean.
I think the problem id must be unique and i change to name
Yes that's it, the id should be unique in the same document, instead you don't need id's here it will be better to use common classes :
<tr>
<td>
<input class="form-control" name="kode_barang[]" placeholder="Ketik Kode / Nama Barang" type="text">
</td>
<td>
<input class="form-control calculation" name="harga_satuan[]" value="" type="text">
</td>
<td>
<input class="form-control calculation" name="jumlah_beli[]" type="text">
</td>
<td>
<input class="form-control output" name="sub_total[]" id="" type="text">
</td>
<td>
<button class="remCF"><i class="fa fa-times" style="color:red;"></i></button>
</td>
</tr>
NOTE : No need for inline-events better to attach your event in the JS code, Check my suggestion using input event that is more efficient than keyup when you track the user input's.
I've added also an index to enumerate the rows...
Hope this helps.
Working Snippet :
$(document).ready(function() {
var index = 2;
$("#addCF").click(function() {
$("#customFields").append('<tr><td>'+index+'</td><td><input class="form-control" name="kode_barang[]" placeholder="Ketik Kode / Nama Barang" type="text"></td><td><input class="form-control calculation" name="harga_satuan[]" value="" type="text"></td><td><input class="form-control calculation" name="jumlah_beli[]" type="text"></td><td><input class="form-control output" name="sub_total[]" value="" type="text"></td><td><button class="remCF"><i class="fa fa-eye" style="color:red;"></i></button></td></tr>');
index++;
});
$("#customFields").on('click', '.remCF', function() {
$(this).parent().parent().remove();
});
$("table").on('input', '.calc', function(){
var parent_row = $(this).closest('tr');
var num1 = parent_row.find('[name="harga_satuan[]"]').val();
var num2 = parent_row.find('[name="jumlah_beli[]"]').val();
parent_row.find('.output').val(num1*num2);
});
});
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<table class='table table-bordered' id='customFields'>
<thead>
<tr>
<th style='width:35px;'>#</th>
<th style='width:210px;'>Nama Barang</th>
<th style='width:120px;'>Harga</th>
<th style='width:75px;'>Qty</th>
<th style='width:125px;'>Sub Total</th>
<th style='width:40px;'></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<input class="form-control" name="kode_barang[]" placeholder="Ketik Kode / Nama Barang" type="text">
</td>
<td><input class="form-control calc" name="harga_satuan[]" value="" type="text"></td>
<td><input class="form-control calc" name="jumlah_beli[]" type="text"></td>
<td><input class="form-control output" name="sub_total[]" id="" type="text"></td>
<td><button class="remCF"><i class="fa fa-times" style="color:red;"></i></button></td>
</tr>
</tbody>
</table>
<button id='addCF' class='btn btn-default pull-left'><i class='fa fa-plus fa-fw'></i> Baris Baru (F7)</button>
I want to display data stored in an array in form-
for example:
var users =
[
{
'name':'John',
'age':'10'
},
{
'name':'Rose',
'age':'18'
}
];
and I want to display name and age of users logged in, in the form below:
<form id="myform">
<div>
</div>
<h2 align="center"> Edit Details</h2>
<table id="table1"; cellspacing="5px" cellpadding="5%"; align="center">
<tr>
<td align="right" class="style1">First Name:</td>
<td class="style1"><input id="firstname" type="text" placeholder="FirstName" /></td>
</tr>
<tr>
<td align="right">Last Name:</td>
<td><input id="lastname" type="text" placeholder="LastName" /></td>
</tr>
<tr>
<td align="right">Email ID:</td>
<td><input id="email" type="text" placeholder="Email" /></td>
</tr>
<tr>
<td align="right">User Name:</td>
<td><input id="username" type="text" placeholder="UserName" /></td>
</tr>
<tr>
<td align="right">Password:</td>
<td><input id="password" type="password" placeholder="Password" /></td>
</tr>
<tr>
<td> <input type="button" value="Edit" onclick="edit()" />
<td> <input type="button" value="Reset" />
</td>
</tr>
</table>
</form>
You can just change the text content with pure javascript.
name.textContent = 'First name' + users[0].name;
Of course, you will need to select all the fields you want to change.
I have a bootstrap table like this . Now i want this table to add two rows after clicking of a button and still have the form functionality that is that i should be able to able a unique name for the table colums to be able to read this in my controller . All the solutions i have seen don't maintain the unique name for the added rows . How can i do this ?
<form class="form-horizontal" role="form" action="updateCategory" method=POST>
<div class="table-responsive">
<table class="table table-bordered table-striped table-highlight">
<tr>
<th style="width:15%" >Property</th>
<th style="width:40%">Present Value</th>
<th style="width:45%">Edited Value</th>
</tr>
<tr>
<td align="center"><strong>Id</strong></td>
<td><p class="text-danger" id="id1">Id</p></td>
<td><input type="text" class="form-control" id="id" name="id" placeholder="Enter Id"></td>
</tr>
<tr>
<td align="center"><strong>Cat Key</strong></td>
<!-- <td><input type="text" class="form-control" id="catKey1" name="catKey1" placeholder="Enter CatKey"></td> -->
<td><p class="text-danger" id="catKey1">Cat Key</p></td>
<td><input type="text" class="form-control" id="catKey" name="catKey" placeholder="Enter CatKey"></td>
</tr>
<tr>
<td align="center"><strong>Name</strong></td>
<td><p class="text-danger" id="name1">Name</p></td>
<td><input type="text" class="form-control" id="name" name="name" placeholder="Enter Name"></td>
</tr>
<tr>
<td align="center"><strong>Icon</strong></td>
<td><p class="text-danger" id="icon1">Icon</p></td>
<td><input type="text" class="form-control" id="icon" name="icon" placeholder="Enter Icon"></td>
</tr>
<tr>
<td align="center"><strong>Icon White</strong></td>
<td><p class="text-danger" id="iconWhite1">Icon White</p></td>
<td><input type="text" class="form-control" id="iconWhite" name="iconWhite" placeholder="Enter IconWhite"></td>
</tr>
<tr>
<td align="center"><strong>Color</strong></td>
<td><p class="text-danger" id="color1">Color</p></td>
<td><input type="text" class="form-control" id="color" name="color" placeholder="Enter Color"></td>
</tr>
<tr>
<td align="center"><strong>Post Order Success Message</strong></td>
<td><p class="text-danger" id="posm1">Post Order Success Message</p></td>
<td><input type="text" class="form-control" id="posm" name="posm" placeholder="Enter Post Order Success Message"></td>
</tr>
<tr>
<td colspan="3" align="center">
<div class="form-group">
<button type="submit" class="btn btn-success btn-md" id="submit">Submit</button>
</div>
</td>
</tr>
</table>
</div>
</form>
`
I can't get this code block to work properly:
<script>
function Message(){
document.getElementById("sname").innerHTML = document.getElementById("name").value;
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td style="width:20%">User Name:</td>
<td><input type="text" id="name" name="name" /></td>
</tr>
<tr><td>Password:</td><td><input type="password" name="password"/></td></tr>
<tr>
<td style="text-align:right">
<input type="submit" onclick="Message()"/>
</td>
</tr>
</table>
</form>
<div>
<p>Hi <span id="sname">0</span></p>
</div>
</body>
Try this
</head>
<body>
<form onsubmit="event.preventDefault();">
<table>
<tr>
<td style="width:20%">User Name:</td>
<td><input type="text" id="name" name="name" /></td>
</tr>
<tr><td>Password:</td><td><input type="password" name="password"/></td></tr>
<tr>
<td style="text-align:right">
<input type="submit" onclick="Message()"/>
</td>
</tr>
</table>
</form>
<div>
<p>Hi <span id="sname">0</span></p>
</div>
<script>
function Message(){ document.getElementById("sname").innerHTML = document.getElementById("name").value; return false;}
</script>
</body>
That's a submit button. Make type='button' instead.
Solution #1
function Message(){
event.preventDefault();
document.getElementById("sname").innerHTML = document.getElementById("name").value;
}
<form>
<table>
<tr>
<td style="width:20%">User Name:</td>
<td><input type="text" id="name" name="name" /></td>
</tr>
<tr><td>Password:</td><td><input type="password" name="password"/></td></tr>
<tr>
<td style="text-align:right">
<input type="submit" onclick="Message()"/>
</td>
</tr>
</table>
</form>
<div>
<p>Hi <span id="sname">0</span></p>
</div>
Solution #2 you can just use button instead of input.
function Message(){
document.getElementById("sname").innerHTML = document.getElementById("name").value;
}
<form>
<table>
<tr>
<td style="width:20%">User Name:</td>
<td><input type="text" id="name" name="name" /></td>
</tr>
<tr><td>Password:</td><td><input type="password" name="password"/></td></tr>
<tr>
<td style="text-align:right">
<button type="button" onclick="Message()"/>Click me</button>
</td>
</tr>
</table>
</form>
<div>
<p>Hi <span id="sname">0</span></p>
</div>
Hope it helps!