How to update the textbox value based on other textbox using JavaScript?

Question

I have three input text boxes in my form.

First one is teacher, second one is grade. Now I've the third input text box, where i need to update the value dynamically from these two values as "(teacher)'s (X) class" using JavaScript.

Can anyone help me in writing the code? Thanks in advance.

here is the jquery code:

<script type="text/javascript">
  $(document).ready(function(){
    $('#both').value($('#teacher').val() + "'s " + $('#grade').val());
});

  </script>

and my input tags are:

<input type="text" name="teacher_name" id="teacher" value="" style="background:#f7f6f2 url(../images/input_02.png) repeat left top;border: 0px;width: 250px;height: 10px;padding: 10px;display: block;">
<input type="text" name="teacher_name" id="grade" value="" style="background:#f7f6f2 url(../images/input_02.png) repeat left top;border: 0px;width: 250px;height: 10px;padding: 10px;display: block;">
<input type="text" name="teacher_name" id="both" value="" style="background:#f7f6f2 url(../images/input_02.png) repeat left top;border: 0px;width: 250px;height: 10px;padding: 10px;display: block;">

what are the things i need to add to make my third input field to get updated.

Can you show us what you have so far?

JAAulde
– JAAulde

2012-06-23 06:22:00 +00:00
Commented Jun 23, 2012 at 6:22 — JAAulde
– JAAulde, Commented Jun 23, 2012 at 6:22

Alberto De Caro · Accepted Answer · 2012-06-23 07:52:53Z

3

Use the onChange event that is triggered when an input content changes or the onBlur event that is triggered when an input lost the focus:

function UpdateInfo()
{
  var teacher = document.getElementById('teacher').val();
  var grade = document.getElementById('grade').val();
  var info = teacher + '\'s '+ grade + ' class';
  document.getElementById('info').value = info;
}

/* Solution 1 (onChange) */
<input id="teacher" type="text" onChange="UpdateInfo();" />
<input id="grade" type="text" onChange="UpdateInfo();" />
<input id="info" type="text" />

/* Solution 2 (onBlur) */
<input id="teacher" type="text" onBlur="UpdateInfo();" />
<input id="grade" type="text" onBlur="UpdateInfo();" />
<input id="info" type="text" />

Or using jQuery, you can bind the event at document.ready event:

$(document).ready(function()
{
    /*
    * binding onChange event here
    * you can replace .change with .blur
    */
    $('#teacher').change(UpdateInfo);
    $('#grade').change(UpdateInfo);
});

   function UpdateInfo()
   {
     var teacher = $('#teacher').val();
     var grade = $('#grade').val();
     var info = teacher + '\'s '+ grade + ' class';
     $('#info').val(info);
   }

<input id="teacher" type="text" />
<input id="grade" type="text" />
<input id="info" type="text" />

DEMO

edited Jun 23, 2012 at 7:52

answered Jun 23, 2012 at 7:16

Alberto De Caro

5,2139 gold badges50 silver badges77 bronze badges

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

2 Comments

lucky Over a year ago

no this one is also not working seems everything is fine but in general page also this code is not working

lucky Over a year ago

i thought this will work fine but not working in my code don't know what the fault i'm doing i just updated these in my code but my input fields are not changing....

slash197 · Accepted Answer · 2012-06-23 06:23:39Z

1

If you are using jQuery it's pretty simple to update the third one when the dom is ready:

$(document).ready(function(){
    $('#third').value($('#first').val() + "' " + $('#second').val());
});

answered Jun 23, 2012 at 6:23

slash197

9,0246 gold badges44 silver badges71 bronze badges

3 Comments

slash197 Over a year ago

do you have jquery included on your page?

lucky Over a year ago

what if the values are passing dynamically???jsfiddle.net/srinivaswaterdrop01/PUbKj see this code

slash197 Over a year ago

what do you mean by "dynamically"? no one will help you figure it out if you don't explain what you want.

Mohit Pandey · Accepted Answer · 2012-06-23 06:29:25Z

0

With javascript, you can try this method:

var first_val=document.getElementById('first').val();

var second_val=document.getElementById('second').val();

document.getElementById('third').val(first_val + second_val);

answered Jun 23, 2012 at 6:29

Mohit Pandey

3,8597 gold badges28 silver badges38 bronze badges

Comments

EnronEvolved · Accepted Answer · 2024-05-10 20:04:48Z

0

I think the <output> element is what you're looking for. The example on MDN covers this use case exactly.

answered May 10, 2024 at 20:04

EnronEvolved

2571 gold badge2 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to update the textbox value based on other textbox using JavaScript?

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related