javascript - jQuery Calculations after appending more input fields -
i building expense template having issue regarding using jquery calculations , click functionality append set of input fields.
i combining twooncodes, 1 calculate sum of values in input fields, , other add new row of input fields when user clicks (these added sum). problem is, sum not adding total newly appended rows. default row of fields adds.
any appreciated (fiddle ex: http://jsfiddle.net/nicolescotsburn/o8x02sjh/4/ )
appending table inputs code:
//increment variables var items = $('#items'); var = $('#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_' + +'" value="" placeholder="mm/dd/yyyy" /></label></td>' + '<td> <label for="desc"><input type="text" id="desc" size="30" name="desc_' + +'" /></label></td>' + '<td> $<label for="entmt"><input type="text" id="sum" size="10" name="entmt_' + +'" placeholder="0.00" /></label></td>' + '<td> $<label for="meals"><input type="text" id="sum" size="10" name="meals_' + +'" placeholder="0.00" /></label></td>' + '<td> $<label for="other"><input type="text" id="sum" size="10" name="other_' + +'" placeholder="0.00" /></label></td>' + '<td> $<label for="travel"><input type="text" id="sum" size="10" name="travel_' + +'" placeholder="0.00" /></label></td>' + '<td> $<label for="lodging"><input type="text" id="sum" size="10" name="lodging_' + +'" placeholder="0.00" /></label></td>' + '<td> $<label for="hst"><input type="text" id="sum" size="10" name="hst_' + +'" placeholder="0.00" /></label></td>' + '<td> <a href="#" id="remitem">remove</a></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> <a href="#" id="remmileage">remove</a></td></tr>').appendto(mileage); j++; return false; }); //remove buttons $('body').on('click', '#remitem', function() { if( > 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 id of input id="sum" , gets outputted input called totalsum.
$("input[id^=sum]").sum("keyup", "#totalsum");
i not familiar jquery calculations, looks doing can achieved using plain jquery or javascript. did quick google search jquery sum , found other stackoverflow post might you. stackoverflow sum
you can add class attribute called "sum" fields want sum , use jquery marked answer. once done calculating total can assign total amount input field.
$('.sum').blur(function () { var sum = 0; $('.sum').each(function() { sum += number($(this).val()); }); $("#totalsum").val(sum); }); 
Comments
Post a Comment