自动计算返回未定义

时间:2017-06-10 06:01:40

标签: javascript jquery

我有Qnt,单价和总价格输入字段。我还编写了一个用于自动计算的jQuery代码。

Html -

<input class="form-control qnt" min="0" step="any" type="number" name="qnt" placeholder="Quantity" required>
<input class="form-control unit_price" type="number" min="0" step="any" name="unit_price" placeholder="Unit Price" required>
<input class="form-control total_price" type="number" name="total_price" placeholder="Total Price" value="" readonly>

JQuery -

$('table.table').change('input', function () {
    var Qnt = $('.qnt').val();
    var UnitPrice = $('.unit_price').val();
    var totalPrice = parseInt(Qnt) * parseInt(UnitPrice);
    $('.total_price').val(totalPrice); // Result Print
});

此代码计算正常,但问题是,如果我尝试捕获总价值($('.total_price').val();),则返回未定义。在我控制台后,totalPrice首次返回 null null ,然后返回结果。

enter image description here

谁能告诉我我做错了什么?在此先感谢。

注意:我的表字段是使用Ajax自动创建的。抱歉,我之前没有暗示。

4 个答案:

答案 0 :(得分:3)

您应该将目标更改为输入而不是类,如下所示,并且当第一次输入的更改事件触发时,将提供NaN输出,因为此时其他输入将为空,只需检查NaN(不是一个数字应该足够了,你不应该依赖一个bootstrap类,因为,如果以后你移动到其他框架,你需要更改类名,脚本将停止工作,所以,无论是目标直接输入代码,或添加您自己的定制类以进行定位

$('.form-control').change('input', function() {
  var Qnt = $('.qnt').val(),
  UnitPrice = $('.unit_price').val(),
  totalPrice = parseInt(Qnt) * parseInt(UnitPrice);
  (!isNaN(totalPrice)) ?  $('.total_price').empty().val(totalPrice): '';
});

这是fiddle

答案 1 :(得分:2)

你可以做这个简单的伎俩。如果输入有值,则验证输入,否则将被视为零(0)。在这个例子中,我们添加一个IF语句来验证第二个输入。

$('.form-control').on('change', function(){
        var qnt = $('.qnt').val();   
        var unit_price = $('.unit_price').val();    
        if(unit_price > 0){
            unit_price = unit_price;
           }else {
               unit_price = 0;
           }
        var total = parseInt(qnt) * parseInt(unit_price);
        $('.total_price').empty().val(total);

    });

答案 2 :(得分:1)

更改功能选择器错误。在使用

添加之前,.from-control和空总价格

$('.form-control').change('input', function() {
  var Qnt = $('.qnt').val();
  var UnitPrice = $('.unit_price').val();
  var totalPrice = parseInt(Qnt) * parseInt(UnitPrice);
  $('.total_price').empty().val(totalPrice); // Result Print
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="form-control qnt" min="0" step="any" type="number" name="qnt" placeholder="Quantity" required>
<input class="form-control unit_price" type="number" min="0" step="any" name="unit_price" placeholder="Unit Price" required>
<input class="form-control total_price" type="number" name="total_price" placeholder="Total Price" value="" readonly>

答案 3 :(得分:0)

谢谢大家的帮助。我已经解决了我的问题。我只是为单个表行创建自动自定义ID,它运行正常。

$('#cus1').change('input', function () {
    	var Qnt = $('.qnt').val();
    	var UnitPrice = $('.unit_price').val();
    	var totalPrice = parseInt(Qnt) * parseInt(UnitPrice);
    	$('.total_price').val(totalPrice); // Result Print
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cus1">
<input class="form-control qnt" min="0" step="any" type="number" name="qnt" placeholder="Quantity" required>
<input class="form-control unit_price" type="number" min="0" step="any" name="unit_price" placeholder="Unit Price" required>
<input class="form-control total_price" type="number" name="total_price" placeholder="Total Price" value="" readonly>
</div>