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

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的验证检查两个输入端只有在接收数字（作品）。但是，如何设置它，以便当用户在这些输入中输入内容并按下“选项卡”时，来自“item_1”和“item_2”的输入被添加在一起，然后显示在#message内部？

Answer 1

$('#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 2

只有在按下标签，或者当字段失去焦点？这是每一个情况：

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

你可能需要添加一个检查，有在这两个领域的值，否则，你可能最终为NaN。

Answer 3

也许这样的事情应该工作。

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

这里是link。

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

Answer 4

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

http://jsfiddle.net/CBHBT/

Answer 5

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

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

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); 
    } 
});