Question

I have two input type = text. The text of the textbox is populated from a custom date picker module. I want to change the content of second text box when the text of first text box is changed.

<input type = "text" id = "one"> 
<br>
<input type = "text" id = "two">
<br>
<button onclick="myFunction()">Click me</button>

Javascript

function myFunction()
{
    document.getElementById('two').value = 'hello';
}

Here I have just simulated the change of textbox ‘two’ on button click but actually it is changed by some other methods.
I want to change the text of textbox ‘one’ when value of textbox ‘two’ is changed.
Events like onchange and keyup wont work as the text is explicitly changed.
Checking the value of both text boxes for equality at interval of 1 sec is also not an option for me.

Plain Javascript or jQuery is fine.

Answer 1

My solution is built on two javascript functions as follows:

function myFunction()
{
    ob = document.getElementById('two')
        ob.value = 'hello';
    ob.focus();
    ob.blur();

}
function sync(){
   document.getElementById('one').value = document.getElementById('two').value 
}

here is the HTML:

<input type = "text" id = "one"> 
<br>
<input type = "text" id = "two" onblur="sync()">
<br>
<button onclick="myFunction()">Click me</button>​

The following is a demo: http://jsfiddle.net/saidbakr/hD6Sx/