Click here to Skip to main content
14,665,426 members
Rate this:
Please Sign up or sign in to vote.
So i am trying to make a form which i can add a new row and key in value in the amount then the total will sum up and show the value immediately. The keyup function and add row function are working but its doesn't sum up the append row's values.

What I have tried:

HTML
<table>
<tbody id="calculation">
<td><input class="underline-input" type="number" name="item" /></td>
<td><input class="underline-input amount" type="number" id="amount" name="amount"/></td>
</tbody>
<tr>
<th colspan="2">TOTAL RM</th>
<td><input class="underline-input" type="number" id="total" name="total" /></td>
</tr>
</table>


Script
  $(document).ready(function(){

        $('.amount').keyup(function(){

        var sum=0;
 
        $('.amount').each(function(){
        sum+=Number($(this).val());
        });

        $('#total').val(sum);

        });
}

    function addRow() {    
        var template = '';
        template += '<tr>';
        template += '<td><input class="underline-input" type="number" name="item" />
        template += '<td><input class="underline-input amount" type="number" id="amount" name="amount" /></td>';
        template += '</tr>';
    
        $("#calculation").append(template);

        });
Posted
Updated 24-Sep-20 0:43am
v2

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

First off there is a typo in your addRow function, you are missing an end quote and semi-colon

function addRow() {
    var template = '';
    template += '<tr>';
    template += '<td><input class="underline-input" type="number" name="item" />'; // <----
    template += '<td><input class="underline-input amount" type="number" id="amount" name="amount" /></td>';
    template += '</tr>';

    $("#calculation").append(template);
}


The other problem is that you attach the keyup event to all items with class "amount", however that only attaches to items that exist when the call is made, ie on DOM load, so any "amount" items you add after won't have the event attached. You can use the "on" method to attach events instead which will also work for items you add later.

$(document).ready(function () {

    $('#calculation').on("keyup", ".amount", function () {

        var sum = 0;

        $('.amount').each(function () {
            sum += Number($(this).val());
        });

        $('#total').val(sum);

    });
});

function addRow() {
    var template = '';
    template += '<tr>';
    template += '<td><input class="underline-input" type="number" name="item" />';
    template += '<td><input class="underline-input amount" type="number" id="amount" name="amount" /></td>';
    template += '</tr>';

    $("#calculation").append(template);
}
   
Comments
BBO001 25-Sep-20 4:55am
   
Thank you so much!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100