Total values of input field

Question

I am trying to get the total value of all input fields

for ($j = 0; $j <= 4; $j++) { echo '

    <div class="form-group-sm" id="div_add_calc_aantal['.$j.']">
      <input type="number" min="0" step="1" class="form-control" id="add_calc_aantal['.$j.']" name="add_calc_aantal" value="" onchange="validate_edit(this, '.$j.')">
    </div>';

}

And place the total of these fields in

<input type="text" class="form-control" id="add_calc_totaal_aant" name="add_calc_totaal_aant" value="">

The script below is not responding / working

<script type="text/javascript">
function calculatie(selectVeld, nr)
{
    // Absoluut aantal
    var i, totaal = 0;
    var elems = document.getElementById('add_calc_aantal['+nr+']').value;
    var l = elems.length;
    for(i=0; i<l; i++)
    {
        totaal += parseFloat(elems[i].value) || 0;
    }
        document.getElementById('add_calc_totaal_aant').value = totaal.toFixed( 0 );
}
</script>

Any suggestions?

Answer 1

Add class .add_calc_aantal to your loop

for ($j = 0; $j <= 4; $j++) { echo '

    <div class="form-group-sm" id="div_add_calc_aantal['.$j.']">
      <input type="number" min="0" step="1" class="form-control add_calc_aantal" id="add_calc_aantal['.$j.']" name="add_calc_aantal" value="" onchange="validate_edit(this, '.$j.')">
    </div>';
    // ---------------------------------------------------------^
}

Then check the sample below

 function calculatie() { // Absoluut aantal var totaal = 0; var elems = document.querySelectorAll('.add_calc_aantal'); // query new added class [].forEach.call(elems, function(e) { totaal += parseFloat(e.value) || 0; }) document.getElementById('add_calc_totaal_aant').value = totaal.toFixed(0); } calculatie(); 

 <!-- this html was added for demo purpose, actually its generated by your server --> <div class="form-group-sm" id="div_add_calc_aantal[1]"> <input type="number" min="0" step="1" class="form-control add_calc_aantal" name="add_calc_aantal" value="34" onchange="validate_edit(this, 1)"> </div> <div class="form-group-sm" id="div_add_calc_aantal[2]"> <input type="number" min="0" step="1" class="form-control add_calc_aantal" name="add_calc_aantal" value="45" onchange="validate_edit(this, 2)"> </div> <div class="form-group-sm" id="div_add_calc_aantal[3]"> <input type="number" min="0" step="1" class="form-control add_calc_aantal" name="add_calc_aantal" value="100" onchange="validate_edit(this, 3)"> </div> <label for="add_calc_totaal_aant">totaal</label> <input type="text" class="form-control" id="add_calc_totaal_aant" name="add_calc_totaal_aant" value=""> 

Answer 2

The input elements seem to have the same name add_calc_aantal that can be used to get them:

 function calculatie() { var elems = document.getElementsByName('add_calc_aantal'), i = elems.length, total = 0; while (i--) total += elems[i].value | 0; document.getElementById('add_calc_totaal_aant').value = total.toFixed( 0 ); } 

 <div onchange=calculatie()> <div> <input type=number min=0 step=1 name=add_calc_aantal> </div> <div> <input type=number min=0 step=1 name=add_calc_aantal> </div> <div> <input type=number min=0 step=1 name=add_calc_aantal> </div> </div> Total <input readonly id=add_calc_totaal_aant> 

Answer 3

Two minor corrections - see comments below:

function calculatie() {
    // Absoluut aantal
    var i, totaal = 0;
    var elems = document.getElementsByClassName('form-control'); // get a handle of the specific inputs - not the divs that surround them
    var l = elems.length;
    for(i=0; i<l; i++)
    {
        totaal += parseFloat(elems[i].value) || 0;
    }
    document.getElementById('add_calc_totaal_aant').value = totaal; // simply assign the value
}

In order to run this function you should add an element which will call it, with onclick even: onclick=calculatie() , for example:

<button name="submit" label="submit" onclick=calculatie()>