Make the result of input 1 and input 2 appear in input 3 automatically

March 23, 2022

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>

>Solution :

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>