Combining retrieved values with javascript and jquery

Question

Possible Duplicate:
How do I Convert a String into an Integer in JavaScript?

I have a select element that contains options for products. What I want to achieve is when they pick an option the price on the page automatically adjusts. I have figured out how to retrieve those values but when I combine them it just puts two numbers together instead of actually adding them.

For example instead of outputting 60 when I have 50 + 10 it outputs 5010.

My code:

$('.product_options').change(function(){
var base_price = $('#base_price').html();
var add_price = $(this).find("option:selected").data('price');

var new_price = base_price+add_price;

console.log(new_price);

$('.current_price').html(base_price+add_price);

});

Is there a way I can convert them both to integers so the operation actually goes through?

Thanks in advance!

You can use some tricks like multiplying by 1 to force a number cast or you can use parseInt() — TheZ, Nov 14 '12 at 21:07

score 5 · Answer 1 · answered Nov 14 '12 at 21:07

Use parseInt

$('.product_options').change(function(){
var base_price = parseInt($('#base_price').html(), 10); // 10 as second argument will make sure that base is 10.
var add_price = parseInt($(this).find("option:selected").data('price'), 10);

var new_price = base_price+add_price;

console.log(new_price);

$('.current_price').html(base_price+add_price);
});

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

1

Try:

var base_price = +$('#base_price').html();
var add_price = +$(this).find("option:selected").data('price');

See the mighty: Mozilla's Arithmetic Operators Reference - Unary Negation

edited Nov 14 '12 at 21:21

Billy Moon

57,113
24
136
237

answered Nov 14 '12 at 21:07

Matt Burland

44,552
18
99
171

I had no idea..! Does this work on all browsers? – Billy Moon Nov 14 '12 at 21:16
@BillyMoon: It's part of the EMCAScript specification. – Matt Burland Nov 14 '12 at 21:22

score 0 · Answer 3 · answered Nov 14 '12 at 21:08

Any values you pull out of the DOM are going to be strings, and need converting into number types before you can do mathematical operations with them.

parseInt( ... ) is a built in javascript function that converts a string into an integer, if the string consists of digits only.

If you need a decimal number, you can use parseFlaot.

var new_price = parseInt(base_price)+parseInt(add_price);
// new_price is now set to the sum of `base_price` and `add_price`

score 0 · Answer 4 · answered Nov 14 '12 at 21:09

Use parseFloat or parseInt

$('.product_options').change(function(){
  var base_price = $('#base_price').html();
  var add_price = $(this).find("option:selected").data('price');

  var new_price = parseFloat(base_price) + parseFloat(add_price);

  console.log(new_price);

  $('.current_price').html(base_price+add_price);
});

score 0 · Answer 5 · answered Nov 14 '12 at 21:10

0

Yes there is.

intval = parseInt(string)

is what you're looking for.

answered Nov 14 '12 at 21:10

Silvester

496
1
3
14

Combining retrieved values with javascript and jquery

5 Answers5