Gesamtwerte von Eingabefeld

Question

Ich versuche, den Gesamtwert aller Eingabefelder

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>'; 

} 

und legen Sie die Summe dieser Felder in

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

Das Skript unten reagiert nicht zu bekommen/Arbeits

<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> 

Irgendwelche Vorschläge?

Answer 1

Add Klasse .add_calc_aantal auf Ihre Schleife überprüfen

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>'; 
    // ---------------------------------------------------------^ 
} 

dann die Probe unter

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

Die Eingabeelemente scheinen add_calc_aantal den gleichen Namen zu haben, die verwendet werden können, Holen Sie sie:

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

Zwei kleinere Korrekturen - siehe Kommentare unten:

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 
} 

Um diese Funktion ausführen zu können, soll ein Element hinzufügen, das es nennt, mit Onclick auch: onclick=calculatie(), zum Beispiel :

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