Add Sum Of Two Input Values Automatically without clicking a single button-CodePudding

I have tried all codes avaliable but nothing worked. Here is the Code :

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    
<script>
var text1 = document.getElementById("inhouse");
var text2 = document.getElementById("sahodaya");

function showsum() {
   var first_number = parseFloat(text1.value);
   if (isNaN(first_number)) first_number = 0;
   var second_number = parseFloat(text2.value);
   if (isNaN(second_number)) second_number = 0;
   var result = first_number   second_number;
   document.getElementById("total").value = result;
}
</script>
    <title>Sahodaya 25 Report - Form</title>
  </head>
  <body>
    <div class = "container my-3">
        <form method="POST">
<fieldset disabled>
    <div >
      <label for="disabledTextInput" >Name</label>
      <input type="text" id="disabledTextInput"  placeholder="<?php echo $_SESSION['name']?>" name = "name" value="<?php echo $_SESSION['name']?>">
      
      
      <label for="disabledTextInput2" >Email</label>
      <input type="text" id="disabledTextInput2"  placeholder="<?php echo $_SESSION['email']?>" name = "email" value="<?php echo $_SESSION['email']?>">
      
      </fieldset>
      <label for="inhouse" >Inhouse Training Done In Hours</label>
      <input type="number" id="inhouse"  placeholder="Type Here" name = "inhouse" required oninput="showsum()"><br>
      
      <label for="sahodaya" >Sahodaya Training Done In Hours</label>
      <input type="number" id="sahodaya"  placeholder="JSSC   PSCC (Both)" name = "sahodaya" oninput="showsum()" required><br>
      
      <label for="total" >Total Hours Done</label>
      <input type="number" id="total"  name = "total" value="0"><br>
      
  <button type="submit" >Submit</button>
</form>
    </div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7 zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

But this Code is Not Wokring I tried all Solutions Available on Stack Overflow that I seen till now but nothing helped much So i m posting this if somebody can help.

I want to add the value in inhouse and sahodaya and show it in total input field.

But when I m running this it's not wokring. How can i fix this Error.

CodePudding user response：

Try the below code. It should fix the issue.

Full working code snippet:

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  <script>
    function add_number() {
      var first_number = parseFloat(document.getElementById("inhouse").value);
      if (isNaN(first_number)) first_number = 0;
      var second_number = parseFloat(document.getElementById("sahodaya").value);
      if (isNaN(second_number)) second_number = 0;
      var result = first_number   second_number;
      document.getElementById("total").value = result;
    }
  </script>
  <title>Sahodaya 25 Report - Form</title>
</head>

<body>
  <div >
    <form method="POST">
      <fieldset disabled>
        <div >
          <label for="disabledTextInput" >Name</label>
          <input type="text" id="disabledTextInput"  placeholder="<?php echo $_SESSION['name']?>" name="name" value="<?php echo $_SESSION['name']?>">


          <label for="disabledTextInput2" >Email</label>
          <input type="text" id="disabledTextInput2"  placeholder="<?php echo $_SESSION['email']?>" name="email" value="<?php echo $_SESSION['email']?>">

      </fieldset>
      <label for="inhouse" >Inhouse Training Done In Hours</label>
      <input type="number" id="inhouse"  placeholder="Type Here" name="inhouse" required onkeyup="add_number()"><br>

      <label for="sahodaya" >Sahodaya Training Done In Hours</label>
      <input type="number" id="sahodaya"  placeholder="JSSC   PSCC (Both)" name="sahodaya" onkeyup="add_number()" required><br>

      <label for="total" >Total Hours Done</label>
      <input type="number" id="total"  name="total" value="0"><br>

      <button type="submit" >Submit</button>
    </form>
    </div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7 zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
</body>

</html>

CodePudding user response：

You should wrap the document.getElementById call inside the function or should move the script block below your form.

Your document will be rendered line by line by the browser. Since you've your script tag before the form element. the elements were not available when you call the document.getElementById("inhouse") so the var first_number gets undefined and when the form is rendered the element will be available. But still your var is undefined. That's why your code is not getting executed.

I've also refactored your function to arrow function and removed few unnecessary methods.

<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title>Sahodaya 25 Report - Form</title>
  </head>
  <body>
    <div class = "container my-3">
        <form method="POST">
<fieldset disabled>
    <div >
      <label for="disabledTextInput" >Name</label>
      <input type="text" id="disabledTextInput"  placeholder="<?php echo $_SESSION['name']?>" name = "name" value="<?php echo $_SESSION['name']?>">
      
      
      <label for="disabledTextInput2" >Email</label>
      <input type="text" id="disabledTextInput2"  placeholder="<?php echo $_SESSION['email']?>" name = "email" value="<?php echo $_SESSION['email']?>">
      
      </fieldset>
      <label for="inhouse" >Inhouse Training Done In Hours</label>
      <input type="number" id="inhouse"  placeholder="Type Here" name = "inhouse" required oninput="showSum()"><br>
      
      <label for="sahodaya" >Sahodaya Training Done In Hours</label>
      <input type="number" id="sahodaya"  placeholder="JSSC   PSCC (Both)" name = "sahodaya" oninput="showSum()" required><br>
      
      <label for="total" >Total Hours Done</label>
      <input type="number" id="total"  name = "total" value="0" disabled><br>
      
  <button type="submit" >Submit</button>
</form>
    </div>

        
<script>
    var text1 = document.getElementById("inhouse");
    var text2 = document.getElementById("sahodaya");
    var resultField = document.getElementById("total");
    const showSum = () => {
       resultField.value = Number(text1.value)   Number(text2.value);
    }
    </script>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7 zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>