Click here to Skip to main content
15,176,561 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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 1:43am
v2

1 solution

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

JavaScript
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.

JavaScript
$(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, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900