jQuery sum multiples input fields (price * quantity) dynamically added with same class

Question

I have a .click function, each time is executed it adds a group of three divs in a page. the first div is a number and is multiplied for the second div that holds a currency value; the result is shown in the third div. I'm trying to write a .each function to calculate the results separately, but it seems that i can not. I feel that should be simple, but i'm missing something. Can someone help? Thanks here is the code I wrote so far (i tried many different ways...):

===UPDATE==== I updated my code, i added a counter that add an incremental number to the the classes, but I'm still without solution. The code now is

    <ul>
        <li>Quantità: <span><input type="text" name="Quantita" value="" class="currency2"></span> (metti due decimali - 0.00)</li>
        <li>Valore unitario: <span><input type="text" name="ValoreUnitario" value="" class="valore_unitario2"></span></li>
        <li>Valore totale: <span><input type="text" name="ValoreTotale" value="" class="somma2"></span></li>                        
    </ul>
    <ul>
        <li>Quantità: <span><input type="text" name="Quantita" value="" class="currency3"></span> (metti due decimali - 0.00)</li>
        <li>Valore unitario: <span><input type="text" name="ValoreUnitario" value="" class="valore_unitario3"></span></li>
        <li>Valore totale: <span><input type="text" name="ValoreTotale" value="" class="somma3"></span></li>                        
   </ul>
   <ul>
        <li>Quantità: <span><input type="text" name="Quantita" value="" class="currency4"></span> (metti due decimali - 0.00)</li>
        <li>Valore unitario: <span><input type="text" name="ValoreUnitario" value="" class="valore_unitario4"></span></li>
        <li>Valore totale: <span><input type="text" name="ValoreTotale" value="" class="somma4"></span></li>                        
   </ul>


    $(".currency"+ counter , ".valore_unitario" + counter).on("change keyup keydown paste propertychange bind mouseover", function(){
    var rate = parseFloat($(".currency" + counter ).val()) || 0;
    var box = parseFloat($(".valore_unitario" + counter).val()) || 0;

    $(".somma" + counter ).val(parseFloat(rate * box).toFixed(2));    

});

});

uomopalese · Accepted Answer · 2015-01-06 10:48:50Z

Ok, this is how i figured out googoling and searching on other post on this site JSFIDDLE IS HERE, hope can help someone else:

<div class="page">
<ul>
    <li>Quantità: <span><input type="text" name="Quantita" value="" class="quantita"></span></li>
    <li>Valore unitario: <span><input type="text" name="ValoreUnitario" value="" class="valore"></span></li>
    <li> Valore totale: <span><input type="text" name="ValoreTotale" value="0.00" class="somma"></span></li>
</ul>

<div id="foo"></div>
<input type="submit" value="ADD MORE" class="button" id="clicca">
<ul>
    <li>Total amount:<input id="amount" type="text" name="Imponibile-Importo" value="0.00"></li>
</ul>
</div>

and the script here:

$(".page").on("change keyup keydown paste propertychange bind mouseover", function(){
    calculateSum();
});

// add fields
$( "#clicca" ).click(function() {
$( "#foo" ).append(
'<ul>' + '\n\r' +
'<li>Quantità: <span><input type="text" name="Quantita" value="" class="quantita"></span></li>' + '\n\r' +
'<li>Valore unitario: <span><input type="text" name="ValoreUnitario" value="" class="valore"></span></li>' + '\n\r' +
'<li>Valore totale: <span><input type="text" name="ValoreTotale" value="0.00" class="somma"></span></li>' + '\n\r' +
'</ul>' 
);

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

    });
});

});

// function    
function calculateSum() {
var sum = 0;
$(".somma").each(function() {
if(!isNaN(this.value) && this.value.length!=0) {

    var quantita = $(this).closest("ul").find("input.quantita:text").val();
    var valore = $(this).closest("ul").find("input.valore:text").val();

    var subTot = (quantita * valore);

    $(this).val(subTot.toFixed(2));

    sum += parseFloat(subTot.toFixed(2));
   }
});
  $('#amount').val(sum.toFixed(2));
}

Collectives™ on Stack Overflow

jQuery sum multiples input fields (price * quantity) dynamically added with same class

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related