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?
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
methodThatReturnsSomeValue()that you can show us and then we help to debug and fix?idto eachinput, get value frominput1, find input 2 byidthen 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