I have a html coding like this:
<form>
<table class="tabelWhiteJenisPembayaran">
<tbody>
<tr>
<td><input type="text" class="whiteJenisPembayaran" name="whiteJenisPembayaran[]" placeholder="Jenis Pembayaran" autocomplete="off" style="margin-bottom: 5px;"/></td>
</tr>
</tbody>
</table>
<button class="btn btn-primary" type="submit">Simpan</button>
<button class="btn" type="reset">Batal</button>
</form>
and I have a JavaScript coding as below:
$("table.tabelWhiteJenisPembayaran tbody tr:last").live('click', function(){
var tr = '<tr><td><input type="text" class="whiteJenisPembayaran" name="whiteJenisPembayaran[]" autocomplete="off" style="margin-bottom: 5px;" placeholder="Jenis Pembayaran"/></td></tr>';
$("table.tabelWhiteJenisPembayaran tbody").append(tr);
});
If the form is clicked will display a new form, for example I click 3 times in the last form, the total form there are 4 form. I'm wondering is how when I click on the "reset" the number of forms that had been there 4 form into 1 form as before. How to reset to 1 form again. Please help.
Try This way
$("table.tabelWhiteJenisPembayaran tbody tr:last").live('click', function(){
var tr = '<tr><td><input type="text" class="whiteJenisPembayaran" name="whiteJenisPembayaran[]" autocomplete="off" style="margin-bottom: 5px;" placeholder="Jenis Pembayaran"/></td></tr>';
$("table.tabelWhiteJenisPembayaran tbody").append(tr);
});
$("[type=reset]").click(function(){
$('table.tabelWhiteJenisPembayaran tr:not(:first)').remove();
});
Working Demo
I'm not sure if this is what you want. I guess you want to reset all the forms.
$('form').each(function(){
this.reset()
});
you could clone the initial form element and its children and replace the form with the clone when the reset button is clicked.
here is a fiddle http://jsfiddle.net/qZ6nK/
<script type="text/javascript">
var formClone = null;
$(document).ready(function() {
formClone = $('table.tabelWhiteJenisPembayaran').parents('form').clone();
$("table.tabelWhiteJenisPembayaran tbody tr:last").live('click', function(){
var tr = '<tr><td><input type="text" class="whiteJenisPembayaran" name="whiteJenisPembayaran[]" autocomplete="off" style="margin-bottom: 5px;" placeholder="Jenis Pembayaran"/></td></tr>';
$("table.tabelWhiteJenisPembayaran tbody").append(tr);
});
});
function onReset(e) {
var parent = $('table.tabelWhiteJenisPembayaran').parents('form').parent();
$('table.tabelWhiteJenisPembayaran').parents('form').remove();
parent.append(formClone);
formClone = $('table.tabelWhiteJenisPembayaran').parents('form').clone();
}
</script>
<form>
<table class="tabelWhiteJenisPembayaran">
<tbody>
<tr>
<td><input type="text" class="whiteJenisPembayaran" name="whiteJenisPembayaran[]" placeholder="Jenis Pembayaran" autocomplete="off" style="margin-bottom: 5px;"/></td>
</tr>
</tbody>
</table>
<button class="btn btn-primary" type="submit">Simpan</button>
<button class="btn" type="reset" onclick="onReset(event)">Batal</button>
</form>
Related
I want to calculate the average of inputs that have been inputted through dynamically added number text fields into another text field called, average. Please guide how can I calculate the average of dynamic fields using javascript.
<html>
<body>
<form>
<table id="dynamic_field">
<td>
<div>
<input type="hidden" class="form-control" name="uuid[]"/>
</div>
</td>
<td><input type="text" class="form-control" id="average" name="average"/></td>
<td>
<div>
<label>Enter number</label>
<input type="text" class="form-control" name="number[]" />
</div>
</td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
<input type="submit" name="submit" id="submit" value="Submit">
</table>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
var max_input = 7;
var i = 1;
$("#add").click(function(){if (i < max_input) {
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><div><input type="hidden" class="form-control" name="uuid[]"/></div></td><td> </td><td><div><label>Enter number</label><input type="text" class="form-control" name="number[]" /></div></td><td> </td><td valign="bottom"><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr><tr><td> </td><td> </td></tr>');
}});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$("#submit").on('click',function(){
var formdata = $("#main-form").serialize();
$.ajax({
url :"action.php",
type :"POST",
data :formdata,
cache :false,
success:function(result){
alert(result);
$("#main-form")[0].reset();
}
});
});
});
</script>
You can use each loop to iterate through all your number input and on each iteration store value of input inside some variable and then divide this total with count and finally add result inside your average input-box.
Demo Code :
$(document).ready(function() {
var max_input = 7;
var i = 1;
$("#add").click(function() {
if (i < max_input) {
i++;
$('#dynamic_field').append('<tr id="row' + i + '"><td><div><input type="hidden" class="form-control" name="uuid[]"/></div></td><td> </td><td><div><label>Enter number</label><input type="text" class="form-control" name="number[]" /></div></td><td> </td><td valign="bottom"><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">X</button></td></tr><tr><td> </td><td> </td></tr>');
}
});
$(document).on('click', '.btn_remove', function() {
var button_id = $(this).attr("id");
$('#row' + button_id + '').remove();
});
$(document).on("input", "input[name*=number]", function() {
var total = 0;
//get length of input field
var count = parseInt($("input[name*=number]").length);
//loop through each inputs
$("input[name*=number]").each(function() {
//add
total += $(this).val() != "" ? parseInt($(this).val()) : 0
})
//put value inside input box
$("#average").val(total / count);
})
});
<html>
<body>
<form>
<table id="dynamic_field">
<tr>
<td>
<div>
<input type="hidden" class="form-control" name="uuid[]" />
</div>
</td>
<td><input type="text" class="form-control" id="average" name="average" /></td>
<td>
<div>
<label>Enter number</label>
<input type="text" class="form-control" name="number[]" />
</div>
</td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
</tr>
</table>
<input type="submit" name="submit" id="submit" value="Submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
My form has a uuid text field. The uuid is auto-generated. I want to pass this uuid to all the dynamically added fields. Form below has two fields one is for the uuid and the other one is for the SKU number. Please kindly guide me.
<html>
<body>
<form>
<table id="dynamic_field">
<td>
<div>
<input type="hidden" class="form-control" name="uuid[]"/>
</div>
</td>
<td> </td>
<td>
<div>
<label>Enter SKU</label>
<input type="text" class="form-control" name="SKU[]" />
</div>
</td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
<input type="submit" name="submit" id="submit" value="Submit">
</table>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
var max_input = 7;
var i = 1;
$("#add").click(function(){if (i < max_input) {
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><div><input type="hidden" class="form-control" name="uuid[]"/></div></td><td> </td><td><div><label>Enter SKU</label><input type="text" class="form-control" name="SKU[]" /></div></td><td> </td><td valign="bottom"><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr><tr><td> </td><td> </td></tr>');
}});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$("#submit").on('click',function(){
var formdata = $("#main-form").serialize();
$.ajax({
url :"action.php",
type :"POST",
data :formdata,
cache :false,
success:function(result){
alert(result);
$("#main-form")[0].reset();
}
});
});
});
</script>
This is my code, it appends the input form after the user clicks the "Add more" button.
How can I change the input field to a dropdown menu that queries the data from mysql?
Thank you ^^
My HTML code
<form name="add_name" id="add_name">
<div class="table-responsive">
<table class="table table-bordered" id="dynamic_field">
<tr>
<td><input type="text" name="name[]" class="form-control name_list" /></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
</tr>
</table>
<input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
</form>
My javascript
<script>
$(document).ready(function(){
var i=1;
$('#add').click(function(){
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="name[]" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$('#submit').click(function(){
$.ajax({
url:"name.php",
method:"POST",
data:$('#add_name').serialize(),
success:function(data)
{
alert(data);
$('#add_name')[0].reset();
}
});
});
});
</script>
How to call function with tr onblur event or how to detect any click-event outside tr border?
Thanks
Html:
<tr id="tr_0" class="table" onblur="Dict[#i].Canc(#j)">
<td id="frst_0" class="tabl">
<label id="lbl0_0" class="tdLbl0_0">Some name</label>
<input id="inpt0_0" class="tdinpt0" type="text" size="10" hidden onblur="Dict[#i].CheckInput0(#j)" />
</td>
<td id="sec_0" class="tabl" onclick="Dict[#i].EditInput1(#j)">
<label id="lbl1_0" class="tdLbl1">Value</label>
<input id="inpt1_0" class="tdinpt1" type="number" max="99" min="0" style="width: 38px" hidden onblur="Dict[#i].CheckInput1(#j)" onfocus="Dict[#i].ClearInput1(#j)" />
</td>
<td>
<button id="suc_0" class="tdbtn" hidden onclick="Dict[#i].Suc(#j)">Success</button>
<button id="edit_0" class="tdbtn" onclick="Dict[#i].Edit(#j)">Edit</button>
<button id="del_0" class="tdbtn" onclick="Dict[#i].Del(#j)">Delete</button>
<button id="canc_0" class="tdbtn" onclick="Dict[#i].Canc(#j)" hidden>Cancel</button>
</td>
</tr>
Use jQuery.closest to see if the target element is inside a tr or a tr like this:
$(document).click(function(e) {
if($(e.target).closest("tr").length)
alert("tr was clicked!");
else
alert("no tr was clicked!");
});
If you want to just check if the element clicked is a tr or not then use jQuery.is like this:
$(document).click(function(e) {
if($(e.target).is("tr"))
alert("tr was clicked!");
else
alert("no tr was clicked!");
});
Example of the first case:
$(document).click(function(e) {
if ($(e.target).closest("tr").length) // if the length is != 0 (a tr is found)
alert("tr was clicked!");
else // otherwise ...
alert("no tr was clicked!");
});
tr {
background: #F99;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="tr_0" class="table" onblur="Dict[#i].Canc(#j)">
<td id="frst_0" class="tabl">
<label id="lbl0_0" class="tdLbl0_0">Some name</label>
<input id="inpt0_0" class="tdinpt0" type="text" size="10" hidden onblur="Dict[#i].CheckInput0(#j)" />
</td>
<td id="sec_0" class="tabl" onclick="Dict[#i].EditInput1(#j)">
<label id="lbl1_0" class="tdLbl1">Value</label>
<input id="inpt1_0" class="tdinpt1" type="number" max="99" min="0" style="width: 38px" hidden onblur="Dict[#i].CheckInput1(#j)" onfocus="Dict[#i].ClearInput1(#j)" />
</td>
<td>
<button id="suc_0" class="tdbtn" hidden onclick="Dict[#i].Suc(#j)">Success</button>
<button id="edit_0" class="tdbtn" onclick="Dict[#i].Edit(#j)">Edit</button>
<button id="del_0" class="tdbtn" onclick="Dict[#i].Del(#j)">Delete</button>
<button id="canc_0" class="tdbtn" onclick="Dict[#i].Canc(#j)" hidden>Cancel</button>
</td>
</tr>
</table>
Example of the second case:
$(document).click(function(e) {
if ($(e.target).is("tr")) // if the target of the click is a tr
alert("tr was clicked!");
else // otherwise
alert("no tr was clicked!");
});
tr {
background: #F99;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="tr_0" class="table" onblur="Dict[#i].Canc(#j)">
<td id="frst_0" class="tabl">
<label id="lbl0_0" class="tdLbl0_0">Some name</label>
<input id="inpt0_0" class="tdinpt0" type="text" size="10" hidden onblur="Dict[#i].CheckInput0(#j)" />
</td>
<td id="sec_0" class="tabl" onclick="Dict[#i].EditInput1(#j)">
<label id="lbl1_0" class="tdLbl1">Value</label>
<input id="inpt1_0" class="tdinpt1" type="number" max="99" min="0" style="width: 38px" hidden onblur="Dict[#i].CheckInput1(#j)" onfocus="Dict[#i].ClearInput1(#j)" />
</td>
<td>
<button id="suc_0" class="tdbtn" hidden onclick="Dict[#i].Suc(#j)">Success</button>
<button id="edit_0" class="tdbtn" onclick="Dict[#i].Edit(#j)">Edit</button>
<button id="del_0" class="tdbtn" onclick="Dict[#i].Del(#j)">Delete</button>
<button id="canc_0" class="tdbtn" onclick="Dict[#i].Canc(#j)" hidden>Cancel</button>
</td>
</tr>
</table>
You can bind the click events on the document itself, and check the event.target object, if parents of the event.target don't contain the tr, manually trigger the blur event on tr.
$.fn.bindBlur = function(callback){
this.each(function(){
var that = this;
$(document).on("click", function(e){
if(that.is($(e.target) || that.has($(e.target))){
return callback();
}
});
});
};
I'm trying to create an order form that has an "add new product" section within a table. Basically the user should be able to click on the "Add Row" link and a new input line will appear to allow the user to add another product to the order list. I'm able to have this work once, but after that the form won't add any new lines. In the console.log I can see that the event handler is only working on the original form element, not the new product input line. I have a shortened fiddle of what I'm working with here:
http://jsfiddle.net/scottm1164/eTBr6/5/
Here is my jQuery:
<script>
$(document).ready(function () {
(function () {
var start = $('table'),
newRow = $('<tr><td><input type="text" class="quantity" /></td><td><input type="text" class="prodNum" /></td><td><textarea cols="15" rows="1"></textarea></td><td><p class="addRow">Add a Row</p></td></tr>');
$('.addRow').on('click', function () {
$(start).append(newRow);
console.log(this);
});
})(); //end SIAF
}); //END document ready
</script>
Here is my Form:
<form enctype="multipart/form-data" method="post" action="#" id="orderForm">
<ul>
<li>Name:
<br>
<input type="text" id="name" />
</li>
<li>Email:
<br>
<input type="email" id="email" />
</li>
<li>Company:
<br>
<input type="text" id="company" />
</li>
<li>Phone:
<br>
<input type="tel" id="phone" />
</li>
<li>Delivery Address:
<br>
<input type="text" id="delAddress" />
</li>
<li>PO Number:
<br>
<input type="text" id="poNum" />
</li>
<li>If you have a document for your order, attach it here:
<br>
<input type="file" id="docs" />
</li>
<li>
<table id="prodTable" width="auto" border="0" cellpadding="4" cellspacing="4">
<tbody>
<tr>
<td>Quantity</td>
<td>Product Number</td>
<td>Product Description</td>
<td> </td>
</tr>
<tr>
<td>
<input type="text" class="quantity" name="quantity_" />
</td>
<td>
<input type="text" class="prodNum" name="prodNum_" />
</td>
<td>
<textarea cols="15" rows="1" name="prodDesc_"></textarea>
</td>
<td>
<p class="addRow">Add a Row</p>
</td>
</tr>
</tbody>
</table>
</li>
<li>Special Delivery Instructions:
<br>
<textarea cols="30" rows="10" id="instructions"></textarea>
</li>
</ul>
<input type="submit" id="submit" />
</form>
Can somebody explain to me what is going wrong with this code, I'm fairly new to jQuery/Javascript so I just don't understand why the code only works once, but not after subsequent clicks to the "add a row" link, and only on the original "add a row" links but not on the newly created link.
Try this
http://jsfiddle.net/eTBr6/8/
$('form').on('click', '.addRow', function () {
var start = $('table'),
newRow = $('<tr><td><input type="text" class="quantity" /></td>' +
'<td><input type="text" class="prodNum" /></td>' +
'<td><textarea cols="15" rows="1"></textarea></td>' +
'<td><p class="addRow">Add a Row</p></td></tr>');
$(start).append(newRow);
});
Put variables inside the click handler and also use event delegation by having the form as your context
Working DEMO
I guess this is what you need. For dynamically loaded elements a delegate $(document).on() is necessary than a normal function(), since normal event work only on page load.
here is the code
$(document).ready(function () {
var start = $('table'),
newRow = '<tr><td><input type="text" class="quantity" /></td><td><input type="text" class="prodNum" /></td><td><textarea cols="15" rows="1"></textarea></td><td><p class="addRow">Add a Row</p></td></tr>';
$(document).on('click', '.addRow', function () {
$(start).append(newRow);
});
}); //end document.ready
Hope this helps, Thank you
I did something similar to johnathan, just not as quickly.
Fiddle here: http://jsfiddle.net/xCNqP/1/
(function () {
var start = $('table'),
newRow = '<tr><td><input type="text" class="quantity" /></td><td><input type="text" class="prodNum" /></td><td><input type="text" maxlength="15"/></td><td><p class="addRow">Add a Row</p></td></tr>';
$(document).on('click', '.addRow', function () {
$(start).append($(newRow));
});
})(); //end SIAF
Primary change I used was set newRow to just a string, since declaring the element will allow you to only append it once. Re-declaring (which jonathan did by moving the declaration inside the handler) is required to re-append.
The correct usage of on so it will attach to new elements was also included.
http://jsfiddle.net/LK5sj/ stick your newrow inside the function and make the function recursive, and don't forget to clear and reassign the event handler or you'll get way more new rows than you want
var start = $('table');
function addRow(){
newRow = $('<tr><td><input type="text" class="quantity" /></td><td><input type="text" class="prodNum" /></td><td><textarea cols="15" rows="1"></textarea></td><td><p class="addRow">Add a Row</p></td></tr>');
$(start).append(newRow);
$('.addRow').off('click');
$('.addRow').on('click', function() {
addRow();
});
}
$('.addRow').on('click', function() {
addRow();
});