Problem Summary

I have been working on adding up various numbers in fields, based on the value of input boxes. I am currently experiencing the issue in which jQuery is concatenating the value arguments as they are strings and I have been unable to successfully convert them to integers.

Further Description

Here is an example of the HTML I am using:

<form action="" method="post">
 <input type="text" id="one" value="20.00" />
 <input type="text" id="two" value="10.00" />
 <a href="#" id="add">
  Add up fields
 </a>
 <input type="submit" value="Submit" />
</form>

Here is my jQuery (this behavior described above was to be expected with this script):

$(function(){
  var one = $('#one').val(),
      two = $('#two').val();

  $('#add').click(function(e){
    e.preventDefault;
    var three = one + two;
    alert(three);
  });
});

This resulted obviously in the output:

20.0010.00

So I tried modifying my first variable declarions with parseInt() like so:

var one = parseInt($('#one').val(),10),
    two = parseInt($('#two').val(),10);

Nowever that just resulted in:

NaN

so I tried first obtaining the values and then converting to integers:

var one = $('#one').val(),
    two = $('#two').val(),
    i_one = parseInt(one),
    i_two = parseInt(two);

But yet agan... NaN was the result of this.

I have also tried the above using parseFloat() which yielded the same unfortunate results.

I also tried (read somewhere on a blog) that adding + in front will force jQuery to treat the variables as integers so I did (see above for where i got one and two):

u_one = +one
u_two = +two

I am starting to think that obtaining values using val() prevents jQuery utilising them as anything other than strings... But I must be wrong.

Can you advise on how I can obtain these values in integer format so that I can have the result:

30.00

When the fields are added?

Preferebly whilst keeping the <input /> and not adding another hidden <span /> or something similar containing the number to which then I can run text() on.

Thanks for reading.

NOTE

It has e to light the problem was not related to jQuery and related to the template I was making use of. Code above works as pointed out in the ments below. I have accepted one as an answer however all jQuery examples posted will work.

Problem Summary

I have been working on adding up various numbers in fields, based on the value of input boxes. I am currently experiencing the issue in which jQuery is concatenating the value arguments as they are strings and I have been unable to successfully convert them to integers.

Further Description

Here is an example of the HTML I am using:

<form action="" method="post">
 <input type="text" id="one" value="20.00" />
 <input type="text" id="two" value="10.00" />
 <a href="#" id="add">
  Add up fields
 </a>
 <input type="submit" value="Submit" />
</form>

Here is my jQuery (this behavior described above was to be expected with this script):

$(function(){
  var one = $('#one').val(),
      two = $('#two').val();

  $('#add').click(function(e){
    e.preventDefault;
    var three = one + two;
    alert(three);
  });
});

This resulted obviously in the output:

20.0010.00

So I tried modifying my first variable declarions with parseInt() like so:

var one = parseInt($('#one').val(),10),
    two = parseInt($('#two').val(),10);

Nowever that just resulted in:

NaN

so I tried first obtaining the values and then converting to integers:

var one = $('#one').val(),
    two = $('#two').val(),
    i_one = parseInt(one),
    i_two = parseInt(two);

But yet agan... NaN was the result of this.

I have also tried the above using parseFloat() which yielded the same unfortunate results.

I also tried (read somewhere on a blog) that adding + in front will force jQuery to treat the variables as integers so I did (see above for where i got one and two):

u_one = +one
u_two = +two

I am starting to think that obtaining values using val() prevents jQuery utilising them as anything other than strings... But I must be wrong.

Can you advise on how I can obtain these values in integer format so that I can have the result:

30.00

When the fields are added?

Preferebly whilst keeping the <input /> and not adding another hidden <span /> or something similar containing the number to which then I can run text() on.

Thanks for reading.

NOTE

It has e to light the problem was not related to jQuery and related to the template I was making use of. Code above works as pointed out in the ments below. I have accepted one as an answer however all jQuery examples posted will work.

• javascript
• jquery

• 4 parseInt() should work fine. As you can see in this fiddle jsfiddle/j08691/T7Dt9 – j08691 Commented Feb 18, 2014 at 17:31
• You need to move the variable declarations inside of the click method, otherwise changing the numbers in the textboxes won't change the answer: jsfiddle/T7Dt9/2 – steinmas Commented Feb 18, 2014 at 17:35

5 Answers 5

try this way

$(function(){
    var one = $('#one').val();
    var two = $('#two').val();

    $('#add').click(function(e){
    e.preventDefault;
    var three = parseInt(one) + parseInt(two);
    alert(three);
    });
});

refer working demo on jsfiddle :http://jsfiddle/adeshpandey/Y3xmW/

Use : var three = parseFloat(one + two);

See Demo

You are pletely looking at the wrong problem!

You are extracting the value before the click occurs; the value is empty-string at that point.

the other way

 $(function(){
  var one = $('#one').val();
  var two = $('#two').val();

  $('#add').click(function(e){
   e.preventDefault;
   var three = parseInt(one) + parseInt(two);
   $('#three').text("Total: " +three);
  });  
});

HTML

 <form action="" method="post">
  <input type="text" id="one" value="20.00" />
    <input type="text" id="two" value="10.00" />
    <a href="#" id="add">
     Add up fields
     </a>
    <p id="three"></p>
   <input type="submit" value="Submit" />
 </form>

Try changing your input tags to type number:

<input type="number" id="one" value="20.00" />