I am having two text boxes namely Amount 1 and Amount 2 as like below..

JSFiddle

<input name="name1" id="id1" value="" type="radio" >&nbsp;&nbsp;Amount 1&nbsp;$ <input name="amtname" size="5" maxlength="7" value="" ><br><br>
<input name="name1" id="id2" value="" type="radio" >&nbsp;&nbsp;Amount 2&nbsp;$ <input name="amtname" size="5" maxlength="7" value="" ><br> 

If I type any value in Amount 1 text box, it should display the same value in Amount 2 text box by getting runtime value from Amount 1 Text box. And If I click on Amount 1 Checkbox, it should display the value of Amount 1 Text box in Amount 2 Text Box. Is it possible using javascript?

I am having two text boxes namely Amount 1 and Amount 2 as like below..

JSFiddle

<input name="name1" id="id1" value="" type="radio" >&nbsp;&nbsp;Amount 1&nbsp;$ <input name="amtname" size="5" maxlength="7" value="" ><br><br>
<input name="name1" id="id2" value="" type="radio" >&nbsp;&nbsp;Amount 2&nbsp;$ <input name="amtname" size="5" maxlength="7" value="" ><br> 

If I type any value in Amount 1 text box, it should display the same value in Amount 2 text box by getting runtime value from Amount 1 Text box. And If I click on Amount 1 Checkbox, it should display the value of Amount 1 Text box in Amount 2 Text Box. Is it possible using javascript?

• javascript
• html

• use onkeypress or onkeyup event and assign value to second text box – Quicksilver Commented Apr 9, 2014 at 10:21
• where are you using html5 here ? – Santhosh Commented Apr 9, 2014 at 11:07
• Thanks....talking from the future =) – Carlos Morales Commented Jun 25, 2014 at 15:59

3 Answers 3

Add a onkeyup event listener to your first element(Whenever a key is pressed, the value in first textbox is also entered in second.). Then call the function like

function enterAmt(ev) {
    document.getElementById('amt2').value = ev.value;
}

JSFiddle

Save value in a variable and assign it to other textbox. Assign IDs to your textboxs assuming their ids are id1, id2 respectively. Now in event firing code use this.

var firstvalue = document.getElementById("id1").value;
document.getElementByID("id2").value = firstvalue;

You need to bind the input's to an event such as onKeyPress or similar and change the other input's value to the changed one's.

https://stackoverflow./a/574971/2110909

Detecting input change in jQuery?

Example:

function updateBoth() {
    document.getElementsByName("amtname")[0].value = this.value;
    document.getElementsByName("amtname")[1].value = this.value
}

document.getElementsByName("amtname")[0].oninput = updateBoth;
document.getElementsByName("amtname")[1].oninput = updateBoth;

http://jsfiddle/ZRhLg/1/

Note: oninput may not be entirely cross-browser supported