如何添加输入字段的值并用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中的结果更新另一个字段？

回答

相关问题