[英]get all the input value and make an addition
<ul class="liste_couleur_qty">
<li style="margin-bottom: 20px;">
<dl>
<table width="200" border="0">
<tbody><tr>
<td width="50%">
<span style="display: block; font-size: 13px; line-height: 16px; margin-bottom: 2px;margin-right: 0px;margin-left: 20px;">Noir</span>
</td>
<td width="50%"><div class="add-to-cart">
<label for="qty-2195">qty :</label>
<input type="text" class="input-text qty calcul_qty_product" title="Qté" value="0" autocomplete="off" maxlength="5" data-product_color="127" id="qty-2195" name="qty-2195" onblur="addToCartPlus(2195, 127, this);">
</div></td>
</tr>
</tbody></table>
</dl>
</li>
<li style="margin-bottom: 20px;">
<dl>
<table width="200" border="0">
<tbody><tr>
<td width="50%">
<span style="display: block; font-size: 13px; line-height: 16px; margin-bottom: 2px;margin-right: 0px;margin-left: 20px;">Blanc</span>
</td>
<td width="50%"><div class="add-to-cart">
<label for="qty-2196">qty :</label>
<input type="text" class="input-text qty calcul_qty_product" title="Qté" value="0" autocomplete="off" maxlength="5" id="qty-2196" name="qty-2196" onblur="addToCartPlus();">
</div></td>
</tr>
</tbody></table>
</dl>
</li>
<li style="margin-bottom: 20px;">
<dl>
<table width="200" border="0">
<tbody><tr>
<td width="50%">
<span style="display: block; font-size: 13px; line-height: 16px; margin-bottom: 2px;margin-right: 0px;margin-left: 20px;">Blanc</span>
</td>
<td width="50%"><div class="add-to-cart">
<label for="qty-2196">qty :</label>
<input type="text" class="input-text qty calcul_qty_product" title="Qté" value="0" autocomplete="off" maxlength="5" id="qty-2196" name="qty-2196" onblur="addToCartPlus();">
</div></td>
</tr>
</tbody></table>
</dl>
</li>
</ul>
<div id="qtyvalue"><div>
我想要做:
當輸入值更改時動態更改div(qtyvalue)的內容? 如果有更多輸入文本值,將它們加在一起然后在div(qtyvalue) 中顯示數字。 我使用以下代碼。
input.onkeyup = function() {
var result = 0;
$('.liste_couleur_qty li input').each(function(){
result += parseInt(this.value, 10);
});
document.getElementById('qtyvalue').innerHTML = result.value;
}
但是代碼不起作用,如果有兩個或多個輸入文本框,我不知道如何循環輸入。 謝謝你。
你想要的是這個:
$(document).ready(function() { //wrap in a document.ready event handler
$('input').on('keyup', function() { //bind using jQuery
var result = 0;
$('.liste_couleur_qty li input').each(function() {
result += parseInt(this.value, 10);
});
$('div#qtyvalue').text(result); //result.value doesn't exist, use result.
});
});
這是一個演示: http : //jsfiddle.net/jeRdA/
UDPATE:
要允許用戶將任何輸入的值更改為''
(例如,空白或空)或非數字值,請修改以下行:
result += parseInt(this.value, 10);
到:
result += parseFloat(this.value, 10) || 0;
更新小提琴: http : //jsfiddle.net/jeRdA/3/
嘗試這個:
var $inputs = $('.liste_couleur_qty li input');
$inputs.keyup(function() {
var result = 0;
$inputs.each(function(){
result += parseInt(this.value, 10);
});
$('#qtyvalue').html(result);
});
這需要在文檔就緒處理程序中或在相關元素之后的腳本塊中(許多人將他們的腳本放在正文的末尾)。
在您的代碼中, input.onkeyup = ...
不起作用,因為沒有變量input
(它不會自動獲取所有輸入元素),並且使用someElement.onkeyup =
只允許您將處理程序附加到一個元素一次。 使用 jQuery 來綁定 keyup 處理程序。 此外,要在最后使用總數,只需使用result
,使用result.value
將不起作用。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.