如何添加輸入字段的值並用jQuery中的結果更新另一個字段？

序言：我更喜歡PHP/MySQL的人，剛開始涉足javascript/jQuery，所以請原諒這個愚蠢的新手問題。無法從Docs中找出它。如何添加輸入字段的值並用jQuery中的結果更新另一個字段？

我有一個沒有提交按鈕的表單。目標是允許用戶將值輸入到多個表單字段中，並使用jQuery將它們整合到div的底部。形式有點看起來像這樣，但更漂亮：

<form> 
Enter Value: <input class="addme" type="text" name="field1" size="1"> 
Enter Value: <input class="addme" type="text" name="field2" size="1"> 
Enter Value: <input class="addme" type="text" name="field3" size="1"> 
etc..... 
<div>Result:<span id="result"></span></div> 
</form>

是否可以添加這些？如果是這樣，任何時候其中一個輸入欄會發生變化，它是否可以完成？

謝謝。

UPDATE： 布賴恩發佈了酷協作沙箱，所以我編輯的代碼看起來更像是我已經和它在這裏： http://jsbin.com/orequ/ 編輯去這裏： http://jsbin.com/orequ/edit

來源

2009-10-04 joedevon

他們是整數還是可以是任何東西？ – karim79 2009-10-04 16:13:54

用戶應該輸入整數......如果他不這樣做，我希望它被忽略。 – joedevon 2009-10-04 16:22:32

感謝大家。這是我得到的最好和最快的迴應！ – joedevon 2009-10-04 16:56:11

在</form>標籤後面應該這樣做：

<script> 
    function displayTotal() { 
    var sum = 0 

    var values = $('.addme').each(function(){ 
     sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value); 
    }); 

    $('#result').text(sum); 
    } 
    $('.addme').keyup(displayTotal); 
</script>

這裏有一個演示：http://jsbin.com/iboqo（通過http://jsbin.com/iboqo/edit編輯）

來源

2009-10-04 16:06:27 brianpeiris

謝謝...你的演示完全符合我給你的代碼，但是當我添加我的實際代碼時，它不起作用。它只是說NaN（Alex的回答也是這樣，如果我跳過它）......也許是因爲真正的形式是在一張桌子上？或者因爲我並沒有真正的跨度？我將在沙箱中多玩一些（非常酷的btw）。 – joedevon 2009-10-04 16:17:21

這可能是因爲你的一些領域是空的。它添加到NaN，因爲parseInt（x）=== NaN如果x是空字符串或包含非整數字符的字符串。（請參閱https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Functions/parseInt）。我編輯了我的答案以糾正空白或非數字值 – brianpeiris 2009-10-04 16:29:41

好的，我會在一秒鐘內檢查你的和Russ Cam's。這裏是我的更新示例，以防萬一你錯過我的更新問題： http://jsbin.com/orequ/ – joedevon 2009-10-04 16:36:48

試試這個：

$(".addme").bind("change",function(){ 
    var _sum = 0; 

    $(".addme").each(function(i){ 
     _sum += parseInt($(this).val()); 
    }); 

    $("#result").val(_sum); 
});

來源

2009-10-04 15:50:27

謝謝...它不是更新跨度，但... – joedevon 2009-10-04 16:01:01

$（「＃result」）。text（_sum）; – 2009-10-04 16:05:06

也嘗試過，讓NaN成爲更新。 – joedevon 2009-10-04 16:18:01

任何非數字或空值將在計算中忽略不計（他們會得到一個零值，因此不會影響總和）。

function sumValues() { 
    var sum = 0; 

    $("input.addme").each(function(){ 
     var $this = $(this); 
     var amount = parseInt($this.val(), 10); 
     sum += amount === "" || isNaN(amount)? 0 : amount; 
    }); 

    $("#result").text(sum); 
} 

$(function() { 

    sumValues(); 

    $("input.addme").keyup(function(){ 
    sumValues(); 
    }); 

});

Working Demo

來源

2009-10-04 16:24:24

我相信你的作品也是如此，但是因爲Brian的確也沒有檢查。投票給你。謝謝您的幫助！ – joedevon 2009-10-04 16:39:31

(function(){ 
    var context = $("form"), elements = $("input.addme", context); 
    function getSum(elements) { 
     var sum = 0; 
     $(elements, context).each(function() { 
      var v = parseInt(this.value); 
      v === parseInt(v,10) ? sum += v : sum = sum; 
     }) 
     return sum; 
    } 
    $(elements).bind("keyup", function() { 
     $("#result").text(getSum(elements)); 
    }); 
})();

孤立的範圍和背景中，包括處理非整數值，功能getSum而應返回不是做一些事情本身就是一種價值。

來源

2009-10-04 16:38:04 wildcard

http://jsbin.com/ocedi/ – wildcard 2009-10-04 16:46:30

如何添加輸入字段的值並用jQuery中的結果更新另一個字段？

回答

相關問題