提交后禁用按鈕后表單未提交

Question

您好，我希望在提交表單后禁用我的按鈕。 禁用按鈕有效，但它不執行 php 代碼。

我嘗試了在互聯網上發布的不同腳本，但它們都做同樣的事情：在不執行 php 代碼的情況下禁用按鈕。 因此，提交表單時，它需要回顯“test”，但不會回顯“test”。

當我刪除“e.preventDefault();”行時然后按鈕將不再禁用並且回聲仍然不顯示

代碼：


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

<body>
<h1>jQuery - How to disabled submit button after clicked</h1>

<form id="formABC" method="POST">
    <input type="submit" name="submit" id="btnSubmit" value="Submit"></input>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<input type="button" value="i am normal abc" id="btnTest"></input>

<script>
    $(document).ready(function () {

        $("#formABC").submit(function (e) {

            //stop submitting the form to see the disabled button effect
            e.preventDefault();

            //disable the submit button
            $("#btnSubmit").attr("disabled", true);

            //disable a normal button
            $("#btnTest").attr("disabled", true);

            return true;

        });
    });
</script>


<?php


if (isset($_POST['submit'])) {
    echo "test";
}

?>
</body>
</html>

Answer 1

如果您想在執行 php 代碼后禁用該按鈕，那么您需要在頁面重新加載時使其發生。 在“提交”事件期間運行的任何 JavaScript 都會在包含表單數據的請求發送到服務器以供 PHP 處理之前發生。 並且您當前的 JavaScript 將禁用該按鈕，這意味着它的值不會提交給服務器，因此您的if語句將不會運行。

因此，如果我們去掉 JS 代碼，讓它正常提交，那么當 PHP 檢測到數據已提交時，您可以使用該邏輯來根本不顯示按鈕，或者顯示它但將其禁用。

像這樣的東西應該可以工作：

<!DOCTYPE html>
<html lang="en">
<body>
  <h1>jQuery - How to disabled submit button after clicked</h1>

  <?php
    if(isset($_POST["submit"])) {
      echo "Thanks for submitting the form";
    }
    else
    {
  ?>
      <form id="formABC" method="POST">
        <input type="submit" name="submit" id="btnSubmit" value="Submit"></input>
      </form>
  <?php
    }
  ?>

  <input type="button" value="i am normal abc" id="btnTest"></input>
</body>
</html>

當表單剛剛提交時，該版本將完全省略表單和按鈕。

（當然請注意，這實際上並不能阻止某人向您的服務器發送請求並提交數據......它只會阻止他們在之前從同一瀏覽器窗口提交后立即通過您的網頁的 UI 執行此操作. 因此，這是否足以滿足您的目的取決於您的應用程序的目標以及您需要考慮的安全級別或驗證注意事項。）

Answer 2

e.preventDefault(); 完全停止表單提交。

如果你沒有那個，那么問題就變成了：

 if (isset($_POST['submit'])) {

submit 事件觸發的 JS 在從表單收集數據提交到服務器之前運行。

您正在禁用提交按鈕，這會阻止它成為成功的控件。 表單數據中只包含成功的控件，因此您在$_POST中不再有submit數據項，因此if語句返回 false。

您可以使用隱藏輸入來傳遞該數據，或者僅使用$_SERVER['REQUEST_METHOD']測試請求是否為 POST 。

提交后禁用按鈕后表單未提交

問題描述

2 個解決方案

解決方案1
2 已采納 2022-06-28 13:11:25

解決方案2
2 2022-06-28 13:14:04

提交后禁用按鈕后表單未提交

問題描述

2 個解決方案

解決方案1 2 已采納 2022-06-28 13:11:25

解決方案2 2 2022-06-28 13:14:04

解決方案1
2 已采納 2022-06-28 13:11:25

解決方案2
2 2022-06-28 13:14:04