Copy another jQuery text field value in real time

Question

I want to get the value of another text field and enter it in real time into another text field. HOW CAN I GET IF TEXT_3 CHANGED? IF TEXT_3 VALUE IS CHANGED, THIS SHOULD BECOME TEXT_4 For your convenience, here is the code and a demo version:

**HTML** <label>TEXT 1: </label><input type="text" id="text_1" value=""/> <label>TEXT 2: </label><input type="text" id="text_2" value=""/> <label>TEXT 3: </label><input type="text" id="text_3" value=""/> <label>TEXT 4: </label><input type="text" id="text_4" value=""/> **JAVASCRIPT** /* INPUT TEXT_1 AND TEXT_2 VALUE TO TEXT_3 ON TEXT_1 KEYUP*/ $("#text_1").keyup(function() { $("#text_3").val($("#text_1").val() + " " + $("#text_2").val()); }) /* INPUT TEXT_1 AND TEXT_2 VALUE TO TEXT_3 ON TEXT_1 AND TEXT_2 KEYUP*/ $("#text_2").keyup(function(){ $("#text_3").val($("#text_1").val() + " " + $("#text_2").val()); }) /* HOW CAN I DETECT IF TEXT_3 WAS CHANGED? IF TEXT_3 VALUE CHANGED, IT MUST BE INPUTTED TO TEXT_4*/ /* not working solution */ $("#text_3").change(function(){ $("#text_4").val($("#text_3").val()); }) 

DEMO: http://jsfiddle.net/8eXRx/7/

Thanks for answers!

Answer 1

Add change () after your textbox3.val () as shown below:

 $("#text_1").keyup(function() { $("#text_3").val($("#text_1").val() + " " + $("#text_2").val()).change(); }) /* INPUT TEXT_1 AND TEXT_2 VALUE TO TEXT_3 ON TEXT_1 AND TEXT_2 KEYUP*/ $("#text_2").keyup(function(){ $("#text_3").val($("#text_1").val() + " " + $("#text_2").val()).change(); }) 

http://jsfiddle.net/8eXRx/12/

Answer 2

The problem is that you cannot bind a special event to verify that the value of the text field was changed using JavaScript, and not manually. To solve the problem, one option is to use the same keyup event for text_1 and text_2 . JQuery will add a new handler to existing handlers:

 $("#text_1, #text_2").keyup(function(){ $("#text_4").val($("#text_3").val()); }) 

DEMO: http://jsfiddle.net/8eXRx/11/

Answer 3

the change event fires after the input field has lost focus. If you want to update it in real time, you will also need a keyup event, something like this:

 $("#text_3").keyup(function(){ $("#text_4").val($("#text_3").val()); }) 

Answer 4

Try:

 $("#text_3").keyup(function(){ cur_val = $(this).val(); //grab #text_3 current value $(this).val(cur_val); // this is optional, but keep for sake $("#text_4").val(cur_val); //set #text_4 value as what #text_3 is having }); 

Answer 5

Try it. n1 and n2 are textbox identifiers

  $(document).ready(function(){ $(':input').keyup(function(){ $("#n2").val($("#n1").val()).change(); }); });