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