总结特定表格的输入值并显示结果

Question

我的页面由几个输入组成，名为“values []”。 当修改这些输入中的一种形式时，我想总结这些值并将结果显示在名为“total”的相同形式的其他输入中。

我的HTML代码看起来像这样：

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

，我的JavaScript是：

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

我很高兴终于看到了第一种形式的工作，但后来我想通了，第二一个不是......

你能帮我理解为什么吗？ 我是一名JavaScript初学者，我试图安排一些我找到的代码。 非常感谢您

Answer 1

如果您想要获取特定表单中的所有元素，可以使用类似于以下内容的代码。除了最终结果输入选择器之外，其余代码应该可以正常工作。

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>