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

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

Community · Accepted Answer · 2017-05-23 12:29:26Z

0

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

edited May 23, 2017 at 12:29

CommunityBot

11 silver badge

answered Aug 18, 2014 at 14:48

glycerin

915 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery Calculations after appending more input fields

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related