javascript - 防止双重表单提交不起作用

Question

我试图在提交后禁用按钮以防止重复提交。我添加了onsubmit="add_orders.disabled = true; return true;"表单标签，但提交表单后，按钮被禁用，网站正在重新加载，但没有任何变化(表单未提交)。我的代码:

<form method="post" action="add.php" onsubmit="add_orders.disabled = true; return true;">
                          <div class="card-body">
                            <div class="modal-header">
                                </div>
                                <p class="card-text">
                                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" name="orders_query" placeholder="Wklej treść zapytania SQL z zamówienia..." required></textarea>
                                </p>
                              </div>
                              <div class="card-footer">
                                <button  type="submit" type="button" class="btn btn-raised btn-secondary" name="add_orders">Dodaj zamówienie</button>
                              </div>
                            </div>
        </form>

PHP:

if (isset($_POST['add_orders'])) {
    $tresc = $_POST['orders_query'];

    if (empty($tresc)) { array_push($errors, "Query cannot be empty!"); }
    if (count($errors) == 0) {
        if (mysqli_multi_query($con, $tresc)) {
            $_SESSION['success'] = "Added!";
        } else {
            echo "Error!" . mysqli_error($conn);
        }

    }
}

Answer 1

一个按钮上不能有两种类型

您正在使用按钮名称来测试表单是否在 PHP 中提交，因此您需要不禁用该按钮。改为更改 css 中的事件

window.addEventListener("load", function() {
  document.getElementById("orderForm").addEventListener("submit", function(e) {
    e.preventDefault(); // remove when tested
    document.querySelector("[name=add_orders]").classList.add("stopClick")
  })
})

.stopClick {
  pointer-events: none;
}

<form method="post" id="orderForm" action="add.php">
  <div class="card-body">
    <div class="modal-header">
    </div>
    <p class="card-text">
      <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" name="orders_query" placeholder="Wklej treść zapytania SQL z zamówienia..." required></textarea>
    </p>
  </div>
  <div class="card-footer">
    <button type="submit" class="btn btn-raised btn-secondary" name="add_orders">Dodaj zamówienie</button>
  </div>
</form>

OP之前的回答显示了PHP

如果您只是想禁用，可以这样做

window.addEventListener("load",function() {
  document.getElementById("orderForm").addEventListener("submit",function(e) {
    e.preventDefault(); // remove when tested
    document.querySelector("[name=add_orders]").disabled=true;
  })
})

<form method="post" id="orderForm" action="add.php" >
  <div class="card-body">
    <div class="modal-header">
    </div>
    <p class="card-text">
      <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" name="orders_query" placeholder="Wklej treść zapytania SQL z zamówienia..." required></textarea>
    </p>
  </div>
  <div class="card-footer">
    <button type="submit" class="btn btn-raised btn-secondary" name="add_orders">Dodaj zamówienie</button>
  </div>
</form>