如何使用javascript计算动态字段数的总值？

我的页面显示了一些表单，其中包含从数据库加载的内容。每一行都有自己的

。该输入的ID对于每一行都是相等的，附加到该行的数字除外，以使其唯一。使之更清楚；这是表单从数据库加载3行时的外观：

<form>
<input id="Amount1" value="<?php echo $databaseValue; ?>" >
<input id="Amount2" value="<?php echo $databaseValue; ?>" >
<input id="Amount3" value="<?php echo $databaseValue; ?>" >
<input type="hidden" name="numberOfRows">
<input id="finalResult">
</form>

这没什么用。它不会改变值。出了什么问题？

简单点：

$(function(){
   var sum = 0;
   // Selector to select all input whose id starts with Amount
   $("input[id*='Amount']").each(function(){

        sum += +$(this).val(); // Parsing as int and adding it to sum

   });
   $("#finalResult").val(Math.floor(sum/15)); // Storing the values
})

---

假设所有字段在其

id

属性的开头总是有

Amount

，您可以使用jQuery的id选择器来实现这一点，而不需要任何内部计数器等

我不完全清楚为什么需要挂接到

mousemove

事件，因为数据永远不会在页面上更改（因为它是在页面首次加载时由PHP生成的）。下面的代码应该可以实现您想要的：

$(function() {

    var total = 0;

    $('input[id*="Amount"]').each(function() { total+= parseFloat( $(this).val() ); });

    $('#finalResult').val( Math.floor( total / 15 ) );

});

---

如果您能够更改生成的Html源代码，我建议您为InputElements提供一个新类

<input id="Amount1" class="ElementToCount" value="<?php echo $databaseValue; ?>" >

---

您的代码有一个错误

未捕获引用错误：未定义b

请在此处查看它的实际操作：

没有理由将

mousemove

事件引入其中，我甚至不确定这是为了什么

像上面的答案一样，这里有一个非常简化的版本。但是，我们不需要选择部分ID，只需要给表单一个ID，然后给表单中所有需要的元素一个类，我们可以选择它。我们也不再需要

numberOfRows

form元素

<form id="theForm">
    <input class="formAmmount" value="5" />
    <input class="formAmmount" value="10" />
    <input class="formAmmount" value="27.5" />
    <input class="formAmmount" value="4" />
    <input class="formAmmount" value="9" />

    <hr />

    <input id="finalResult" />
</form>

---

在这里查看它的实际操作：

您不需要jQuery。最简单的方法是

document.getElementsByTagName

：

var inputs = document.getElementById('my-form').getElementsByTagName('input')

就这样<代码>输入。长度将始终获得表单中输入的实际计数。这是因为

getElementsByTagName（）

返回一个节点列表对象，其中包含匹配元素的实时视图。这个对象是可变的；它会随着DOM突变而改变

因此，如果您需要从所有输入中获取总和：

function sum() {
   var result = 0;
   [].slice.call(inputs).forEach(function(input){
       result += parseFloat(input.value)
   });
   return result; 
}

---

值total_finalResult是否正确更新？我不确定，因为函数在再次调用公式_finalResult之前已关闭。我不确定formula_finalResult是否知道b是什么。但我不知道如何更改它以实时更新所有值我使用mousemove事件实时更新结果。最终结果将作为值存储在输入标记中。在我按下submit之前，我需要总数。但是在您的问题中，

b

在初始DOM加载后不会被修改，因此

mousemove

处理程序中设置的值将始终相同？是的，我明白了。你说得对。错过了那个错误。让我们看看这是否有区别。我已经将代码的函数更改为mousemove事件以实时更新它。现在它工作得很好！我已将代码的函数更改为mousemove事件以实时更新它。现在它工作得很好！

<form id="theForm">
    <input class="formAmmount" value="5" />
    <input class="formAmmount" value="10" />
    <input class="formAmmount" value="27.5" />
    <input class="formAmmount" value="4" />
    <input class="formAmmount" value="9" />

    <hr />

    <input id="finalResult" />
</form>

$(function(){
    var total = 0;
    $("#theForm .formAmmount").each(function(){
        total += parseFloat(this.value, 10);
    });
    var final = Math.floor(total.toFixed(2) / 15);
    $("#finalResult").val(final);
});

var inputs = document.getElementById('my-form').getElementsByTagName('input')

function sum() {
   var result = 0;
   [].slice.call(inputs).forEach(function(input){
       result += parseFloat(input.value)
   });
   return result; 
}