Question

我的页面显示了一些从数据库加载内容的表单。每一行都会得到他自己的<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，匹配页面上的字段。所有字段都命名为＆＃34; Amount＆＃34; +号码。如果此数字等于字段数，则该函数将停止。通过这种方式，剧本不会寻找不会激动的字段。

然后它获取此字段的值并将值添加到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>

这没有做任何事情。它没有改变价值。出了什么问题？

Answer 1

简单说明：

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

Answer 2

假设所有字段在Amount属性的开头都有id，您可以使用jQuery的ID选择器来实现此目的，而无需任何内部字段柜台等。

我不完全确定为什么你需要挂钩mousemove事件，因为数据永远不会在页面上发生变化（因为当页面是第一个时它是由PHP生成的）加载）。以下代码应该实现您正在寻找的内容：

$(function() {

    var total = 0;

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

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

});

Answer 3

如果您能够更改生成的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
}

要更新字段，您可以注册到'change'-Event

$('.ElementToCount).on('change', function() {
    $('#finalResult').val(getSumOfElements());
})

Answer 4

您的代码有错误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/

Answer 5

你不需要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; 
}

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

5 个答案: