jquery .keyup event on input not firing

Question

I am trying to have a simple addition calculation when an input is keyup'ed. Here is my html:

<tr id="a">
        <td>
            <label>A</label>
        </td>
        <td>
            <label>Results/Action Orientation (asset)</label>
        </td>
        <td class="shade">
            <input id="a_per" type="text" />
        </td>
        <td class="shade">
            <input id="a_pot" type="text" />
        </td>
        <td class="shade">
            <input id="a_tot" class="totals" type="text" disabled="disabled" />
        </td>
</tr>

And here is my jQuery for the keyup event:

$('#a_per').keyup(function() {
    if($('#a_pot').value != "") {
        var tot = this.value + $('#a_pot').value;
        $('#a_tot').value = tot;
    }
});

I am going to tailor it to fire when either #a_per or #a_pot keyup but first I want to make sure this will work.

Any help is appreciated. Thanks.

Alexander · Accepted Answer · 2012-05-15T21:12:44.853

2

Another alternative:

$('#a_per,#a_pot').keyup(function() {
  var a_per = +$('#a_per').val() || 0;
  var a_pot = +$('#a_pot').val() || 0;
  $('#a_tot').val(a_per + a_pot);
});

A working example.

edited May 15 '12 at 21:12

answered May 15 '12 at 20:53

Alexander

23,432
11
63
73

Wouldn't this still need casting to int/float? – ahhchuu May 15 '12 at 21:01
You could say this *autocast* itself. Being honest I think it is the better answer. – Alexander May 15 '12 at 21:05
I am not a javascript/jQuery expert so excuse my ignorance. What are the advantages of this method over those listed above? If it is more efficient I will use it. It isn't as readable as the above examples though. – ahhchuu May 15 '12 at 21:07
You would like to read [How do I Convert a String into an Integer in JavaScript?](http://stackoverflow.com/questions/1133770/how-do-i-convert-a-string-into-an-integer-in-javascript) – Alexander May 15 '12 at 21:11
Will do, thanks for the advice and help. I have been looking at your answer more and agree with you now. I didn't notice all that was going on. I am switching yours to the answer. Thanks again. :) – ahhchuu May 15 '12 at 21:12
I added a little trick to prevent `NaN`, even though the best thing would be to to check `$('#a_pot').val() !== ""`. – Alexander May 15 '12 at 21:15

j08691 · Answer 2 · 2012-05-15T20:53:29.220

1

Change your use of .value to .val(). You'll also want to apply parseFloat or parseInt to your addition function, otherwise you'll end up concatenating strings. Also wrap this is jQuery tags like:

$('#a_per').keyup(function() {
    if($('#a_pot').val() != "") {
        var tot = parseFloat($(this).val()) + parseFloat($('#a_pot').val());
        $('#a_tot').val(tot);
    }
});

edited May 15 '12 at 20:53

answered May 15 '12 at 20:47

j08691

204,283
31
260
272

Awesome! This fixed it. I will set to answer once stackoverflow lets me. Thanks a lot. :) – ahhchuu May 15 '12 at 20:55
No problem. You may also want to consider checking for non-numeric input. – j08691 May 15 '12 at 20:56
I will be adding validation to it yet. I switched over to parseInt as I will not be accepting any floats. I assume that parseInt is faster than parseFloat, although it would probably not be noticable. – ahhchuu May 15 '12 at 20:57
Not noticeable by much. When using parseInt, make sure you add the radix parameter. E.g. `parseInt($(this).val(),10)`. – j08691 May 15 '12 at 20:58
Forgot about that. Thanks. Set to answer now. – ahhchuu May 15 '12 at 21:00

score 1 · Answer 3 · answered May 15 '12 at 20:54

use val(), not value.

$(function(){

   $('#a_per').keyup(function() {
     var item=$(this);

      if(item.val() != "") {
         var tot = parseInt(item.val()) + parseInt($('#a_pot').val());
         $('#a_tot').val(tot);
      }
   });

});

Working sample : http://jsfiddle.net/zzS3U/9/

jquery .keyup event on input not firing

3 Answers3