I just want to make the result of input 1 and input 2 appear in input 3 without clicking any button or text. It means if user write number 5 in input 1 and number 5 in input 2 will automatically show the result 10 in input 3. I have this code :
<div class="inputs">
<div class="input-box">
<label for="exampleInputEmail1" class="details">number 1</label>
<input type="number" name="num1" class="form-control" id="num1" value="<?php echo
$num1?>" placeholder="0" aria-describedby="emailHelp">
</div>
<div class="input-box">
<label for="exampleInputEmail1" class="details">number 2</label>
<input type="number" name="num2" class="form-control" id="num2" value="<?php echo
$num2?>" placeholder="0" aria-describedby="emailHelp">
</div>
<div class="input-box">
<label for="exampleInputEmail1" class="details">result</label>
<input type="number" name="res" class="form-control" id="res" value="<?php echo
$res?>" placeholder="0" aria-describedby="emailHelp">
</div>
</div>
java script :
<script>
function myFunction() {
var x = parseInt(document.getElementById("num1").value);
var y = parseInt(document.getElementById("num2").value);
var z = x + y;
document.getElementById("res").innerHTML = z;
}
</script>
There are a few adjustments you need to do.
You need to call you function myFunction() at the event oninput, and you need to call it on the input <input> fields not on the result <input> field as you did it.
In myFunction() you need to check whether a value could be parsed using isNaN(). In case of a sum it's probably a good idea to set a default value of 0 in case some invalid value was entered or one field is empty.
function myFunction() {
var x = parseInt(document.getElementById("num1").value);
// set default value to 0 if parsing was not successful
if (isNaN(x)) x = 0;
var y = parseInt(document.getElementById("num2").value);
// set default value to 0 if parsing was not successful
if (isNaN(y)) y = 0;
var z = x + y;
document.getElementById("res").value = z;
}<div class="inputs">
<div class="input-box">
<label for="exampleInputEmail1" class="details">number 1</label>
<input type="number" name="num1" class="form-control" id="num1" oninput="myFunction()" value="<?php echo
$num1?>" placeholder="0" aria-describedby="emailHelp" />
</div>
<div class="input-box">
<label for="exampleInputEmail1" class="details">number 2</label>
<input type="number" name="num2" class="form-control" id="num2" oninput="myFunction()" value="<?php echo
$num2?>" placeholder="0" aria-describedby="emailHelp" />
</div>
<div class="input-box">
<label for="exampleInputEmail1" class="details">result</label>
<input type="number" name="res" class="form-control" id="res" value="<?php echo
$res?>" placeholder="0" aria-describedby="emailHelp" />
</div>
</div>