Question

我正在尝试在提交表单时检查是否所有字段都已填写。但是我注意到，没有所有填充字段的表单正在发送。因此，我开始进行调查，即使返回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'属性

调用函数

onsubmit =“ checkInput（）” 将仅调用checkInput（）函数并提交表单，而无需等待checkInput（）完成。

这种不等待功能/步骤完成（异步性质）的行为是javascript固有的。

可以通过显式使用

解决此问题

###@@@ Elapsed shift rows 8184 milli seconds ###@@@ Elapsed shift rows 8057 milli seconds

代替

onsubmit="return checkInput()"

使用onsubmit验证输入的工作示例：

onsubmit="checkInput()"

更多信息：

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

要验证函数调用，只需在addproduct.js中添加警报

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

HTML表单未在提交时调用JS函数

2 个答案: