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

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

＆＃13;

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;

＆＃13;

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

＆＃13;

将特定表单的输入值相加并显示结果

1 个答案: