我遇到了一个问题,我有两个文本字段,在打开页面或reaload时默认都有一个值,我从MySQL和PHP获得的值,如下所示:
<input type="text" id="field1" value="<?php echo $first_value; ?>" />
<input type="text" id="utility" value="<?php echo $second_value; ?>" />
使用javascript,当我更改#field1
的值时,我想做减法并将结果显示为#utility
。
问题是操作的结果不正确,例如:
如果#field1
第一次是500,#utility
是1041.00,现在如果我把#field1
的值改为1000,#utility
的新值是-69.06,我想每次我删除或添加新数字时它都在做这个操作,但我不知道如何解决这个问题,这是我的javascript(jquery)代码:
$('#field1').on('input', function() {
var difference = parseFloat($(this).val());
var utility = $('#utility').val().replace(/,/g, '');
var total = utility - difference;
if (!total) { total = 0; }
$('#utility').val(parseFloat(Math.round(total * 100) / 100).toFixed(2));
});
在不添加额外字段的情况下,您的另一个选择是使用.on('blur',function(){} )
或仅使用.blur(function(){})
这将导致在输入离开字段强制刷新时执行操作。
我通过创建一个新的输入字段类型hidden
来解决我的问题,该字段的值与#utility
相同,我将其命名为#new_utilty
$('#field1').on('input', function() {
var difference = parseFloat($(this).val());
var utility = $('#new_utility').val().replace(/,/g, '');
var total = utility - difference;
if (!total) {
total = 0;
$('#utility').val(parseFloat(Math.round(utility * 100) / 100).toFixed(2));
} else {
$('#utility').val(parseFloat(Math.round(total * 100) / 100).toFixed(2));
}
});
这是我在没有Ajax调用的情况下的解决方案