Question

我有一个包含两个输入字段和一个显示文本div的表单：

<div id="message">Display message Here</div>
<form id="logged_in" action="" method="post">
   <label>Item 1</label>
   <input id="item_1" type="text" />
   <label>Item 2</label>
   <input id="item_2" type="text" />
</form>

到目前为止，我正在使用jQuery validate来检查两个输入是否只接收数字（有效）。但是如何设置它以便当用户在这些输入中输入输入并按下“tab”时，“item_1”和“item_2”的输入被加在一起，然后显示在#message中？

Answer 1

仅在按Tab键或字段失去焦点时？这适用于所有情况：

$( function() {
    $( '#item_1, #item_2' ).blur( function() {
        $( '#message' ).html( parseInt( $( '#item_1' ).val() ) + parseInt( $( '#item_2' ).val() ) );
    } );
} );

您可能需要添加一个检查，指出两个字段都有值，否则您最终可能会使用NaN。

Answer 2

$('#item_1, #item_2').blur(function(){
    var item_1 = $('#item_1').val(),
        item_1 = item_1.length ? parseInt(item_1) : 0,
        item_2 = $('#item_2').val(),
        item_2 = item_2.length ? parseInt(item_2) : 0;
    $('#message').text(item_1+item_2);
});

Here is a demo

Answer 3

$('#item_2').blur(function(){
    $('#message').html(
        parseInt($('#item_1').val()) + parseInt($('#item_2').val())
    );
});

http://jsfiddle.net/Jacek_FH/QKbXV/

Answer 4

可能这样的事情应该有用。

$(document).ready(function(){
  $("input").change(function(){
    sum = 0;
    $("input").each(function(){
      sum += $(this).val();
    });
    $("#message").html("The sum is: " + sum);
  });
});

这是link。

这也适用于任何数量的输入。

Answer 5

您可以对输入的obBlur事件执行函数以验证是否已输入两个值，如果是，则执行添加和更新消息元素内容。

http://jsfiddle.net/CBHBT/

Answer 6

虽然您可以使用Tab的键事件专门定位它，但您的用户可能会使用不同的方法来失去焦点，这就是为什么.blur（）将是更好的方法。

这个解决方案适用于某些浏览器中的parseInt错误，如果不加以考虑可能会非常烦人：

$('#item_1, #item_2').blur(function () {
    var i1 = parseFloat($("#item_1").val());
    var i2 = parseFloat($("#item_2").val());
    if(!isNaN(i1) && !isNaN(i2)){
        var r = parseFloat(i1+i2);
        $("#message").html(r);
    }
});

使用jQuery验证添加两个输入的总数？

6 个答案: