I have succeeded to display the input value to another input using the HTML form. I want to display the input values in the selectoption elements instead of input 3 and input 4.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form action="" method="post">
<input
type="text"
id="myInput1"
onchange="myChangeFunction(this)"
placeholder="FIRST "
/>`
<input
type="text"
id="myInput3"
onchange="myChangeFunction1(this)"
placeholder="SECOND "
/><br />
Above input are displayed in the below input fields.
<br />
<input type="text" id="myInput2" /> <br />
<input type="text" id="myInput4" />
But I want to display the above myinput2 myinput4 values in the below option values in select field when the input at myinput1 and myinput3 are typed.
<select>
<option>????? Here insert the value obtained at myInput2</option>
<option>??? Here insert the value obtained at myInput4</option>
</select>
<script type="text/javascript">
function myChangeFunction(input1) {
var p1 = document.getElementById("myInput2");
p1.value = input1.value;
}
function myChangeFunction1(input3) {
var p2 = document.getElementById("myInput4");
p2.value = input3.value;
}
</script>
</form>
check it out
function myChangeFunction(input1) {
var p1 = document.getElementById("option1");
p1.value = input1.value;
p1.innerHTML = input1.value
}
function myChangeFunction1(input3) {
var p2 = document.getElementById("option2");
p2.value = input3.value;
p2.innerHTML = input3.value
}<form action="" method="post">
<input
type="text"
id="myInput1"
onkeyup="myChangeFunction(this)"
placeholder="FIRST "
/>`
<input
type="text"
id="myInput3"
onkeyup="myChangeFunction1(this)"
placeholder="SECOND "
/><br />
<select>
<option id="option1">????? Here insert the value obtained at myInput2</option>
<option id="option2">??? Here insert the value obtained at myInput4</option>
</select>
</form>