I am building an expense template an am having an issue regarding using jQuery Calculations and click functionality to append a set of input fields.
I am combining twooncodes, one to calculate the sum of the values in input fields, and the other to Add a new row of input fields when the user clicks so (these are also to be added to the sum). Problem is, the sum is not adding to the total from the newly appended rows. Only the default row of fields adds.
Any help is appreciated (Fiddle ex: http://jsfiddle.net/NicoleScotsburn/o8x02sjh/4/ )
Appending table with inputs code:
//Increment Variables
var items = $('#items');
var i = $('#items td').size() + 1;
var mileage = $('#mileage');
var j = $('#mileage td').size() + 1;
//Append Table Rows
$('#addItem').on('click', function() {
$('<tr><td> <label for="date"><input type="text" id="date" size="10" name="date_' + i +'" value="" placeholder="mm/dd/yyyy" /></label></td>' +
'<td> <label for="desc"><input type="text" id="desc" size="30" name="desc_' + i +'" /></label></td>' +
'<td> $<label for="entmt"><input type="text" id="sum" size="10" name="entmt_' + i +'" placeholder="0.00" /></label></td>' +
'<td> $<label for="meals"><input type="text" id="sum" size="10" name="meals_' + i +'" placeholder="0.00" /></label></td>' +
'<td> $<label for="other"><input type="text" id="sum" size="10" name="other_' + i +'" placeholder="0.00" /></label></td>' +
'<td> $<label for="travel"><input type="text" id="sum" size="10" name="travel_' + i +'" placeholder="0.00" /></label></td>' +
'<td> $<label for="lodging"><input type="text" id="sum" size="10" name="lodging_' + i +'" placeholder="0.00" /></label></td>' +
'<td> $<label for="hst"><input type="text" id="sum" size="10" name="hst_' + i +'" placeholder="0.00" /></label></td>' +
'<td> Remove</td></tr>').appendTo(items);
i++;
return false;
});
$('#addMileage').on('click', function() {
$('<tr><td> <label for="mdate"><input type="text" id="mdate" size="10" name="mdate' + j +'" value="" placeholder="mm/dd/yyyy" /></label></td>' +
'<td> <label for="mlocation"><input type="text" id="mlocation" size="30" name="mlocation' + j +'" value="" placeholder="" /></label></td>' +
'<td> <label for="km"><input type="text" id="km" size="10" name="km' + j +'" value="" placeholder="" />KM</label></td>' +
'<td> Remove</td></tr>').appendTo(mileage);
j++;
return false;
});
//Remove Buttons
$('body').on('click', '#remItem', function() {
if( i > 2 ) {
$(this).parents('tr').remove();
i--;
}
return false;
});
$('body').on('click', '#remMileage', function() {
if( j > 2 ) {
$(this).parents('tr').remove();
j--;
}
return false;
});
Calculation function: (This works assuming the id of the input is id="sum" and gets outputted to another input called totalsum.
$("input[id^=sum]").sum("keyup", "#totalSum");
I am not familiar with jQuery Calculations, but it looks like what you are doing can be achieved using plain jQuery or javascript. I did a quick google search for jquery sum and I found this other stackoverflow post that might help you. stackoverflow sum
You can add a class attribute called "sum" to all the fields you want to sum up and use the jquery marked as the answer. Once you get done calculating the total you can assign it to the total amount input field.
$('.sum').blur(function () {
var sum = 0;
$('.sum').each(function() {
sum += Number($(this).val());
});
$("#totalsum").val(sum);
});
Related
I am working on adding dynamic table rows. There is a button for adding table rows when a user clicks on that button. So there I have three dropdowns. Each dropdown have some ID. So I have implemented the things where I am trying to auto populate first dropdown on that button click. So I am clicking add more rows then for second row, empty dropdown is created.
I want that whenever a user clicks on add more rows, then each dropdown of rows should be auto-populated. I hope that I am clear with my words.
Below is the script to load data in dropdown and to create rows dynamically:
$(function() {
$("#btnAdd").bind("click", function() {
var div = $("<tr />");
div.html(GetDynamicTextBox(""));
$("#TextBoxContainer").append(div);
var url = "api/get/activecompany";
$.post(url, {
}, function(data, status) {
if (data.status == "OK") {
if (data.statusCode == 1) {
var list = data.response;
var option = "<option selected disabled>Select Company</option>";
if(list.length > 0){
for(var i = 0; i < list.length; i++){
var content = "<option value='"+list[i].companyid+"'>"+list[i].companyname+" <span>("+list[i].dotnumber+")</span></option>";
option = option + content;
}
}
document.getElementById('lcompanyselect').innerHTML = option;
} else {
var error = data.responseMessage;
swal(error, "", "error");
}
} else {
var error = data.responseMessage;
swal(error, "", "error");
}
});
});
$("body").on("click", ".remove", function() {
$(this).closest("tr").remove();
});
});
function GetDynamicTextBox(value) {
return '<td class="">'+'<select class="js-example-placeholder-single js-states form-control" id="lcompanyselect" onchange="getDriverAndTruck()";></select>'
+'<input type="button" value="+" class="qty-plus" data-toggle="modal" data-target="#edit_co"></td>'
+'<td><select class="js-example-placeholder-single js-states form-control" id="ldriverselect"></select>'
+'<input type="button" value="+" class="qty-plus" data-toggle="modal" data-target="#edit_driver"></td>'
+'<td class=""><select class="js-example-placeholder-single js-states form-control" id="ltruckselect"></select>'
+'<input type="button" value="+" class="qty-plus" data-toggle="modal" data-target="#edit_truck"></td>'
+ '<td><input name = "tripnumber" type="text" class="form-control" id="ltripnumber"/></td>'
+'<td><select id="lsubtrip" name="subtrip" class="js-example-placeholder-single js-states form-control"><option disabled selected></option>'
+'<option value="1">1</option><option value="2">2</option><option value="3">3</option></select>'
+ '<td><input name = "date" type="date" class="form-control" id="ldate"/></td>'
+ '<td><input name = "pickupcity" type="date" class="form-control" id="lpickupcity"/></td>'
+ '<td><input name = "pickupstate" type="date" class="form-control" id="lpickupstate"/></td>'
+ '<td><input name = "deliverydate" type="date" class="form-control" id="ldeliverydate"/></td>'
+ '<td><input name = "delivercity" type="text" class="form-control" id="ldelivercity"/></td>'
+ '<td><input name = "deliverstate" type="text" class="form-control" id="ldeliverstate"/></td>'
+ '<td><input name = "loadnumber" type="text" class="form-control" id="lloadnumber"/></td>'
+ '<td><input name = "loadrate" type="text" class="form-control" id="lloadrate" onkeyup="lcount();"/><span id="lerrormessage"></span></td>'
+ '<td><input name = "dispatchfee" type="text" class="form-control" id="ldispatchfee" readonly/></td>'
+ '<td><input name = "fuel" type="text" class="form-control" id="lfuel"/></td>'
+ '<td><input name = "cardfee" type="text" class="form-control" id="lcardfee"/></td>'
+ '<td><input name = "onloadrepair" type="text" class="form-control" id="lonloadrepair"/></td>'
+ '<td><input name = "shoprepair" type="text" class="form-control" id="lshoprepair"/></td>'
+ '<td><input name = "trailerrent" type="text" class="form-control" id="ltrailerrent"/></td>'
+ '<td><input name = "comcheck" type="text" class="form-control" id="lcomcheck"/></td>'
+ '<td><input name = "advance" type="text" class="form-control" id="ladvance"/></td>'
+ '<td><input name = "miscellenous" type="text" class="form-control" id="lmiscellenous"/></td>'
+ '<td><input name = "misc1" type="text" class="form-control" id="lmisc1"/></td>'
+ '<td><input name = "misc2" type="text" class="form-control" id="lmisc2"/></td>'
+ '<td><input name = "misc3" type="text" class="form-control" id="lmisc3"/></td>'
+ '<td><input name = "misc4" type="text" class="form-control" id="lmisc4"/></td>'
+ '<td><input name = "total" type="text" class="form-control" id="ltotal" readonly/></td>'
+ '<td><input name = "layover" type="text" class="form-control" id="llayover"/></td>'
+ '<td><input name = "addtl1" type="text" class="form-control" id="laddtl1"/></td>'
+ '<td><input name = "addtl2" type="text" class="form-control" id="laddtl2"/></td>'
+ '<td><input name = "addtl3" type="text" class="form-control" id="laddtl3"/></td>'
+ '<td><input name = "subtotal" type="text" class="form-control" id="lsubtotal" readonly/></td>'
+ '<td><input name = "paymentmode" type="text" class="form-control" id="lpaymentmode"/></td>'
+ '<td><input name = "pay" type="text" class="form-control" id="lpay"/></td>'
+ '<td><input name = "notes" type="text" class="form-control" id="lnotes"/></td>'
+ '<td><input name = "grandtotal" type="text" class="form-control" id="lgrandtotal" readonly/></td>'
+ '<td><button type="button" class="btn btn-outline-info text-info" onclick="savetriplist();">Submit</button>'
+'<button type="button" class="btn btn-outline-danger text-danger remove">Remove</button></td>'
}
The one thing I have observed in your code is, its looking for a dropdown with id as lcompanyselect and then fills it with options. when the code runs for the first time it adds the dropdown on the dom, but when the code runs second time (when add button clicked) its filling the same dropdown which was added earlier, because the code is looking for element with id as lcompanyselect and it has found one.
document.getElementById('lcompanyselect').innerHTML = option;
Instead, I would suggest to have a placeholder for dropdown in your, function
GetDynamicTextBox(value)
<select class="js-example-placeholder-single js-states form-control" id="lcompanyselect" onchange="getDriverAndTruck()";>{Placeholder}</select>
and in code when you are finding the element, instead replace the {placeholder} with options html.
This is how modified code looks.
$(function() {
$("#btnAdd").bind("click", function() {
var div = $("<tr />");
var dynamicTextboxHtml = div.html(GetDynamicTextBox(""));
var url = "api/get/activecompany";
$.post(url, {
}, function(data, status) {
if (data.status == "OK") {
if (data.statusCode == 1) {
var list = data.response;
var option = "<option selected disabled>Select Company</option>";
if(list.length > 0){
for(var i = 0; i < list.length; i++){
var content = "<option value='"+list[i].companyid+"'>"+list[i].companyname+" <span>("+list[i].dotnumber+")</span></option>";
option = option + content;
}
}
dynamicTextboxHtml.replace("{OptionsPlaceholder}",content);
$("#TextBoxContainer").append(dynamicTextboxHtml);
dynamicTextboxHtml = '';
} else {
var error = data.responseMessage;
swal(error, "", "error");
}
} else {
var error = data.responseMessage;
swal(error, "", "error");
}
});
});
$("body").on("click", ".remove", function() {
$(this).closest("tr").remove();
});
});
function GetDynamicTextBox(value) {
return '<td class="">'+'<select class="js-example-placeholder-single js-states form-control" id="lcompanyselect" onchange="getDriverAndTruck()";>{OptionsPlaceholder}</select>'
+'<input type="button" value="+" class="qty-plus" data-toggle="modal" data-target="#edit_co"></td>'
+'<td><select class="js-example-placeholder-single js-states form-control" id="ldriverselect"></select>'
+'<input type="button" value="+" class="qty-plus" data-toggle="modal" data-target="#edit_driver"></td>'
+'<td class=""><select class="js-example-placeholder-single js-states form-control" id="ltruckselect"></select>'
+'<input type="button" value="+" class="qty-plus" data-toggle="modal" data-target="#edit_truck"></td>'
+ '<td><input name = "tripnumber" type="text" class="form-control" id="ltripnumber"/></td>'
+'<td><select id="lsubtrip" name="subtrip" class="js-example-placeholder-single js-states form-control"><option disabled selected></option>'
+'<option value="1">1</option><option value="2">2</option><option value="3">3</option></select>'
+ '<td><input name = "date" type="date" class="form-control" id="ldate"/></td>'
+ '<td><input name = "pickupcity" type="date" class="form-control" id="lpickupcity"/></td>'
+ '<td><input name = "pickupstate" type="date" class="form-control" id="lpickupstate"/></td>'
+ '<td><input name = "deliverydate" type="date" class="form-control" id="ldeliverydate"/></td>'
+ '<td><input name = "delivercity" type="text" class="form-control" id="ldelivercity"/></td>'
+ '<td><input name = "deliverstate" type="text" class="form-control" id="ldeliverstate"/></td>'
+ '<td><input name = "loadnumber" type="text" class="form-control" id="lloadnumber"/></td>'
+ '<td><input name = "loadrate" type="text" class="form-control" id="lloadrate" onkeyup="lcount();"/><span id="lerrormessage"></span></td>'
+ '<td><input name = "dispatchfee" type="text" class="form-control" id="ldispatchfee" readonly/></td>'
+ '<td><input name = "fuel" type="text" class="form-control" id="lfuel"/></td>'
+ '<td><input name = "cardfee" type="text" class="form-control" id="lcardfee"/></td>'
+ '<td><input name = "onloadrepair" type="text" class="form-control" id="lonloadrepair"/></td>'
+ '<td><input name = "shoprepair" type="text" class="form-control" id="lshoprepair"/></td>'
+ '<td><input name = "trailerrent" type="text" class="form-control" id="ltrailerrent"/></td>'
+ '<td><input name = "comcheck" type="text" class="form-control" id="lcomcheck"/></td>'
+ '<td><input name = "advance" type="text" class="form-control" id="ladvance"/></td>'
+ '<td><input name = "miscellenous" type="text" class="form-control" id="lmiscellenous"/></td>'
+ '<td><input name = "misc1" type="text" class="form-control" id="lmisc1"/></td>'
+ '<td><input name = "misc2" type="text" class="form-control" id="lmisc2"/></td>'
+ '<td><input name = "misc3" type="text" class="form-control" id="lmisc3"/></td>'
+ '<td><input name = "misc4" type="text" class="form-control" id="lmisc4"/></td>'
+ '<td><input name = "total" type="text" class="form-control" id="ltotal" readonly/></td>'
+ '<td><input name = "layover" type="text" class="form-control" id="llayover"/></td>'
+ '<td><input name = "addtl1" type="text" class="form-control" id="laddtl1"/></td>'
+ '<td><input name = "addtl2" type="text" class="form-control" id="laddtl2"/></td>'
+ '<td><input name = "addtl3" type="text" class="form-control" id="laddtl3"/></td>'
+ '<td><input name = "subtotal" type="text" class="form-control" id="lsubtotal" readonly/></td>'
+ '<td><input name = "paymentmode" type="text" class="form-control" id="lpaymentmode"/></td>'
+ '<td><input name = "pay" type="text" class="form-control" id="lpay"/></td>'
+ '<td><input name = "notes" type="text" class="form-control" id="lnotes"/></td>'
+ '<td><input name = "grandtotal" type="text" class="form-control" id="lgrandtotal" readonly/></td>'
+ '<td><button type="button" class="btn btn-outline-info text-info" onclick="savetriplist();">Submit</button>'
+'<button type="button" class="btn btn-outline-danger text-danger remove">Remove</button></td>'
}
I am dynamically generating a form using AJAX and on the click of a button I add more input fields. But when I enter values in the input field and inspect in developer console,I don't see any value in the input text box.
Code for generating the form
$.ajax({
method: 'GET',
url: 'api/PayrollSystem/GetEmployeeSalaryAmount?AdminId=' + 1,
success: function(data) {
if (Object.keys(data).length == 0) {
$.alert({
title: 'Saved',
content: 'Account Number Saved!',
});
var row = ('<tr ><td colspan="3" text-align="center"> <b>No Registered Users</b></td></tr>');
$('.EmpTable').append(row);
} else {
$.each(data, function(index, value) {
var rows = ('<div id="form_div"><form method="post"><table class="table table-hover employee_table' + index + ' " align=center><thead><tr><td><b>Employee</td> <td><b>Amount</td></tr></thead><tbody><tr><td><b>' + value.FullName + '</b></td><td><input type="hidden" class="form-control Leavename" name="Leavename[]" value="Basic" placeholder="Enter Leave Name"> <input readonly class="form-control LeaveAmount" type="number" name="LeaveAmount[]" value=' + value.SalaryAmount + ' /><input class="form-control EmpId" type="hidden" name="Id[]" value=' + value.Id + ' /></td></tr><tr id="row' + index + 1 + '"><td><input type="text" class="form-control Leavename" name="Leavename[]" placeholder="Enter Leave Name"> </td><td> <input type="number" class="form-control LeaveAmount" name="LeaveAmount[]" placeholder="Enter Leave Amount"></td> </tr></tbody> </table> <input type="button" class="btn btn-success addRow" onclick="add_row(' + index + '); " value=" + Add More Payroll Item"></form> </div><hr />');
$('.EmpTable').append(rows);
});
}
}
});
Code for appending the row containing the new text box to the form
function add_row(index) {
$rowno = $(".employee_table tr").length;
$rowno = $rowno + 1;
$(".employee_table" + index + " tr:last").after("<tr id= 'row" + $rowno + "' > <td><input type='text' class='form-control Leavename' name='Leavename[]' placeholder='Enter Leave Name'> </td><td> <input type='number' name='LeaveAmount[]' class='form-control LeaveAmount' placeholder='Enter Leave Amount'></td><td> <input type='button' value='x' onclick=delete_row('row" + $rowno + "') ><br></td></tr>");
}
Immediate help will be well appreciated.
EDIT: My loop logic that gave no value when looping through the text boxes of each form generated.
$('#saveAdj').click(function() {
$('form').each(function() {
var thisForm = this;
alert($('.EmpId', thisForm).val());
alert($('.Leavename', thisForm).val());
alert($('.LeaveAmount', thisForm).val());
});
})
This is one of the rows in my table.
<td>
<select id="itemcodeid" name="itemcode[]" class="form-control itemcode">
<option></option>
#foreach($productsdata as $d)
<option>{{$d->itemcode}}</option>
#endforeach
</select>
</td>
I am using Select2 to fill data.
<script type="text/javascript">
$("#itemcodeid").select2
({
placeholder: "Select Itemcode",
allowClear: true
});
</script>
But when i add rows to table how to refer the upcoming rows with id. Because this works only on first row.
Below is image of first row.
But in Other rows i am unable to type and select(second image) because id reference is not done so kindly tell how to refer id of the rows added.
Help or suggestion will be highly useful.Thank You.
This is the code which gets executed when i press the plus button(verify image).
<script type="text/javascript">
$('.addrow').on('click',function()
{ addrowfn();
});
function addrowfn()
{
var tr = '<tr>'+
'<td>'+
'<select id="itemcodeid" name="itemcode[]" class="form-control itemcode">'+
'<option></option>'+
'#foreach($productsdata as $d)'+
'<option>{{$d->itemcode}}</option>'+
'#endforeach'+
'</select>'+
'</td>'+
'<td><input type="text" name="proname[]" class="form-control proname"></td>'+
'<td><input type="text" name="actualprice[]" class="form-control actualprice"></td>'+
'<td><input type="text" name="discount[]" class="form-control discount"></td>'+
'<td><input type="text" name="gst[]" class="form-control gst"></td>'+
'<td><input type="text" name="quantity[]" class="form-control quantity"></td>'+
'<td><input type="text" name="finalprorate[]" class="form-control finalprorate"></td>'+
'<td><input type="text" name="finalbillrate[]" class="form-control finalbillrate"></td>'+
'<td>'+
'<a href="#" class="remove btn btn-danger">'+
'<center>'+
'<i class="glyphicon glyphicon-remove"></i>'+
'</center>'+
'</a>'+
'</td>'+
'</tr>';
$('tbody').append(tr);
}
$('body').on('click','.remove',function()
{ var l=$('tbody tr').length;
console.log(l);
if(l==1)
{ alert('You Cannot Remove all Rows!!!');
}
else
$(this).parent().parent().remove();
});
</script>
Kindly Tell me if there are any corrections.
I'm not sure if this code works, as I haven't tested it, but I would, at minimum, make these two changes:
Listen for the appended node using a MutationObserver, then turn
the regular select into a select2();
Create a variable to keep track of the rows, and make each select's ID dynamic, e.g. 'itemcodeid_3' and 'itemcodeid_5' etc. Do the same for 'name' attribute
var target = document.getElementById('<INSERT_ID_HERE>');
var rows = 1;
if (target) {
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation && mutation.addedNodes) {
mutation.addedNodes.forEach(function(el) {
if (el && el.nodeName === "SELECT") {
$(el).select2();
}
});
}
});
});
observer.observe(target, {
childList: true
});
} // end if
$('.addrow').on('click',function()
{
addrowfn();
});
function addrowfn()
{
rows++;
var tr = '<tr>'+
'<td>'+
'<select id="itemcodeid_" ' + rows + ' name="itemcode_' + rows + '[]" class="form-control itemcode">'+
'<option></option>'+
'#foreach($productsdata as $d)'+
'<option>{{$d->itemcode}}</option>'+
'#endforeach'+
'</select>'+
'</td>'+
'<td><input type="text" name="proname[]" class="form-control proname"></td>'+
'<td><input type="text" name="actualprice[]" class="form-control actualprice"></td>'+
'<td><input type="text" name="discount[]" class="form-control discount"></td>'+
'<td><input type="text" name="gst[]" class="form-control gst"></td>'+
'<td><input type="text" name="quantity[]" class="form-control quantity"></td>'+
'<td><input type="text" name="finalprorate[]" class="form-control finalprorate"></td>'+
'<td><input type="text" name="finalbillrate[]" class="form-control finalbillrate"></td>'+
'<td>'+
'<a href="#" class="remove btn btn-danger">'+
'<center>'+
'<i class="glyphicon glyphicon-remove"></i>'+
'</center>'+
'</a>'+
'</td>'+
'</tr>';
$('tbody').append(tr);
}
$('body').on('click','.remove',function()
{
var l=$('tbody tr').length;
console.log(l);
if(l==1)
{
alert('You Cannot Remove all Rows!!!');
}
else {
$(this).parent().parent().remove();
}
});
It may not work because it sees the appended node as instead of ...have to test
Additionally, you may wish to look at using a template engine for this, such as John Resig's jQuery solution or Mustache.js,
Handlebars.js
My structure is like this
Itemid
itemname
itemdescription
itemprice
itemquantity
totalamount.
In this structure I have function to calculate the total (price*quantity). I have a add row function that lets add a row and a Grantotal function(adding all the totals). All I need to have is delete function, I have tried deleting the rows in many things but it is not working.
Here is my code:
$(document).ready(function () {
var counter = 2;
$("#addButton").click(function () {
if (counter > 100) {
alert("Only 100 textboxes allowed");
return false;
}
var newTextBoxDiv = $(document.createElement('tr'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<td class="first"><input placeholder="Item Code ' + counter + '" class="itmcode" type="text" name="data[' + counter + '][0]" id="itemcode' + counter + '" ></td>' + '<td><input class="itmname" placeholder="Item Name ' + counter + '" type="text" name="data[' + counter + '][1]" id="itemname' + counter + '" ></td>' + '<td><input class="itmdesc" placeholder="Item DESC' + counter + '" type="text" name="data[' + counter + '][2]" id="itemdesc' + counter + '" ></td>' + '<td><input class="itmamnt" placeholder="Item AMT' + counter + '" type="text" name="data[' + counter + '][3]" id="itemamnt' + counter + '" /></td>' + '<td><input class="itmqty" placeholder="Item QTY ' + counter + '" type="text" name="data[' + counter + '][4]" id="itemqty' + counter + '" /></td>' + '<td><input type="text" name="total' + counter + '" id="total' + counter + '" class="total" /></td><td><button class="del">Delete</button></td>');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$(document).on('keyup', '.itmqty', function (ev) {
// grab ID to get row number
thisID = $(this).attr("id");
rowNum = thisID.slice(-1);
//get Amount entered
amt = $('#itemamnt' + rowNum).val();
//get QTY
qty = $('#itemqty' + rowNum).val();
$('#total' + rowNum).val(amt * qty);
currentCount = counter - 1;
var tot = 0;
$('.total').each(function () {
tot += parseFloat($(this).val());
});
$('#running_total').val(tot);
});
//$('#total').val($('#itm-qty').val() * $('#itm-amnt').val());
});
('#TextBoxesGroup').on('click','.del', function(){
if(counter==2){
alert("No More Rows to Remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
// $('#TextBoxesGroup').on('click','.del', function(){
// $(this).parents('tr:eq(0)').remove();
// });
I have tried this code also:
$('#TextBoxesGroup').on('click','.del', function(){
$(this).parents('tr:eq(0)').remove();
});
HTML
<input type="button" id="addButton" value=" Add Row " />
<table id="TextBoxesGroup">
<tr>
<td>
<input id="itemcode1" placeholder="Item Code 1" class="itmcode" />
</td>
<td>
<input id="itemname1" placeholder="Item Name 1" />
</td>
<td>
<input id="itemdesc1" placeholder="Item Description 1" />
</td>
<td>
<input id="itemamnt1" placeholder="Item Amount 1" class="itmamnt" />
</td>
<td>
<input id="itemqty1" placeholder="Item Qty 1" class="itmqty" />
</td>
<td>
<input id="total1" placeholder="Item Total 1" class="total" />
</td>
<td><button class="del">Delete</button></td>
</tr>
</table>
<table>
<tr>
<td>Running Total</td>
<td>
<input name="running_total" id="running_total" />
</td>
</tr>
</table>
Please let me know what mistake I made and help me in getting this.
The fiddle link simplied. few mistake like ('#TextBoxesGroup) here no $ symbol.And brace are not well balanced.
Instead count variable you code will be obsolete so use $('#TextBoxesGroup tr').length.
1)
$('#TextBoxesGroup').on('click','.del', function(){
$(this).closest("tr").remove();
});
2) Runningtotal value refresh code snippet.
var tot1 = 0;
$('#TextBoxesGroup tr td input.total').each(function () {
tot1 += parseFloat($(this).val());
});
$('#running_total').val(tot1);
Working Fiddle Demo
I am have a dynamic HTML form (jQuery) that a user can add in an ingredient and its quantity, After the user puts in the data I need to save the data as XML. I was thinking of having the quantity as an attribute of the ingredient tag, so for example
<ingredient quantity="250g"> spaghetti </ingredient>
However at the moment I'm not sure how to pass the information in through my array as only a string is allowed as an attribute. I was wondering if anyone had an idea how to do this?
Here are some snippets of my code.
HTML form:
<div id="addIngredient">
<p>
<input type="text" id="ingredient_1" name="ingredient[]" value="" placeholder="Ingredient"/>
<input type="text" id="quantity_1" name="quantity[]" value="" placeholder="quantity"/>
Add
</p>
</div>
<br />
jQuery:
$('#addNewIngredient').on('click', function () {
$('<p> <input id="ingredient_' + i + '" size="40" name="ingredient[]' + '" type=text" value="" placeholder="Ingredient" /><input id="quantity_' + i + '" size="40" name="quantity[]' + '" type=text" value="" placeholder="Quantity" /> Remove </p> ').appendTo(addDiv2);
i++;
return false;
});
PHP:
$ingredients = $xml->createElement('ingredients');
for ($i = 0; $i < 2; $i++) {
$element = $ingredientName[$i];
$ingredient = $xml->createElement('ingredient_name', $element);
$ingredient->setAttribute("quantity", $quantity);
$ingredients->appendChild($ingredient);
}
$recipe->appendChild($ingredients);