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

How to calculate the total value of a dynamic number of fields using javascript?

本文关键字：字段 动态 何使用 javascript 计算      更新时间：2023-09-26

我的页面显示了一些表单，其中包含从数据库加载的内容。每一行都将获得自己的<input>。除了附加到该输入的数字之外，该输入的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>

这一切都是通过mysqli_array函数完成的。numberOfRows的值基于numRows函数。

我想实现的是，javascript计算每个现有输入的值，并将结果放入finalResult中，而不考虑表单的数量（因为这可能会有所不同）。如果我对其中一个值进行了一些更改，那么finalResult应该会实时更新。

到目前为止我尝试过的：

formnum包含字段数。

var a在开始时创建，从0开始。在它的函数中，我创建了一个ID，与页面上的字段相匹配。所有字段都命名为"金额"+数字。如果这个数字等于字段的数量，函数将停止。这样一来，脚本就不会寻找没有excist的字段。

然后它得到该字段的值，并将该值添加到var b。创建var b只是为了临时存储值，直到函数结束。

最后，总数除以15。这是我额外需要的东西。这条线路没什么特别的。

我的代码：

<script type='text/javascript'>
$(document).ready(function(){
          var formnum = $("#numberOfRows").val();
          var a;
          var b = 0;
          var formname = '#Amount';
          for (a = 0; a < formnum; a++) {
              var complete = formname.concat(a);
              var completeContent = $(complete).val();
              b = b + completeContent;
            };
          b = b.toFixed(2);
});
$(document).mousemove(function(event){
          var formula_finalResult = b / 15;
          var total_finalResult = Math.floor(formula_finalResult);
          $("#finalResult").val(total_finalResult);
});
</script>

这没有任何作用。它不会改变值。怎么了？

让它变得简单：

$(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 ) );
});

您的代码有一个错误Uncaught ReferenceError: b is not defined请在此处查看其实际操作：http://jsfiddle.net/ca9vascj/

没有理由把mousemove事件纳入其中，我甚至不确定这需要什么。

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

<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代码可以简化为：

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

请在此处查看其实际操作：http://jsfiddle.net/ca9vascj/1/

您不需要jQuery。最简单的方法是document.getElementsByTagName:

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

就是这样。inputs.length将始终获得表单中输入的实际计数。这是因为getElementsByTagName()返回一个NodeList对象，其中包含匹配元素的实时视图。这个对象是可变的；它将响应DOM突变而改变。

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

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

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

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

然后你可以像那样计算

var getSumOfElements = function() {
    var Elements = $('.ElementToCount')
    var sum=0
    if (Elements && Elements.length>0) {
        for (var i=0; i<Elements.length; i++) {
           sum += Elements[i].val();
        }
    }
    return sum
}

要更新字段，您可以注册到"更改"-事件

$('.ElementToCount).on('change', function() {
    $('#finalResult').val(getSumOfElements());
})
相关文章：