I have a simple HTML form with two text entries. I want to copy the text from the first entry field to the second one as soon as the text in the first field changes. Currently the changes are only applied, when I click the second entry. How can I fix this, so that the changes are visible without having to click the second entry?
<!DOCTYPE html>
<html>
<body>
<form onchange="myFunction()">
<label for="field_1">field 1:</label>
<input type="text" id="field_1" name="field_1"><br><br>
<label for="field_2">field 2:</label>
<input type="text" id="field_2" name="field_2"><br><br>
</form>
<script>
function myFunction() {
var x = document.getElementById("field_1").value;
document.getElementById("field_2").value = "copy: " + x;
}
</script>
</body>
</html>Listen for the input event instead:
<!DOCTYPE html>
<html>
<body>
<form oninput="myFunction()">
<label for="field_1">field 1:</label>
<input type="text" id="field_1" name="field_1"><br><br>
<label for="field_2">field 2:</label>
<input type="text" id="field_2" name="field_2"><br><br>
</form>
<script>
function myFunction() {
var x = document.getElementById("field_1").value;
document.getElementById("field_2").value = "copy: " + x;
}
</script>
</body>
</html>Remove your myFunction() it will work. I have already tested it.
<!DOCTYPE html>
<html>
<body>
<form>
<label for="field_1">field 1:</label>
<input type="text" id="field_1" name="field_1"><br><br>
<label for="field_2">field 2:</label>
<input type="text" id="field_2" name="field_2"><br><br>
</form>
<script>
document.getElementById('field_2').addEventListener("click", function() {
this.value = document.getElementById('field_1').value;
});
</script>
</body>
</html>