How to get the input value all 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>

how to get all the input value and then add them all then give it to a variable. if in jquery,i know how to do.

var length = $('liste_couleur_qty li input').length;
var input = $('liste_couleur_qty li input').val;
for(var i=0;i< length;i++){
  var result += input;
}

the result will get all the value all.but my code still can't work.what's wrong with my jquery code? if i not want to use jquery only use javascript. how do i do?

Community · Accepted Answer · 2017-05-23 11:56:11Z

2

This should work with jQuery:

var result = "";
$('liste_couleur_qty li input').each(function() {
   result += $(this).val();
});

First: jQuery.val is not a property, but a method. Second: it will return value of first element in result set, not all values. Third: in your for loop - I can't even guess what are you trying to do. You are always using the same value length times. Also, once you are trying to get numerical value, you should use parseInt/parseFloat methods as mentioned by undefined

edited May 23, 2017 at 11:56

CommunityBot

11 silver badge

answered Nov 18, 2012 at 13:15

Viktor S.

12.8k1 gold badge30 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bruno Over a year ago

You need to declare result outside of the function result = 0 otherwise result will concatenate the value "undefined" with the first $(this).val()

Ram · Accepted Answer · 2012-11-18 13:17:51Z

2

Your selector selects nothing, you have missed the . for the class selector, also val is a method not a property, you can use each method and parseInt function:

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

answered Nov 18, 2012 at 13:17

Ram

145k16 gold badges174 silver badges201 bronze badges

Comments

score 2 · Accepted Answer · 2012-11-18 13:24:52Z

2

var result = 0;
$('.liste_couleur_qty li input').each(function(){
    result += $(this).val();
});
console.log(result);

This is not entirely accurate. As @undefined has pointed out, you need to use parseInt to get perform numeric addition instead of concatenation. That is:

result += parseInt($(this).val());

edited Nov 18, 2012 at 13:24

answered Nov 18, 2012 at 13:16

user1726343

Comments

Mario S · Accepted Answer · 2012-11-18 15:01:28Z

0

var length = $('liste_couleur_qty li input').length;
var input = $('liste_couleur_qty li input').val();
for(var i=0;i< length;i++){
  var result += input;
}

edited Nov 18, 2012 at 15:01

Mario S

12k24 gold badges42 silver badges47 bronze badges

answered Nov 18, 2012 at 13:16

atredis

3822 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to get the input value all and make an addition

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related