jQuery Calculations after appending more input fields

Question

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>&nbsp;<label for="date"><input type="text" id="date" size="10" name="date_' + i +'" value="" placeholder="mm/dd/yyyy" /></label></td>' +
                      '<td>&nbsp;<label for="desc"><input type="text" id="desc" size="30" name="desc_' + i +'" /></label></td>' +
                      '<td>&nbsp;$<label for="entmt"><input type="text" id="sum" size="10" name="entmt_' + i +'" placeholder="0.00" /></label></td>' +
                      '<td>&nbsp;$<label for="meals"><input type="text" id="sum" size="10" name="meals_' + i +'" placeholder="0.00" /></label></td>' +
                      '<td>&nbsp;$<label for="other"><input type="text" id="sum" size="10" name="other_' + i +'" placeholder="0.00" /></label></td>' +
                      '<td>&nbsp;$<label for="travel"><input type="text" id="sum" size="10" name="travel_' + i +'" placeholder="0.00" /></label></td>' +
                      '<td>&nbsp;$<label for="lodging"><input type="text" id="sum" size="10" name="lodging_' + i +'" placeholder="0.00" /></label></td>' +
                      '<td>&nbsp;$<label for="hst"><input type="text" id="sum" size="10" name="hst_' + i +'" placeholder="0.00" /></label></td>' +
                      '<td>&nbsp;<a href="#" id="remItem">Remove</a></td></tr>').appendTo(items);
                    i++;
                    return false;
            });

            $('#addMileage').on('click', function() {
                    $('<tr><td>&nbsp;<label for="mdate"><input type="text" id="mdate" size="10" name="mdate' + j +'" value="" placeholder="mm/dd/yyyy" /></label></td>' +
                      '<td>&nbsp;<label for="mlocation"><input type="text" id="mlocation" size="30" name="mlocation' + j +'" value="" placeholder="" /></label></td>' +
                      '<td>&nbsp;<label for="km"><input type="text" id="km" size="10" name="km' + j +'" value="" placeholder="" />KM</label></td>' +
                      '<td>&nbsp;<a href="#" id="remMileage">Remove</a></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");

http://jsfiddle.net/NicoleScotsburn/o8x02sjh/ Although the fiddle example does not work seem to work properly — NicoleScotsburn, Aug 18 '14 at 13:42

score 0 · Answer 1 · edited May 23 '17 at 12:29

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);
});

jQuery Calculations after appending more input fields

1 Answers1