jQuery/Javascript complex iterate over elements

Question

We have a form and need to iterate over some elements to get the final sum to put in a "total" element. E.g., here is a working starter script. It doesn't NOT iterate over the other ones. It does NOT consider the elements "item*", below, yet but should. Keep reading.

<script>
$( document ).ready(function() {
    $('#taxsptotal').keyup(calcgrand);
    $('#shiptotal').keyup(calcgrand);
    $('#disctotal').keyup(calcgrand);

    function calcgrand() {
        var grandtot = parseFloat($('#subtotal').val(), 10)
        + parseFloat($("#taxsptotal").val(), 10)
        + parseFloat($("#shiptotal").val(), 10)
        - parseFloat($("#disctotal").val(), 10)

        $('#ordertotal').val(grandtot);
    }
});
</script>

We are adding more to this. Think of having many items in a cart and each one has the same elements for the following where "i" is a number designating an individual item.

<!-- ordertotal = sum of #subtotal, #taxptotal, #shiptotal and #disctotal -->
<input type="text" id="ordertotal" name="ordertotal" value="106.49">

<input type="text" id="taxsptotal" name="taxsptotal" value="6.72">
<input type="text" id="shiptotal" name="shiptotal" value="15.83">
<input type="text" id="disctotal" name="disctotal" value="0.00">

<!-- sum of the cart "itemtotal[i]" -->
<input type="text" id="subtotal" name="subtotal" value="83.94">

<!-- cart items
User can change any itemprice[i] and/or itemquantity[i]
itemtotal[i] = sum(itemquantity[i] * itemprice[i])
-->
<input type="text" name="itemtotal[1]" value="8.97" />
<input type="text" name="itemquantity[1]" value="3" />
<input type="text" name="itemprice[1]" value="2.99" />

<input type="text" name="itemtotal[2]" value="4.59" />
<input type="text" name="itemquantity[2]" value="1" />
<input type="text" name="itemprice[2]" value="4.59" />

<input type="text" name="itemtotal[3]" value="0.99" />
<input type="text" name="itemquantity[3]" value="10" />
<input type="text" name="itemprice[3]" value="9.90" />

(1) User can change any itemprice[i] and/or itemquantity[i], so each needs a keyup. I can do that in php as it iterates over the items.

(2) These elements will have a $('.itemtotal[i]').keyup(calcgrand); (Or function other than calcgrand, if needed) statement, too. That keyup can be added by the php code as it evaluates the items in the cart.

(3) When an element is changed, then the script should automatically (a) calculate the $('[name="itemtotal[i]"]').val() and (b) replace the value for $('[name="itemtotal[i]"]').val().

(4) Then, the script above will use the $('[name="itemtotal[i]"]').val() to (a) replace the #subtotal value and (b) use that value in the equation.

Can someone help me with this? I am stuck on how to iterate over the [i] elements.

p.s. Any corrections/enhancements to the above code is appreciated, too.

This may help: https://stackoverflow.com/questions/13540751/how-get-total-sum-from-input-box-values-using-javascript — benvc, Sep 18 '19 at 19:05

score 0 · Answer 1 · answered Sep 18 '19 at 19:07

0

Add a custom class to the desired inputs to sum:

HTML:

<input type="text" class="customclass" name=itemtotal[1] value="8.97" />
<input type="text" class="customclass" name=itemquantity[1] value="3" />
<input type="text" class="customclass" name=itemprice[1] value="2.99" />

JS:

var sum = 0;

    $.each('.customclass',function(i, item){
        sum = sum + Number($(this).val());
    })

alert(sum);

answered Sep 18 '19 at 19:07

I like this BUT assuming $this is the itemquantity, I need to multiply $(this).val() by the respective itemprice. E.g., sum = sum + ( Number($this).val() * however do I get the itemprice for $this? ) That is, the sum is a sum of (itemquantity[i] * itemprice[i]). – I am Alta Sep 19 '19 at 00:32

score 0 · Answer 2 · answered Sep 18 '19 at 19:43

if you for example group your inputs by giving them a class, or have each group in a div like so:

<!-- ordertotal = sum of #subtotal, #taxptotal, #shiptotal and #disctotal -->
<input type="text" id="ordertotal" name="ordertotal" value="106.49">

<input type="text" id="taxsptotal" name="taxsptotal" value="6.72">
<input type="text" id="shiptotal" name="shiptotal" value="15.83">
<input type="text" id="disctotal" name="disctotal" value="0.00">

<!-- sum of the cart "itemtotal[i]" -->
<input type="text" id="subtotal" name="subtotal" value="83.94">

<!-- cart items
User can change any itemprice[i] and/or itemquantity[i]
itemtotal[i] = sum(itemquantity[i] * itemprice[i])
-->
<div class="group">
    <input type="text" name="itemtotal[1]" value="8.97" />
    <input type="text" name="itemquantity[1]" value="3" />
    <input type="text" name="itemprice[1]" value="2.99" />
</div>

<div class="group">
    <input type="text" name="itemtotal[2]" value="4.59" />
    <input type="text" name="itemquantity[2]" value="1" />
    <input type="text" name="itemprice[2]" value="4.59" />
</div>

<div class="group">
    <input type="text" name="itemtotal[3]" value="0.99" />
    <input type="text" name="itemquantity[3]" value="10" />
    <input type="text" name="itemprice[3]" value="9.90" />
</div>

Then you could do the following in javascript:

function calcSubTotal() {
  $('[name^="itemtotal"]').each(function(i){
      var sum = 0;
      $('[name^="itemtotal"]').each(function(i){
        sum += $(this).val();
      });
      $('#subtotal').val(sum);
  });
}

$('.group').each(function(i) {
    var total = $(this).find('[name^="itemtotal"]');
    var qnt = $(this).find('[name^="itemquantity"]');
    var price = $(this).find('[name^="itemprice"]');
    total.keyup(function(e){
        price.val(total.val() * qnt.val());
        calcSubTotal();
    });
    qnt.keyup(function(e){
        price.val(total.val() * qnt.val());
        calcSubTotal();
    });
});

score 0 · Answer 3 · answered Sep 18 '19 at 20:01

$("[name^='itemprice'], [name^='itemquantity']").keyup(function(){
        var input_name = $(this).attr('name');
        var temp_name_split = input_name.split(/[\[\]]+/);
        var temp_total = parseInt($('[name="itemquantity['+temp_name_split[1] +']"]').val()) * parseFloat($('[name="itemprice['+temp_name_split[1] +']"]').val());
        $('[name="itemtotal['+temp_name_split[1]+']"]').val(temp_total.toFixed(2));
        var total = 0;
        $("[name^='itemtotal']").each(function() {
            total += parseFloat($(this).val()); 
        });
        $('#subtotal').val(total.toFixed(2));
    });

jQuery/Javascript complex iterate over elements

3 Answers3