ansaurus

Question

Updating a label in jQuery by adding the values of textboxes

Answer 1

+1 A:

$('#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) );

   }
});

David Hedlund 2010-10-06 08:27:36

Thanks. I'm new to jQuery. Does this code have to be in $(document).ready(function () {})?

Brendan Vogt 2010-10-06 08:40:43

@Brendan Vogt: it's usually the best place to attach all the event handlers (e.g. `keyup` in your case), so yes, I would place it in the `$(document).ready()` function body

Giu 2010-10-06 08:53:06

@Brendan: yes, putting it inside that function means that the code is not executed until the DOMReady event is fired, which is the first time you're guaranteed to have access to all the DOM nodes in the page. It is always best practice to defer anything that's accessing DOM nodes to DOMReady.

David Hedlund 2010-10-06 08:56:56

@David: Your code only works if there is a number in all the textboxes. I want it to calculate if there is a value in any of the textboxes. Lets say you only type a value in the first textbox and nothing in the second textbox then the result must be equal to the value in the first textbox.

Brendan Vogt 2010-10-06 09:19:59

@Brendan: see my update.

David Hedlund 2010-10-06 09:42:20

@David: Thanks. Just a final question, if you typed values in and made all the textboxes blank then the value of the label is 0. I want it blank, is there a shorter way of doing this or do I need to create a total variable, if it is 0 then make label blank?

Brendan Vogt 2010-10-06 10:10:44

@David: I changed parseInt(val1, 10) || 0) to parseInt(val1, 10) || ''), it works but is it best practices?

Brendan Vogt 2010-10-06 10:13:44

Answer 2

+1 A:

$("#textBox1").keydown(function(event) {
   updateLabel();
});
$("#textBox2").keydown(function(event) {
   updateLabel();
});
function updateLabel()
{
   var val = 0;
   if(isNaN($("#textBox1").val()) && isNaN($("#textBox1").val()))
   {
       $("#myLabel").val("");
       return;
   }
   if(!isNaN($("#textBox1").val()))
       val += $("#textBox1").val();
   if(!isNaN($("#textBox2").val()))
       val += $("#textBox2").val();
   $("#myLabel").val(val); 
}

Spencer Ruport 2010-10-06 08:29:38

Answer 3

+1 A:

$(document).ready(function() {
    $('#num1, #num2').keyup(function(){
        var num1 = parseInt($('#num1').val(),10) || 0;
        var num2 = parseInt($('#num2').val(),10) || 0;
        $('label.sum').text((num1 + num2)|| '')
    });
});

fair demo

Reigel 2010-10-06 08:32:16

This makes a lot of assumptions. Anything that can be `parseInt`:d will be, and anything that can't will be treated as `0`. Hence `'a1' + '1a'` will yield `1`. This also doesn't distinguish the result `0` an erroneous result. Hence `'1' + '-1'` yields `''`.

David Hedlund 2010-10-06 09:00:19

Oh, turns out the first assumption I mentioned seems to be quite what OP wants :)

David Hedlund 2010-10-06 09:42:57

ansaurus

tags:

views:

answers:

Updating a label in jQuery by adding the values of textboxes

fair demo

related questions