HTML 表單未調用 JS function onsubmit

Question

我正在嘗試檢查提交表單時是否填寫了所有字段。 但我注意到，正在發送沒有所有填寫字段的表格。 於是，我開始調查，竟然用return false，表示沒有發送表單，是的。

這是 HTML 代碼：

<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>

在 addproduct.js 我有：

function checkinput()
{
    return false;
}

Answer 1

問題的根本原因在於“onsubmit”屬性對 function 的調用

onsubmit="checkInput()"只會調用 checkInput() function 並提交表單，而無需等待 checkInput() 完成。

這種不等待 function/步驟完成（異步性質）的行為是 javascript 所固有的。

可以通過顯式使用來解決該問題

onsubmit="return checkInput()"

代替

onsubmit="checkInput()"

使用 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>

更多信息：

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>'; ?>

要驗證 function 調用，只需在 addproduct.js 中添加警報

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