CODEWITHSUNDEEP
javascriptjquery
AnchovyLegend
AnchovyLegend

Reputation: 12537

Summing up input values

I am trying to use jquery to iterate through all '.invoice-lines' and generate a total by summing up all values in the '.amount-input' div.

AJAX dynamically generates the default values in '.amount-input' which can be manually changed by the user. I have been trying to create a function so that every time new data comes in using AJAX, a call will be made to the function updateTotal(), which iterates through all the non-empty 'amount-input' values and recalculates the total. I have been having a really tough time accomplishing this, and I would greatly appreciate any help.

JQuery - This is my jquery so far (pseudo code)

function updateTotal(){
   var total=0;
    for(i=0; i < $('.invoice-line').length; i++){
         if($('.amount-input').eq(i).val() != empty)){
              total += $('.amount-input').eq(i).val();
          }
    }
    $('.total').val("$" + total);
}

Markup

<?
    for(i=0; i < 25; i++){
    echo'   <div class="invoice-line">
                <div class="prod-id-cell"><input type="text" class="prod-id-input"></div>

                <div class="amount-cell"><input class="amount-input" type="text" /></div>
            </div>';
    }
?>
    <div class="total">$0.00</div>

Upvotes: 0

Views: 190

Answers (5)

AnchovyLegend
AnchovyLegend

Reputation: 12537

Shortly after posting, I was able to come up with my own solution as follows:

function updateTotal(){
    var total=0;
    for(i=0; i < $('.invoice-line').size(); i++){
        currentAmount = Number($('.amount-input').eq(i).val().replace(/[^0-9\.]+/g,""));
        total += currentAmount;
    }
    $('.total-number').text("$" + total.toFixed(2));
}

Upvotes: 0

Thomas C. G. de Vilhena
Thomas C. G. de Vilhena

Reputation: 14545

You can use the change event to update the total amount everytime an input element is individually updated. Below is a simple example:

HTML:

<input class="invoice" type="text" value="0" />
<input class="invoice" type="text" value="0" />
<input class="invoice" type="text" value="0" />
<div id="total">0</div>

Javascript:

$('.invoice').change(function() {
    var total = 0;
    $('.invoice').each(function() {
        total += parseFloat($(this).val());
    });
    $('#total').text(total);
});

You can see it working in this jsfiddle.

Upvotes: 0

pete
pete

Reputation: 25081

Something like this should work:

function updateTotal() {
    var total = 0;
    $('.invoice-line').each(function (i, elem) {
        total += parseFloat($(elem).find('.amount-input').val(), 10) || 0;
    });
    $('.total').val("$" + total);
}

Upvotes: 0

Dennis
Dennis

Reputation: 32598

Make sure you cache the jQuery selection, otherwise you are doing 50 DOM traversals instead of 1:

var total=0, amounts = $('.amount-input'), len = amounts.length;
for(var i=0; i < len; i++){
     total += +amounts[i].value;
}

Use the unary plus operator to convert the cell value from a string to a number. +"" will give you zero, so you don't need to check if the cell is empty, though you may want to check isNaN when validating the input.

Also, use val for input elements, but text for divs or spans.

$('.total').text("$" + total);

Upvotes: 1

Levi Botelho
Levi Botelho

Reputation: 25204

The basic syntax in pure JS is as follows:

var inputs = document.getElementsByClassName("amount-input");
var total = 0;
inputs.forEach(function (input) {
    total += value;
});

The idea is that you get a collection of all the inputs in which you are interested, and then sum up the values using an external variable. If you wanted to expand this to include other inputs then you could use document.querySelectorAll("") with a CSS query selector to get the collection. (This is the same as the jQuery $("") selection syntax.)

Upvotes: 0

Related Questions