计算表单输入onChange
[英]Calculate form inputs onChange
问题描述
我有一个基于用户添加到购物车中的动态表格。
例如，表单看起来像这样，
<!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>
但是那些输入字段是自动生成的，并且可能少于或少于5个字段。
如何在不刷新页面的情况下计算输入的SUM值并输出到SUM div？
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);
});
要么
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); });
解决方案2
0 2014-03-13 15:49:03
您可以使用表单的onsubmit属性在提交表单之前执行任何操作。 您也可以更改action属性。 你也可以preventDefault为这里-说
解决方案3
0 2014-03-13 15:49:12
您可以为元素提供一个类， 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) );
});
在这段代码中，我提供了selector作为输入。 这很奢侈，不需要，您可以在函数中添加该选择器，但是这样可以更灵活地使用它。 您可以在此处使用[name^=*]选择器，但它比类慢，您可能会在大型文档中注意到它。
另外，在我的代码中，我检查它是否没有值以防止错误。 您可以扩展它以测试输入是否确实是数字。
无法使用 onChange 在 React.js 表单中获取自动完成的输入
[英]Can't get autocompleted inputs in React.js form with onChange
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.