Question

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>

Answer 1

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