Question

我想获取所有输入字段的总值

for ($j = 0; $j <= 4; $j++) { echo '

    <div class="form-group-sm" id="div_add_calc_aantal['.$j.']">
      <input type="number" min="0" step="1" class="form-control" id="add_calc_aantal['.$j.']" name="add_calc_aantal" value="" onchange="validate_edit(this, '.$j.')">
    </div>';

}

并将这些字段的总数放在

中

<input type="text" class="form-control" id="add_calc_totaal_aant" name="add_calc_totaal_aant" value="">

以下脚本没有响应/工作

<script type="text/javascript">
function calculatie(selectVeld, nr)
{
    // Absoluut aantal
    var i, totaal = 0;
    var elems = document.getElementById('add_calc_aantal['+nr+']').value;
    var l = elems.length;
    for(i=0; i<l; i++)
    {
        totaal += parseFloat(elems[i].value) || 0;
    }
        document.getElementById('add_calc_totaal_aant').value = totaal.toFixed( 0 );
}
</script>

有什么建议吗？

Answer 1

将类.add_calc_aantal添加到循环

for ($j = 0; $j <= 4; $j++) { echo '

    <div class="form-group-sm" id="div_add_calc_aantal['.$j.']">
      <input type="number" min="0" step="1" class="form-control add_calc_aantal" id="add_calc_aantal['.$j.']" name="add_calc_aantal" value="" onchange="validate_edit(this, '.$j.')">
    </div>';
    // ---------------------------------------------------------^
}

然后检查下面的示例

function calculatie() {
  // Absoluut aantal
  var totaal = 0;
  var elems = document.querySelectorAll('.add_calc_aantal'); // query new added class
  [].forEach.call(elems, function(e) {
    totaal += parseFloat(e.value) || 0;
  })
  document.getElementById('add_calc_totaal_aant').value = totaal.toFixed(0);
}
calculatie();

<!-- this html was added for demo purpose, actually its generated by your server -->
<div class="form-group-sm" id="div_add_calc_aantal[1]">
  <input type="number" min="0" step="1" class="form-control add_calc_aantal" name="add_calc_aantal" value="34" onchange="validate_edit(this, 1)">
</div>

<div class="form-group-sm" id="div_add_calc_aantal[2]">
  <input type="number" min="0" step="1" class="form-control add_calc_aantal" name="add_calc_aantal" value="45" onchange="validate_edit(this, 2)">
</div>

<div class="form-group-sm" id="div_add_calc_aantal[3]">
  <input type="number" min="0" step="1" class="form-control add_calc_aantal" name="add_calc_aantal" value="100" onchange="validate_edit(this, 3)">
</div>


<label for="add_calc_totaal_aant">totaal</label>
<input type="text" class="form-control" id="add_calc_totaal_aant" name="add_calc_totaal_aant" value="">

Answer 2

输入元素似乎具有相同的名称add_calc_aantal，可用于获取它们：

＆＃13;

function calculatie() {
  var elems = document.getElementsByName('add_calc_aantal'), i = elems.length, total = 0;
  while (i--) 
    total += elems[i].value | 0;
  document.getElementById('add_calc_totaal_aant').value = total.toFixed( 0 );
}

＆＃13;

<div onchange=calculatie()>
   <div> <input type=number min=0 step=1 name=add_calc_aantal> </div>
   <div> <input type=number min=0 step=1 name=add_calc_aantal> </div>
   <div> <input type=number min=0 step=1 name=add_calc_aantal> </div>
</div>

Total <input readonly id=add_calc_totaal_aant>

＆＃13;

Answer 3

两个小修正 - 见下面的评论：

function calculatie() {
    // Absoluut aantal
    var i, totaal = 0;
    var elems = document.getElementsByClassName('form-control'); // get a handle of the specific inputs - not the divs that surround them
    var l = elems.length;
    for(i=0; i<l; i++)
    {
        totaal += parseFloat(elems[i].value) || 0;
    }
    document.getElementById('add_calc_totaal_aant').value = totaal; // simply assign the value
}

为了运行这个功能，你应该添加一个可以调用它的元素，甚至可以点击：onclick=calculatie()，例如：

<button name="submit" label="submit" onclick=calculatie()>

输入字段的总值

3 个答案: