我有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 ,然后返回结果。
谁能告诉我我做错了什么?在此先感谢。
注意:我的表字段是使用Ajax自动创建的。抱歉,我之前没有暗示。
答案 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>