CODEWITHSUNDEEP
jquery
test
test

Reputation: 2466

jQuery sum of newly created input values

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/

Upvotes: 0

Views: 116

Answers (3)

kayz1
kayz1

Reputation: 7434

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

Upvotes: 0

R&#244;mulo Spier
R&#244;mulo Spier

Reputation: 231

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

Upvotes: 0

adeneo
adeneo

Reputation: 318182

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

Upvotes: 2

Related Questions