CODEWITHSUNDEEP
javascriptjquery
darsheets
darsheets

Reputation: 276

Change text of a textbox when other textbox text is changed

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.

Upvotes: 3

Views: 4770

Answers (2)

John Gwynn
John Gwynn

Reputation: 54

Here is an example using jQuery:

Live view: http://jsbin.com/aqiyaz/1/

Code: http://jsbin.com/aqiyaz/1/edit

Upvotes: 1

SaidbakR
SaidbakR

Reputation: 13534

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/

Upvotes: 0

Related Questions