計算表單輸入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.