jQuery sum of newly created input values

Question

Im trying to calculate sum of created input value but somehow its not giving right result (for example: if I create 2 input with value 1 it shows 3)

HTML:

<a href="#" class="new">new</a>
<a href="#" class="report">report</a>
<div class="container"></div>
<p>total:<span></span></p>

JS:

var total = 0;

$('.new').click(function(){
    $("div").append('<input type="text" name="amount"/>');
});

$('input').live('keyup', function(){
    $('.container input').each(function(){
        total += parseInt($(this).val());
    });
    $('span').html(total);
});

$('.report').live('click', function(){
    $('.container input').each(function(){
        alert('input: '+$(this).val());
    });
});

Here is the fiddle: http://jsfiddle.net/Wn2cs/4/

adeneo · Accepted Answer · 2013-08-29 17:54:02Z

2

live() has been deprecated, and you should be using on().

The issue is the global var total, and on each keyup you keep adding to that global, it never resets. It should be defined in the event handler instead :

$('.container').on('keyup', 'input', function(){
    var total = 0;
    $('.container input').each(function(){
        total += parseInt($(this).val(),10);
    });
    $('span').html(total||0); // avoids NaN
});

FIDDLE

answered Aug 29, 2013 at 17:54

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

Comments

Rômulo Spier · Accepted Answer · 2013-08-29 17:58:03Z

0

try this:

$('input').live('keyup', function(){
    var total = 0;

    $('.container input').each(function(){
        var value = parseInt($(this).val());
        total += value;
    });
    $('span').html(total);
});

$('.report').live('click', function(){
   alert($('.container input').length);
});

edited Aug 29, 2013 at 17:58

answered Aug 29, 2013 at 17:52

Rômulo Spier

2311 silver badge11 bronze badges

1 Comment

Felix Kling Over a year ago

That will give the wrong answer if any input contains a different value than 1.

kayz1 · Accepted Answer · 2013-08-29 18:24:17Z

<div id="input-container">
    <a href="#" class="new">New</a>
    <a href="#" class="report">Report</a>

    <div id="inputs-area"></div>

    <p>Total:<span id="total">0</span></p>
</div>

var InputCalculator = (function ($) {

    /* Static Content */
    var _$container = $('#input-container');
    var _$inputsArea = $('#inputs-area');
    var _$total = $('#total');

    /* Helpers */
    var _getTotal = function () {
        var total = 0;

        _$inputsArea.find('input').each(function () {
            var currentValue = parseInt(this.value, 10);

            if (!isNaN(currentValue)) {
                total += currentValue;
            }
        });

        return total;
    };

    /* Events */
    var _createReportEvent = function (e) {
        e.preventDefault();

        alert('Total: ' + _getTotal());
    };

    var _createInputEvent = function(e) {
        e.preventDefault();

        _$inputsArea.append($('<input>', { type: 'text' }));
    };

    var _recalculateEvent = function() {
        _$total.text(_getTotal());
    };

    var _bindEvents = function () {
        _$container.on('click', 'a.report', _createReportEvent);
        _$container.on('click', 'a.new', _createInputEvent);
        _$inputsArea.on('keyup', 'input', _recalculateEvent);
    };

    var init = function () {
        _bindEvents();
    };

    return {
        init: init
    };

})(jQuery);

InputCalculator.init();

Collectives™ on Stack Overflow

jQuery sum of newly created input values

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related