Question

I have multiple input text fields grouped in divs:

<div class="container0">
<input class="containerItem0" name="containerItem[0][0]" id="containerItem_0_0" type="text">  
<input class="containerItem1" name="containerItem[0][1]" id="containerItem_0_1" type="text">
</div

<div class="container1">
<input class="containerItem0" name="containerItem[1][0]" id="containerItem_1_0" type="text">
<input class="containerItem1" name="containerItem[1][1]" id="containerItem_1_1" type="text">
</div>

<div class="container2">
<input class="containerItem0" name="containerItem[2][0]" id="containerItem_2_0" type="text">
<input class="containerItem1" name="containerItem[2][1]" id="containerItem_2_1" type="text">
</div>

Let me explain this code:
I have three containers: 0,1 and 2. However this is variable. There could be more or less.
In each container I always have the same number of items, in this case two. This can vary as well but it will always be the same amount across all containers.
The items with the same class are the same items! The only difference is that they are in different containers.
The name and ID for each input item is used in my php script to determine after submitting the form:

containerItem[1][0]
containerItem[ContainerNumber][Item]

What I want to accomplish:
There is a individual maximum amount for each containerItem.
Let’s say containerItem0 = 100, containerItem1 = 200, containerItem2 = 300.
Now when I enter a numeric value into the input field for containerItem0, e.g. 20. It should update a which could be behind the input field how much is left, in this case 80.
Not only should it update the behind the input field where I just entered the numeric value but behind all other containerItem0’s as well.

What I tried

// php part
// Create variables for use in jquery for the max values for the containerItems
$jqueryVars="";
$j=0;
// containerItems is an array I get with the numberOrdered value which equals the maximum number allowed
foreach ($containerItems as $key => $value) {
    $jqueryVars .= "var maxContainerItem".$j." = ".$value['NumberOrdered'].";\n";
    $j++;
}


// jQuery part:
// Calculate left amount of container items.
'$(document).change(function() {
    '.$jqueryVars.'
    var sumOfValues = 0;
    //I USED >>.containerItem0<< in this case to see if it works, however this should be variable
    $(".containerItem0").each(function(){
       sumOfValues+=$(this).val();
    });
    alert(sumOfValues);
});

As you can see I am stuck making this whole thing dynamic. I partially get the alert message of sumOfValues. Why partially? It does not add the numbers but appends them as they were strings.
Also, I do not know how to iterate through all container classes and listen for changes in the input fields.

I am looking forward to get any pointers into the right direction 🙂

Answer 1

You’re using $(this).val() which returns the value of the input fields. These values are indeed strings, so using + on them will concatenate them.

If you parse the values before adding them, it should yield what you expect:

$(document).change(function() {
  var sumOfValues = 0;
  $(".containerItem0").each(function() {
     sumOfValues += parseFloat($(this).val());
  });
  alert(sumOfValues);
});