I have three text boxes having ids: textbox1, textbox2, textbox3. I am retrieving values for first two textboxes from bo1.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 ing from db, only i want to add these two values and to display in 3rd textbox.

  $("#bo1").change(function() {
$.getJSON('bo1.jsp', { bo1Val : $(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?

I have three text boxes having ids: textbox1, textbox2, textbox3. I am retrieving values for first two textboxes from bo1.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 ing from db, only i want to add these two values and to display in 3rd textbox.

  $("#bo1").change(function() {
$.getJSON('bo1.jsp', { bo1Val : $(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?

• javascript
• jquery
• json

5 Answers 5

Try this:

$("#bo1").change(function() {
    $.getJSON(
        'bo1.jsp', 
        { bo1Val : $(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);
});

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 repute function when values are changed from UI

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

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

$("#bo1").change(function() {
$.getJSON('bo1.jsp', { bo1Val : $(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
});
});

$("#bo1").change(function() {
  $.getJSON('bo1.jsp', { bo1Val : $(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);
 });
});

$.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

}