get all the input value and make an addition

Question

    <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>

i want to do:

change the content of a div(qtyvalue) dynamically when the input value changes? if there are more input text vaule, add them together then shows the number in the div(qtyvalue). i using the following code.

input.onkeyup = function() {
var result = 0;
$('.liste_couleur_qty li input').each(function(){
     result += parseInt(this.value, 10);
});
    document.getElementById('qtyvalue').innerHTML = result.value;    
}

but the code doesn't work, i don't know how to loop the input,if there are two or many input text box. thank you.

pete · Accepted Answer · 2012-11-24T14:33:15.963

1

What you want is this:

$(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.
    });
});

Here's a demo: http://jsfiddle.net/jeRdA/

UDPATE:

To allow for users changing the value of any of the inputs to ''(e.g., blank, or empty) or a non-numeric value, modify the line:

result += parseInt(this.value, 10);

to:

result += parseFloat(this.value, 10) || 0;

Updated fiddle: http://jsfiddle.net/jeRdA/3/

edited Nov 24 '12 at 14:33

answered Nov 21 '12 at 04:13

pete

24,141
4
37
51

there is a little thing, if you fill the second input, it will show NaN.when you remove the default 0, how to improve it.thank you – stackoverflow002 Nov 24 '12 at 07:53
@stackoverflow002: Updated answer and fiddle. – pete Nov 24 '12 at 14:33

score 1 · Answer 2 · answered Nov 21 '12 at 04:14

Try this:

var $inputs = $('.liste_couleur_qty li input');
$inputs.keyup(function() {
   var result = 0;
   $inputs.each(function(){
     result += parseInt(this.value, 10);
   });
   $('#qtyvalue').html(result);    
});

This would need to be in a document ready handler or in a script block after the elements in question (many people put their scripts at the end of the body).

In your code, input.onkeyup = ... wouldn't work because there is no variable input (it doesn't automatically pick up all input elements), and also using someElement.onkeyup = only lets you attach a handler to one element at a time. Use jQuery to bind the keyup handler instead. Also, to use the total at the end just use result, using result.value wouldn't work.

there is a little thing, if you fill the second input, it will show NaN.when you remove the default 0, how to improve it.thank you — stackoverflow002, Nov 24 '12 at 07:54
If you do `result += parseInt(this.value, 10) || 0;` (the `|| 0` part is what is different to what's in my answer) it should ignore any non-numeric values entered. — nnnnnn, Nov 24 '12 at 08:52

get all the input value and make an addition

2 Answers2

Linked