Javascript从表单输入计算输入数字

Question

我正在尝试创建一个 javascript 来计算从输入字段生成的 4 个金额的总和。

问题是，我希望总发票值(value)在用户输入费率 1 并显示金额 1 后开始反射(reflect)值(value)。但直到所有 4 个金额都生成后才会发生。只有在我在费率 4 中输入金额后，发票总值(value)才会反射(reflect)出来。

我现在使用的完整代码是:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form name="register" id="myForm" enctype="multipart/form-data" action="register" method="POST">

Qty 1:<input type="number" step="any" name="Qty1" autocomplete="off" id="Qty1" required><br>
Rate 1:<input type="number" step="any" name="Rate1" autocomplete="off" id="Rate1" class="rate" required><br>
Amount 1:<input readonly type="number" step="any" name="Amt1" autocomplete="off" id="Amt1" required><br><br>

Qty 2:<input type="number" step="any" name="Qty2" autocomplete="off" id="Qty2" required><br>
Rate 2:<input type="number" step="any" name="Rate2" autocomplete="off" id="Rate2" class="rate" required><br>
Amount 2:<input readonly type="number" step="any" name="Amt2" autocomplete="off" id="Amt2" required><br><br>

Qty 3:<input type="number" step="any" name="Qty3" autocomplete="off" id="Qty3" required><br>
Rate 3:<input type="number" step="any" name="Rate3" autocomplete="off" id="Rate3" class="rate" required><br>
Amount 3:<input readonly type="number" step="any" name="Amt3" autocomplete="off" id="Amt3" required><br><br>

Qty 4:<input type="number" step="any" name="Qty4" autocomplete="off" id="Qty4" required><br>
Rate 4:<input type="number" step="any" name="Rate4" autocomplete="off" id="Rate4"  required><br>
Amount 4:<input readonly type="number" step="any" name="Amt4" autocomplete="off" id="Amt4" required><br><br>

Total Invoice Value:<input readonly type="number" step="any" name="TotalInvoiceValue" id="TotalInvoiceValue" pattern=".{1,}" autocomplete="off" required><br>

</form>

<script>
    $('#Rate1').keyup(function(){
        var Qty1;
        var Rate1;
        textone = parseFloat($('#Qty1').val());
        texttwo = parseFloat($('#Rate1').val());
        var result = textone * texttwo;
        $('#Amt1').val(result.toFixed(2));


    });

    $('#Rate2').keyup(function(){
        var Qty2;
        var Rate2;
        textone = parseFloat($('#Qty2').val());
        texttwo = parseFloat($('#Rate2').val());
        var result = textone * texttwo;
        $('#Amt2').val(result.toFixed(2));


    });
    $('#Rate3').keyup(function(){
        var Qty3;
        var Rate3;
        textone = parseFloat($('#Qty3').val());
        texttwo = parseFloat($('#Rate3').val());
        var result = textone * texttwo;
        $('#Amt3').val(result.toFixed(2));


    });
        $('#Rate4').keyup(function(){
        var Qty4;
        var Rate4;
        textone = parseFloat($('#Qty4').val());
        texttwo = parseFloat($('#Rate4').val());
        var result = textone * texttwo;
        $('#Amt4').val(result.toFixed(2));


    });

    $('#Rate4').keyup(function(){
        var Amt1;
        var Amt2;
        var Amt3;
        var Amt4;
        textone = parseFloat($('#Amt1').val());
        texttwo = parseFloat($('#Amt2').val());
        textthree = parseFloat($('#Amt3').val());
        textfour = parseFloat($('#Amt4').val());
        var result = textone + texttwo + textthree + textfour;
        $('#TotalInvoiceValue').val(result.toFixed(2));


    });
</script>

我试图通过在 #TotalInvoiceValue 函数中添加多个元素名称来让 javascript 开始从费率 1 本身获取总计，如下所示:

$('#Rate1, #Rate2, #Rate3, #Rate4').keyup(function(){
    var Amt1;
    var Amt2;
    var Amt3;
    var Amt4;
    textone = parseFloat($('#Amt1').val());
    texttwo = parseFloat($('#Amt2').val());
    textthree = parseFloat($('#Amt3').val());
    textfour = parseFloat($('#Amt4').val());
    var result = textone + texttwo + textthree + textfour;
    $('#TotalInvoiceValue').val(result.toFixed(2));


});

但是还是不行。

我还尝试将相同的类分配给所有 Rate 输入，如下所示:

html

<input id="Rate1" class="rate" type="text">
<input id="Rate2" class="rate" type="text">
<input id="Rate3" class="rate" type="text">
<input id="Rate4" class="rate" type="text">

JavaScript

$('.rate').on('keyup', function() {
  let result = 0;
  $('.rate').each(function() { result += parseFloat(this.value); });
  $('#TotalInvoiceValue').val(result.toFixed(2));
})

即使这对我也不起作用。请帮忙。

Answer 1

在演示中使用了以下内容:

• HTMLFormControlsCollection API

• <input type="number">

• <output></output>

• oninput On-event Property

• Event Delegation

注意:这是纯 JavaScript。

如果每个输入和输出元素都有一个初始值:

<input id="N0" type="number" value="0">

...

<input id="N*" type="number" value="0">

<output id="T0">0</output>

然后这样的表达式将始终显示为数字，如果您的事件处理程序监听具有立即 react 的事件(例如 input 、 keypress 等)，这很重要:

 T0.value = N0.valueAsNumber + N1.valueAsNumber + ...N(N).valueAsNumber

即使用户使用的唯一输入是 N0当时，N1周四N(N)仍包含在表达式中，因为它们以 value="0" 开头.

---

演示

---

var sum = document.forms.sum;

var f = sum.elements;
var n0 = f.N0;
var n1 = f.N1;
var n2 = f.N2;
var n3 = f.N3;
var t0 = f.T0;

sum.oninput = add;

function add(e) {
  if (e.target.className === "N") {
    t0.value = n0.valueAsNumber + n1.valueAsNumber + n2.valueAsNumber + n3.valueAsNumber;
  } else {
    return false;
  }
  return false;
}

input {
  font: inherit;
  display: block;
  width: 6ch
}

<form id='sum'>

  <input id='N0' type='number' class='N' value='0'>
  <input id='N1' type='number' class='N' value='0'>
  <input id='N2' type='number' class='N' value='0'>
  <input id='N3' type='number' class='N' value='0'>

  <output id='T0'>0</output>

</form>