禁用提交按钮，同时仍允许 PHP 脚本在提交表单时运行

Question

我有一个简单的接受表单，它有一个用户单击的按钮。 在提交表单时，我有一个 php 脚本，该脚本对 python 脚本进行命令行调用，该脚本将记录添加到我的数据库中。 除了一件事之外，一切都很好：我不希望用户能够多次单击按钮。

• 如果我使用 javascript 禁用按钮，我的 if (isset($_POST['submit'])) 语句不会评估为真，然后我的 php 不会运行
• If I call a javascript function within the php script, the user still has an opportunity to click the button multiple times before the php script calls the function to disable the button. 这允许他们在我的数据库中创建多条记录。

我的想法是让我的 python 脚本添加记录，首先检查数据库中是否已经存在具有相同信息的记录，如果没有则仅创建新记录。 我担心的是，如果用户多次单击提交按钮，可能是多个 php 将执行多个调用，第二个将在第一个调用创建新记录之前检查是否已创建记录。
换句话说，也许 php 调用将同时工作（异步？）并且检查数据库不会涵盖同时创建记录的另一个调用。 这是一个有效的担忧吗？

关于如何禁用或隐藏我的按钮但仍然运行我的 php 脚本还有其他想法吗？ 谢谢你。

---

对于未来的观众，我最终使用的解决方法是基于 Teemu 在下面的评论中所说的。 在将表单提交中的新记录添加到数据库之前，我检查了是否已经存在包含该信息的记录。 如果没有，我添加了一条记录，如果是，则单击按钮什么也没做。 正如 Teemu 所提到的，此检查无论如何都是必要的，以涵盖即使页面上没有按钮也可以发布的多个提交。 这就是我所说的“解决方法”而不是答案，因为用户仍然可以多次单击提交按钮，但只有第一次单击有效。 在 php 完成运行后，该按钮会自行隐藏。

Answer 1

您只需要在发送提交后设置disabled 。 您可以使用零延迟的setTimeout来实现：

$('.myForm').submit(function () {
  setTimeout(() => {
    $(this).find('[type=submit]').prop('disabled', true)
  }, 0)
})

然后，将发生以下情况：

• 表单提交事件被触发，因为用户单击了按钮或按下了Enter
• 浏览器正在调用您的submit处理程序
• 你正在“武装”你的超时
• 浏览器正在向服务器提交表单（带有提交按钮的值）
• 之后您的超时立即触发，禁用按钮

请注意，我在表单上使用了submit处理程序，而不是在按钮上使用了click处理程序，因为当焦点位于表单字段上时，可以通过按Enter提交表单，而不仅仅是通过单击按钮。 然而，由于表单提交的工作方式，禁用该按钮也将阻止通过Enter提交。

Answer 2

我最近遇到了类似的情况，有时我会双击“反弹”。 这是我处理它的两种方法：

1）只需禁用按钮，将 AJAX 数据发送到 PHP 并恢复按钮成功

$("#save_button").click(function (e) {
            e.preventDefault();
            $(this).attr("disabled", true);
            var settings = $('form').serialize();
            console.log("settings are ", settings);
            $.post("data/ajax.php", settings, function (data) {
                data = JSON.parse(data);
                console.log("data back from save is ", data);
                $("#save_button").removeAttr("disabled");
            })
        });

2）创建一个'nobounce' function （它基本上做同样的事情，但是在一个计时器上。它使用起来有点简单，因为它只需要在你想要禁用的任何按钮上设置 class 'nobounce'，尽管它是在计时器上，发布完成后启用按钮并不准确。

    $('.nobounce').click(function () {
        $(this).attr("disabled", true);
        setTimeout(function () {
            $('.nobounce').removeAttr("disabled");
        }, 3000);
    });

这些都是 jquery 方法 - 将表单保留在页面上。 从您的描述看来，您可能正在通过 PHP 提交表单（请，如果这不是您需要的答案，请提供一些您正在使用的代码，以便更清楚。），如果您通过 PHP 提交。 那么对原始问题的一些评论是非常有效的。

希望这会有所帮助 - 再次，如果没有，请提供一些代码，您可以获得更直接的帮助。