Add two dynamic values using jQuery

Question

I have written a jquery script. It concatenates instead of adding two values

$(document).on('click','.woocommerce-checkout-review-order input[type="submit"]', function(){
   var sum = '';
   $('.checkout_ilm select').each(function(){
      if(jQuery(this).val()!=''){
         sum += Number(jQuery(this).val());  // Or this.innerHTML, this.innerText
      }
   });
   alert(sum);
});

When the values in all the select fields is zero then it concatenates the value instead of adding it. So in this case it gives 00 instead of 0 as a result. I have used parseInt and parseFloat also both working but this conditions returns true with parseInt and parseFloat even sum is equal to zero and ilm_selected has also value zero.

if(sum < ilm_selected || sum==''){
   //some code
}

Please help, Thanks in advance.

you should not use parseInt(). Check my answer for more info. — Nikhil G
– Nikhil G, Commented Aug 25, 2017 at 6:27
Change your var sum = ''; to var sum = 0;. This should work for you. — Hassan Imam
– Hassan Imam, Commented Aug 25, 2017 at 6:36

chirag satapara · Accepted Answer · 2017-08-25 06:40:20Z

2

I just replace Number with parseInt, try this solution this will help you.

Refer this link for more information:click here

jQuery(document).on('click','.woocommerce-checkout-review-order input[type="submit"]', function(){
    var sum = 0;
    jQuery('.checkout_ilm select').each(function(){
             if(jQuery(this).val()!=''){
             sum += parseInt(jQuery(this).val()); 
        }
    });

    alert(sum);
});

edited Aug 25, 2017 at 6:40

answered Aug 25, 2017 at 6:20

chirag satapara

1,9471 gold badge15 silver badges26 bronze badges

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

Comments

bellabelle · Accepted Answer · 2017-08-25 06:22:27Z

1

You have to use parseInt(). The parseInt() function parses a string and returns an integer.

sum += parseInt(jQuery(this).val());  // Or this.innerHTML, this.innerText

answered Aug 25, 2017 at 6:22

bellabelle

9267 silver badges13 bronze badges

Comments

Shiladitya · Accepted Answer · 2017-08-25 06:37:58Z

1

Try this -

jQuery(document).on('click','.woocommerce-checkout-review-order input[type="submit"]', function(){
  var sum = 0;
  jQuery('.checkout_ilm select').each(function(){
    if(jQuery(this).val()!=''){
      sum += parseFloat(jQuery(this).val());
    }
  });
  console.log("Sum: ", sum);
});

You can use parseInt() too, but if your value contains decimal for example 20.50 than it will not work, so it is better to go for parseFloat().

edited Aug 25, 2017 at 6:37

Shiladitya

12.2k17 gold badges29 silver badges43 bronze badges

answered Aug 25, 2017 at 6:20

Nikhil G

2,50617 silver badges20 bronze badges

Comments

Hassan Imam · Accepted Answer · 2017-08-25 06:42:30Z

You have to change var sum = ''; to var sum = 0;.

This will help you in getting the sum of all the select box.

Your earlier code was concatenating value of select box which you converted into number to string as sum was initialised to ''.

Working Demo

$(document).on('click','input[type="submit"]', function(){
  var sum = 0;
  $('select').each(function(){
      if($(this).val() !== ''){
        sum += Number($(this).val()); 
  }
});
console.log(sum);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="1">Volvo</option>
  <option value="20">Saab</option>
  <option value="34">Mercedes</option>
  <option value="7">Audi</option>
</select>
<select>
  <option value="1">Volvo</option>
  <option value="20">Saab</option>
  <option value="34">Mercedes</option>
  <option value="7">Audi</option>
</select>
<select>
  <option value="1">Volvo</option>
  <option value="20">Saab</option>
  <option value="34">Mercedes</option>
  <option value="7">Audi</option>
</select>

<input type="submit" value="Submit">

Collectives™ on Stack Overflow

Add two dynamic values using jQuery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related