Question

I was wondering if someone can please help me with a jQuery script. I am using MVC 2.

I have 2 textboxes. When values are typed into the textboxes then the sum of these values should display in a label control as the user types. So if the page loads then the textboxes are empty so the label must also be empty (blank). When the user types in a value like 10 then 10 should display in the label. If the user types 5 into the other textbox then 15 should display. If the user clears the 2 textboxes then the label should be blank again.

I hope someone can help here 🙂

Thanks

Answer 1

$('#textbox1, #textbox2').keyup(function() {

   $('#label').html('');

   var val1 = $('#textbox1').val();
   var val2 = $('#textbox2').val();

   if(!isNaN(val1) && !isNaN(val2)) {

      $('#label').html( parseInt(val1, 10) + parseInt(val2, 10) );

   }
});

UPDATE

To accommodate your comment, see the changes below. Having made this change, I’m starting to lean towards Reigel’s answer being the way to go, but perhaps with modification for the 0 result always being represented as an empty string.

$('#textbox1, #textbox2').keyup(function() {

   $('#label').html('');

   var val1 = $('#textbox1').val();
   var val2 = $('#textbox2').val();

   if(!isNaN(val1) || !isNaN(val2)) {

      $('#label').html( (parseInt(val1, 10) || 0) + (parseInt(val2, 10) || 0) );

   }
});