add two textbox values in jquery after getting by JSON

Question

I have three text boxes having ids: textbox1, textbox2, textbox3. I am retrieving values for first two textboxes from combo1.jsp by JSON and i want to add these two values and to display it on 3rd textboxes. Values of 1st textbox and 2nd textbox are coming from db, only i want to add these two values and to display in 3rd textbox.

  $("#combo1").change(function() {
$.getJSON('combo1.jsp', { combo1Val : $(this).val() }, function(data) {
 $("#textbox1").val(data.a);// suppose a's value came as 10 from db
$("#textbox2").val(data.b);// b's value came as 20 from db
 $("#textbox3").val(data.c);// here i want to show the sum(a+b) that is 30
});
});

Any ideas please?

Rory McCrossan · Accepted Answer · 2012-02-14 10:49:04Z

4

Try this:

$("#combo1").change(function() {
    $.getJSON(
        'combo1.jsp', 
        { combo1Val : $(this).val() }, 
        function(data) {
            var a = data.a; // suppose a's value came as 10 from db
            var b = data.b; // b's value came as 20 from db
            var total = parseInt(a) + parseInt(b);

            $("#textbox1").val(a)
            $("#textbox2").val(b)
            $("#textbox3").val(total); // here i want to show the sum(a+b) that is 30
        }
    );
});

You can cut this down if required, I've just made it as clear as possible how it's working.

UPDATE

To update the sum after changing either value, try this:

$("#textbox1, #textbox2").keyup(function() {
    var a = $("#textbox1").val();
    var b = $("#textbox2").val();
    var total = parseInt(a) + parseInt(b);
    $("#textbox3").val(total);
});

edited Feb 14, 2012 at 10:49

answered Feb 14, 2012 at 10:00

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

harry Over a year ago

thanks Rory, just one more question, if i want to edit value b then after pressing TAB key, how sum can be changed accordingly? suppose a's value came as 10, b's value came as 20, then sum shows as 30. Now if i will edit value of b to 25, then immediately value of total will show 35. How can i do it?

harry Over a year ago

@Rory..i faced a problem here. if a's value is 633 and b's value is 010, then total is giving 641? Please suggest any idea how to correct it

Rory McCrossan Over a year ago

@Harry Try opening a new question for that one.

jerjer · Accepted Answer · 2012-02-14 10:28:29Z

1

A bit odd but this could work:

$("#textbox3").val(+data.a + +data.b);

Same as:

$("#textbox3").val(parseInt(data.a,10) + parseInt(data.b,10));

UPDATE: added recompute function when values are changed from UI

function recompute(){
     var a = parseInt($("#textbox1").val(),10);
     var b = parseInt($("#textbox2").val(),10);
     var sum = a + b;
     $('#textbox3').val( sum );
}

$('#textbox1,#textbox2').change(recompute);

edited Feb 14, 2012 at 10:28

answered Feb 14, 2012 at 10:03

jerjer

8,77634 silver badges36 bronze badges

5 Comments

harry Over a year ago

@jerjer..please have a look at my comments on Rory's answer, if you can provide an idea

jerjer Over a year ago

1 thing to add, parseInt(value) without specifying the base, will yield incorrect results if the value starts with 0 like 010, javascript treat them as non decimal values

jerjer Over a year ago

parseInt(value, 10); //10- is the base, that should correct it

harry Over a year ago

ya but how can i add value as 10 like parseInt(value, 10); , it is coming from db, so it may be any value. value of a may be 10, 20, 30 etc..

jerjer Over a year ago

the base is just an additional parameter of the parseInt function to tell javascript that you want a decimal result not an octal value

Akhil Thayyil · Accepted Answer · 2012-02-14 10:00:15Z

0

$("#combo1").change(function() {
$.getJSON('combo1.jsp', { combo1Val : $(this).val() }, function(data) {
 $("#textbox1").val(data.a);// suppose a's value came as 10 from db
$("#textbox2").val(data.b);// b's value came as 20 from db
 $("#textbox3").val(parseInt(data.a)+parseInt(data.b));// here i want to show the sum(a+b) that is 30
});
});

answered Feb 14, 2012 at 10:00

Akhil Thayyil

9,4256 gold badges38 silver badges48 bronze badges

1 Comment

harry Over a year ago

@Akhil..thanks for your response well above solution worked for me

Bahdeng · Accepted Answer · 2012-02-14 10:03:49Z

0

$("#combo1").change(function() {
  $.getJSON('combo1.jsp', { combo1Val : $(this).val() }, function(data) {
    $("#textbox1").val(data.a);// suppose a's value came as 10 from db
    $("#textbox2").val(data.b);// b's value came as 20 from db

    var c = $("#textbox2").val() + $("#textbox1").val();
   $("#textbox3").val(c);
 });
});

answered Feb 14, 2012 at 10:03

Bahdeng

4348 silver badges17 bronze badges

1 Comment

harry Over a year ago

@kynsai..thanks for your response well above solution worked for me

El Amor Zeewon · Accepted Answer · 2012-02-14 12:14:31Z

0

$.getJSON(msg.d,function(i,data){

var a=parseInt(data.a);//after yo get data injsonformat parse it to int 
var b=parseInt(data.b);
var total=a+b;//this is just a simple arithematic addition
$('#textbox3').val(total);//assigning the value to the textbox

}

answered Feb 14, 2012 at 12:14

El Amor Zeewon

1081 silver badge11 bronze badges

Collectives™ on Stack Overflow

add two textbox values in jquery after getting by JSON

5 Answers 5

3 Comments

5 Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

5 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related