提交后禁用按钮后表单未提交

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