how to get runtime value of one text box and show it to other text box using javascript

Question

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?

Answer 1

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

Answer 2

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.com/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.net/ZRhLg/1/

Note: oninput may not be entirely cross-browser supported

Answer 3

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;