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.
Share Improve this question edited Feb 20, 2014 at 17:14 Dan asked Feb 18, 2014 at 17:29 DanDan 9782 gold badges11 silver badges25 bronze badges 2- 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
Reset to default 3try 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" />