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..

<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?

use `onkeypress` or `onkeyup` event and assign value to second text box — Quicksilver, Apr 09 '14 at 10:21

score 4 · Accepted Answer · answered Apr 09 '14 at 10:23

4

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

answered Apr 09 '14 at 10:23

Praveen

55,303
33
133
164

score 0 · Answer 2 · edited May 23 '17 at 12:21

0

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

edited May 23 '17 at 12:21

Community

1
1

answered Apr 09 '14 at 10:14

Colandus

1,634
13
21

Have a look at that, updated. I read your question again, I may have got it a bit twisted. If so, just tell me what needs to be changed... – Colandus Apr 09 '14 at 10:21

score 0 · Answer 3 · answered Apr 09 '14 at 10:16

0

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;

answered Apr 09 '14 at 10:16

Haris Mehmood

854
4
15
26

reason for down voting ? – Haris Mehmood Apr 09 '14 at 10:20

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

3 Answers3