计算表单输入onChange
[英]Calculate form inputs onChange
问题描述
I have a dynamic form that is being generated based on what the user adds to the cart. 
我有一个基于用户添加到购物车中的动态表格。
For example, the form will looks something like this, 例如，表单看起来像这样，
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Form</title>
</head>
<body>
<form action="" name="cart" id="cart">
<input type="text" name="sku1">
<input type="text" name="sku2">
<input type="text" name="sku3">
<input type="text" name="sku4">
<input type="text" name="sku5">
<div class="sum" id="sum"> Total: {SUM SHOULD SHOW UP HERE)</div>
<button name="submit">Send</button>
</form>
</body>
</html>
But those input fields are generated automatically and may be more or less than 5 fields. 但是那些输入字段是自动生成的，并且可能少于或少于5个字段。
How to calculate those input SUM value and output to SUM div without page refresh? 如何在不刷新页面的情况下计算输入的SUM值并输出到SUM div？
JavaScript/jQuery? JavaScript / jQuery？
3 个解决方案
解决方案1
3 已采纳 2014-03-13 15:49:17
$('button[name="submit"]').click(function () {
var sum = 0;
$('#cart input[name^="sku"]').each(function () {
var val = isNaN(+this.value) ? 0 : +this.value;
sum += val;
});
$('#sum').text(sum);
});
Or
要么
var inp = $('#cart input[name^="sku"]'); inp.change(function () { var sum = 0; inp.each(function () { var val = isNaN(+this.value) ? 0 : +this.value; sum += val; }); $('#sum').text(sum); });
Attribute Starts With Selector [name^="value"] 属性以选择器[name ^ =“ value”]开头
解决方案2
0 2014-03-13 15:49:03
You can use the onsubmit attribute of the form to do whatever you want to before the form gets submitted. 您可以使用表单的onsubmit属性在提交表单之前执行任何操作。 You can change action attribute also. 您也可以更改action属性。 You can also preventDefault as said here- 你也可以preventDefault为这里-说
jQuery on submit preventDefault() does not works 提交时的jQuery preventDefault（）不起作用
解决方案3
0 2014-03-13 15:49:12
You can give the elements a class, amountForTotal , and use a function to calc the total, which you can add to a button, or onchange event of an input. 您可以为元素提供一个类， amountForTotal ，并使用一个函数来计算总数，您可以将其添加到按钮或输入的onchange事件中。
function calcTotal( $elements ){
var total = 0;
$elements.each(function(){
// if the input has no value, add 0, if it has, add the value
total+= this.value.length===0 ? 0 : parseInt(this.value);
})
return total; // return the total
}
$elements = $('.amountForTotal'); // select them
// Bind an event to recalc the total
$elements.on('keyup', function(){
alert( calcTotal($elements) );
});
In this code I provided the selector as input. 在这段代码中，我提供了selector作为输入。 This is luxery, not needed, you can add that selector in the function, but this way it can be used more flexible. 这很奢侈，不需要，您可以在函数中添加该选择器，但是这样可以更灵活地使用它。 You can use the [name^=*] selector here, but its slower than a class, which you might notice in large documents. 您可以在此处使用[name^=*]选择器，但它比类慢，您可能会在大型文档中注意到它。
Also, In my code I check if it has to no value to prevent errors. 另外，在我的代码中，我检查它是否没有值以防止错误。 You can expand this to test if the input is actualy a number. 您可以扩展它以测试输入是否确实是数字。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.