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

时间：2018-05-20 14:22:44

标签： javascript

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

问题是，我希望总发票金额在用户输入费率1和金额1显示后开始反映该值。但直到所有4个金额都已生成才会发生。总发票金额仅在我以比率4输入金额后才会反映。

我现在正在使用的完整代码是：

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

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

3 个答案:

答案 0 :(得分：1)

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

注意：这是纯JavaScript。

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

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

...

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

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

然后这样的表达式将始终显示为一个数字，如果您的事件处理程序侦听具有即时反应的事件（例如input，keypress等），则该数字很重要：

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

即使用户当前使用的唯一输入是N0，N1 thu N(N)仍然包含在表达式中，因为它们始于value="0"。

演示

＆＃13;
＆＃13; 
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;
}
＆＃13; 
input {
  font: inherit;
  display: block;
  width: 6ch
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

JSFiddle示例

https://jsfiddle.net/o2gxgz9r/47359/

<强> HTML 

<div>
    Value 1: <input class="val" id="val1">
    <br/>
    Value 2: <input class="val" id="val2">
    <br/>
    Value 3: <input class="val" id="val3">
    <br/>
    Value 4: <input class="val" id="val4">
    <br/>
    Result: <input class="result">
</div>

<强> JS 

$(document).ready(function() {
  var handleChange = function() {
    var result = 0;
    var setResult = true;

    $(".val").each(function(){
        if($(this).val() > 0) {      
        result += parseInt($(this).val());
      } else {
        setResult = false;
      }
    })
    $(".result").val(setResult ? result : '');
  };


  $(".val").change(handleChange);
});

答案 2 :(得分：0)

感谢您的所有答案。使用您的建议，这就是我的问题得到解决的方法：

HTML：

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

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

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

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

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

JAVASCRIPT：

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


    });

$('.rate').on('keyup', function() {
    var result = 0;
    var setResult = true;
  $('.amt').each(function() {
if($(this).val() > 0) { 
result += parseFloat(this.value);
}
});
  $('#TotalInvoiceValue').val(result.toFixed(2));
});
相关问题
最新问题