I'm completely new to Javascript, and currently I'm trying to set a value to an input field triggered by an onchange event from another input field.

Code sample - input field 1:

<input type='text' onchange='methodThatReturnsSomeValue()'>

Now I want to assign the following input field's value with the returned one from the method triggered from onchange above:

<input type='text'>

Does anyone know how this can be solved?

I'm completely new to Javascript, and currently I'm trying to set a value to an input field triggered by an onchange event from another input field.

Code sample - input field 1:

<input type='text' onchange='methodThatReturnsSomeValue()'>

Now I want to assign the following input field's value with the returned one from the method triggered from onchange above:

<input type='text'>

Does anyone know how this can be solved?

• javascript
• html
• dom-events
• onchange

• 1 didn't you try anything inside methodThatReturnsSomeValue() that you can show us and then we help to debug and fix? – Calvin Nunes Commented Dec 5, 2018 at 17:43
• Let's say the method returns a text value, then I just want the returned text value to be assigned as value to input field 2 when onchange is triggered from input field 1. I just want to know how I connect this, can this be shown in a simple code sample? – eqinna Commented Dec 5, 2018 at 17:46
• Add id to each input, get value from input 1, find input 2 by id then set it's value using .value = .... This is one form, there's some others. Research for "JS get element by id" and "JS set value to input" on google and you'll easily find a solution – Calvin Nunes Commented Dec 5, 2018 at 17:48
• Thanks for your replies, but the issue for me here is that I don't know how to state this syntax-wise in JavaScript, so is it possible to give me a code sample of this? – eqinna Commented Dec 5, 2018 at 17:51

3 Answers 3

Simply assign an identifier to each input, and pass the input to the function:

<input type="text" id="myInput1" onchange="myChangeFunction(this)" placeholder="type something then tab out" />
<input type="text" id="myInput2" />

<script type="text/javascript">
  function myChangeFunction(input1) {
    var input2 = document.getElementById('myInput2');
    input2.value = input1.value;
  }
</script>

You pass input1 to the function as an argument, then we get the value of input1 and assign it as the value to input2 after finding it in the DOM.

Note that the change event will only fire on a text input if you remove focus. So for example you'll have to tab out of the field to get field 2 to get updated. If you want you could use something else like keyup or keypress to get a more live update.

You can also do this without using an HTML attribute which is a little cleaner:

<input type="text" id="myInput1" />
<input type="text" id="myInput2" />

<script type="text/javascript">
  var input1 = document.getElementById('myInput1');
  var input2 = document.getElementById('myInput2');

  input1.addEventListener('change', function() {
    input2.value = input1.value;
  });
</script>

Was looking myself for something similar- my problem was regarding passing an "option" value to another input. I altered the above answer to get this:

function myChangeFunction(input1) {
  var input2 = document.getElementById('myInput2');
  input2.value = input1.value;
}

<select type="text" id="myInput1" onchange="myChangeFunction(this)" />
  <option> </option>
  <option value="1">1 </option>
  <option value="2">2 </option>
</select>
<input type="text" id="myInput2" />

why not use .onkeyup?

<input id="input1"></input>
<input id="input2"></input>

var input1,input2;
input1= document.getElementById("input1");
input2 = document.getElementById("input2");
input1.onkeyup = function () { input2.value = input1.value; };
//now if you want to copy edits from input2 to input1
//input2.onkeyup = function () { input1.value = input2.value; };

.onkeyup listens for things after you release the key from your keyboard, automatically firing a script after a change is made