Summe der Werte der Eingänge eines bestimmten Formulars und Anzeige des Ergebnisses

Question

Meine Seite besteht aus mehreren Formularen mit mehreren Eingängen, die "values ​​[]" genannt werden. Wenn ich diese Eingaben in einem der Formulare ändere, möchte ich die Werte summieren und das Ergebnis in einer anderen Eingabe desselben Formats namens "total" anzeigen.

Mein HTML-Code sieht wie folgt aus:

<form action="index.php" method="post" id="form_1"> 
    <input type="text" name="values[]" id="value_1_1" onkeyup="sum_values(this)" /> 
    <input type="text" name="values[]" id="value_1_2" onkeyup="sum_values(this)" /> 
    [... More inputs with the name "values[]" ] 
    <input type="text" name="total" disabled> 
</form> 

<form action="index.php" method="post" id="form_2"> 
    <input type="text" name="values[]" id="value_2_1" onkeyup="sum_values(this)" /> 
    <input type="text" name="values[]" id="value_2_2" onkeyup="sum_values(this)" /> 
    [... More inputs with the name "values[]" ] 
    <input type="text" name="total" disabled> 
</form> 

und mein Javascript ist:

<script type="text/javascript"> 
function sum_values(x){ 
    var arr = document.getElementById(x.form.id).elements['values[]']; 
    var tot=0; 
    for(var i=0;i<arr.length;i++) 
    { 
     if(parseInt(arr[i].value)) 
      tot += parseInt(arr[i].value); 
    } 
    document.getElementById(x.form.id).elements['total'].value = tot; 
} 
</script> 

ich sehr glücklich war die erste Form Arbeits, um endlich zu sehen, aber ich dachte, dann heraus, dass die zweite man war nicht ...

Können Sie mir helfen zu verstehen, warum? Ich bin ein Anfänger bei Javascript und ich habe versucht, etwas Code zu arrangieren, den ich fand. Vielen Dank

Answer 1

Wenn Sie alle Elemente innerhalb eines bestimmten Formulars erhalten möchten, können Sie dazu einen ähnlichen Code wie den folgenden verwenden. Der Rest Ihres Codes sollte in Ordnung sein, mit Ausnahme Ihres Eingabe-Selektors für den Endergebnis.

var formId = 'form1'; 
 
var arr = document.querySelectorAll('#' + formId + ' [name="values[]"]'); 
 

 
var tot=0; 
 
for(var i=0; i<arr.length; i++) { 
 
    if(parseInt(arr[i].value)) 
 
    tot += parseInt(arr[i].value); 
 
} 
 
document.querySelector('#' + formId + ' [name="total"]').value = tot;

<form id="form1"> 
 
    <input type="text" name="values[]" value="5" /> 
 
    <input type="text" name="values[]" value="1" /> 
 
    <input type="text" name="values[]" value="6" /> 
 
    <input type="text" name="values[]" value="8" /> 
 
    <input type="text" name="values[]" value="2" /> 
 
    <input type="text" name="values[]" value="0" /> 
 
    <input type="text" name="values[]" value="1" /> 
 
    <input type="text" name="values[]" value="3" /> 
 
    <input type="text" name="total" disabled> 
 
</form>