title: jQuery parseInt() results in NaN
body: <h2>Problem Summary</h2>
  
  <p>I have been working on adding up various numbers in fields, based on the <code>value</code> of input boxes. I am currently experiencing the issue in which jQuery is concatenating the <code>value</code> arguments as they are strings and I have been unable to successfully convert them to integers. </p>
  
  <h2>Further Description</h2>
  
  <p>Here is an example of the HTML I am using: </p>
  
  <pre><code>&lt;form action="" method="post"&gt;
   &lt;input type="text" id="one" value="20.00" /&gt;
   &lt;input type="text" id="two" value="10.00" /&gt;
   &lt;a href="#" id="add"&gt;
    Add up fields
   &lt;/a&gt;
   &lt;input type="submit" value="Submit" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Here is my jQuery (this behavior described above was to be expected with this script):</p>
  
  <pre><code>$(function(){
    var one = $('#one').val(),
        two = $('#two').val();
  
    $('#add').click(function(e){
      e.preventDefault;
      var three = one + two;
      alert(three);
    });
  });
  </code></pre>
  
  <p>This resulted obviously in the output:</p>
  
  <pre><code>20.0010.00
  </code></pre>
  
  <p>So  I tried modifying my first variable declarions with <code>parseInt()</code> like so:</p>
  
  <pre><code>var one = parseInt($('#one').val(),10),
      two = parseInt($('#two').val(),10);
  </code></pre>
  
  <p>Nowever that just resulted in:</p>
  
  <pre><code>NaN
  </code></pre>
  
  <p>so I tried first obtaining the values and <em>then converting to integers</em>:</p>
  
  <pre><code>var one = $('#one').val(),
      two = $('#two').val(),
      i_one = parseInt(one),
      i_two = parseInt(two);
  </code></pre>
  
  <p>But yet agan... <code>NaN</code> was the result of this. </p>
  
  <p>I have also tried the above using <code>parseFloat()</code> which yielded the same unfortunate results. </p>
  
  <p>I also tried (read somewhere on a blog) that adding <code>+</code> in front will force jQuery to treat the variables as integers so I did (see above for where i got <code>one</code> and <code>two</code>):</p>
  
  <pre><code>u_one = +one
  u_two = +two
  </code></pre>
  
  <p>I am starting to think that obtaining values using <code>val()</code> prevents jQuery utilising them as anything other than strings... But I must be wrong. </p>
  
  <p>Can you advise on how I can obtain these values in integer format so that I can have the result:</p>
  
  <p>30.00</p>
  
  <p>When the fields are added?</p>
  
  <p>Preferebly whilst keeping the <code>&lt;input /&gt;</code> and not adding another hidden <code>&lt;span /&gt;</code> or something similar containing the number to which then I can run <code>text()</code> on. </p>
  
  <p>Thanks for reading. </p>
  
  <h2>NOTE</h2>
  
  <p>It has come 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 comments below. I have accepted one as an answer however all jQuery examples posted will work. </p>