HTML form is not calling JS function onsubmit

Question

I am trying to check if all fields are filled when the form is being submitted. But I have noticed that, form without all filled fields is being sent. So, I started to investigate, and even with return false, which means that form is not sent, it is.

Here is the HTML code:

<form action="addproduct.php" onsubmit="checkinput()" method="post">
        <style> <?php include 'css/addproduct.css'; ?> </style>
            <div class="iRow">
                <div class="lclass"> <label for="ProductSKU">Product SKU:</label> </div>
                <div class="tclass"> <input type="text" name="ProductSKU"> </div>
            </div>
            <div class="iRow">
                <div class="lclass"> <label for="ProductName">Product Name:</label> </div>
                <div class="tclass"> <input type="text" name="ProductName"> </div>
            </div>
            <div class="iRow">
                <div class="lclass"> <label for="ProductPrice">Product Price:</label> </div>
                <div class="tclass"> <input type="text" name="ProductPrice"> </div>
            </div>
            <div class="iRow dvd">
                <div class="lclass"> <label for="ProductSize">Product Size:</label> </div>
                <div class="tclass"> <input type="text" name="ProductSize"> </div>
            </div>
            <div class="iRow book">
                <div class="lclass"> <label for="ProductWeight">Product Weight:</label> </div>
                <div class="tclass"> <input type="text" name="ProductWeight"> </div>
            </div>
            <div class="iRow furniture">
                <div class="lclass"> <label for="ProductDimensions">Product Dimensions:</label> </div>
                <div class="tclass"> <input type="text" name="ProductDimensions"> </div>
            </div>
            <div class="iRow">
                <div class="lclass"> <label for="typeselector">Product Category</label> </div>
                <div class="tclass">
                    <select id="typeselector" name="productoptions" onchange="selectorhandle()">
                        <option value=""></option>
                        <option value="DVD">DVD-Disc</option>
                        <option value="Book">Book</option>
                        <option value="Furniture">Furniture</option>
                    </select>
                </div>
            </div>
            <input type="submit" value="Add Product" >
            <script>
                <?php include 'js/addproduct.js'; ?> <!-- Adding this javascript for the dynamic form -->
            </script>

        </form>

And in addproduct.js I have:

function checkinput()
{
    return false;
}

Answer 1

The root cause of the problem is in the call to the function by 'onsubmit' attribute

onsubmit="checkInput()" will only call the checkInput() function and submit form without waiting for the checkInput() to finish.

This behaviour of not waiting for a function / step to finish (Asynchronous nature) is inherent to javascript.

The problem can be fixed by explicitly using

onsubmit="return checkInput()"

instead of

onsubmit="checkInput()"

Working example for validating input using onsubmit:

<form action="addproduct.php" onsubmit="return checkInput()" method="post">
    <!-- form fields here -->
</form>

<script>
    function checkInput() {
         if( all_input_is_Valid ) {
             return true
         }
        return false
    }
</script>

More information:

https://www.w3schools.com/js/js_validation.asp

Answer 2

<form action="addproduct.php" onsubmit="checkinput()" method="post">
      <div class="iRow">
          <div class="lclass"> <label for="ProductSKU">Product SKU:</label> </div>
          <div class="tclass"> <input type="text" name="ProductSKU"> </div>
      </div>
      <div class="iRow">
          <div class="lclass"> <label for="ProductName">Product Name:</label> </div>
          <div class="tclass"> <input type="text" name="ProductName"> </div>
      </div>
      <div class="iRow">
          <div class="lclass"> <label for="ProductPrice">Product Price:</label> </div>
          <div class="tclass"> <input type="text" name="ProductPrice"> </div>
      </div>
      <div class="iRow dvd">
          <div class="lclass"> <label for="ProductSize">Product Size:</label> </div>
          <div class="tclass"> <input type="text" name="ProductSize"> </div>
      </div>
      <div class="iRow book">
          <div class="lclass"> <label for="ProductWeight">Product Weight:</label> </div>
          <div class="tclass"> <input type="text" name="ProductWeight"> </div>
      </div>
      <div class="iRow furniture">
          <div class="lclass"> <label for="ProductDimensions">Product Dimensions:</label> </div>
          <div class="tclass"> <input type="text" name="ProductDimensions"> </div>
      </div>
      <div class="iRow">
          <div class="lclass"> <label for="typeselector">Product Category</label> </div>
          <div class="tclass">
              <select id="typeselector" name="productoptions" onchange="selectorhandle()">
                  <option value=""></option>
                  <option value="DVD">DVD-Disc</option>
                  <option value="Book">Book</option>
                  <option value="Furniture">Furniture</option>
              </select>
          </div>
      </div>
      <input type="submit" value="Add Product" >
  </form>

  <?php echo '<script src="js/addproduct.js"></script>'; ?>

To verify function call, just add alert in addproduct.js

function checkinput() {
    alert("Function called")
    return false;
}