Sum of the value of dynamic elements

Question

I am trying to get real time summation of the value of dynamic elements, but I can't get it. You can see my DEMO here.

My code is given below.

My Javascript is:

<script>
    $(document).ready(function(){
        $(".input_ttotal").each(function() {

            $(this).keyup(function(){
                calculateSum();
            });
        });

    });

    function calculateSum() {

        var sum = 0;

        $(".input_ttotal").each(function() {       
            if(!isNaN(this.value) && this.value.length!=0) {
                sum += parseFloat(this.value);
            }

        });
        $("#sum").html(sum.toFixed(2));
    }
</script>

Finally, my HTML is:

<form action="" method="POST">

<div class="yes">
    <div id="cost1" class="clonedCost" style="display: inline;">
        <table  border="0">
          <tr>          
            <td><label class="total" for="total">Total 1</label></td>
          </tr>
          <tr>
            <input class="input_ttotal" id="ttotal" type="text" name="ttotal[]" /></td>
          </tr>
        </table>
    </div>
    <div id="addDelButtons_cost"><input type="button" id="btnAdd" value=""> <input type="button" id="btnDel" value=""></div>

     <p>Sum is:<span id="sum">0</span></p>
</div>

</form>

your problem exists because jquery cannot detect html that is added in after the page loads. try look up on how to use `delegate`, or the new `on()` function — He Hui, Jul 31 '13 at 02:49
Are you consistently adding an input line with an id of "ttotal"? That's invalid markup! Where's the script that adds a new line? — DevlshOne, Jul 31 '13 at 02:50

vee · Answer 1 · 2013-07-31T03:08:43.240

2

The problem seems to be with newly added elements. You could use the jQuery on method to bind keyup event on those elements. Also you don't need to loop through the elements and bind the keyup event on each an every one of them like you've done. You could do it with one statement without the loop like follows:

$(document).on('keyup', '.input_ttotal', function() {
    calculateSum();
});

Or alternatively on one like as CORRUPT mentioned in the comment below:

$(document).on('keyup', '.input_ttotal', calculateSum);

edited Jul 31 '13 at 03:08

answered Jul 31 '13 at 02:49

vee

38,255
7
74
78

Might be shortened to `$(".input_ttotal").on('keyup', calculateSum);` – BlitZ Jul 31 '13 at 02:51
@CORRUPT, nice! Yes absolutely. – vee Jul 31 '13 at 02:53
@SamuelLiew, thanks for pointing that out. Yes it's now tested and working :) – vee Jul 31 '13 at 03:09

score 1 · Accepted Answer · edited May 23 '17 at 12:20

1

The keyup is only working for the first element. The new inputs are not having the handler bound to them. Instead of using .each() to bind the elements once on page load, use .on() to handle those that are also dynamically attached.

Change

$(".input_ttotal").each(function() {
    $(this).keyup(function() {
        calculateSum();
    });
});

To

$("form").on('keyup', '.input_ttotal', function() {
    calculateSum();
});

Click to see it in action: http://jsfiddle.net/ByLrz/1/

edited May 23 '17 at 12:20

Community

1
1

answered Jul 31 '13 at 02:49

Samuel Liew

76,741
107
159
260

Yeah it works well. But when i delete one row it does not decrease the summation??? – Subir Jul 31 '13 at 12:04
$('#btnDel').click(function () { calculateSum(); }); When i click #btnDel to delete row , then i call calculateSum(); function but does not work. sir i don't know jQuery well. Please don't mind. – Subir Jul 31 '13 at 14:04
Sorry to disturb you again. $('#btnDel').click(function () { calculateSum(); }); work well in google chrome browser. But does not work properly in firefox. Suppose 10 + 10 + 10 = 30 if i delete 2 row then sum shows 20 . But this will be 10. What's going wrong. – Subir Jul 31 '13 at 14:26

Sum of the value of dynamic elements

2 Answers2