Question

我有两个表单字段，让我们称它们为分子和分母。我希望每次更改其中一个值时自动更新第三个字段（总计）（在提交表单时，它已在数据库中正确计算）。我可以使用jQuery很好地获取字段的值，但它们似乎与页面加载时保持一致，因此没有任何更新。作为参考，这是我的代码（显然警报框最终会填充一个新字段）。我不想为此使用AJAX。

  $('#id_num, #id_den').on("change", function() {
     var total = $('#id_num').attr("value") / $('#id_den').attr("value");
     alert(total);     
  });

Answer 1

对于<input>元素，以下内容有助于我提醒显示除法操作的正确结果。 .val()而非attr("value")

  $('#id_num, #id_den').on("change", function() {
    var total = $('#id_num').val() / $('#id_den').val();
    alert(total);     
  });

Answer 2

attr("value")仅适用于1.9之前的jQuery版本，例如1.5.1 - 1.8.1

但是，无论您使用的是哪种jQuery版本，都应该始终使用val()

$('#id_num, #id_den').on("change", function() {
    var total = $('#id_num').val() / $('#id_den').val();
    if(isNaN(total)){
        /* invalid inputs */
    }
    else if(!isFinite(total)){
        /* devided by 0 */
    }
    else { alert(total); }
});

您还可以keyup替代change，以提高网站的响应速度。

如何使用jQuery动态计算表单字段？

2 个答案: