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

Question

我有一个简单的接受表单，它有一个用户单击的按钮。在表单提交时，我有一个 php 脚本，它对一个 python 脚本进行命令行调用，该脚本将记录添加到我的数据库中。除了一件事之外，一切都很好：我不希望用户能够多次单击按钮。如果我使用 javascript 禁用按钮，我的 if (isset($_POST['submit'])) 语句不会评估为 true，然后我的 php 不会运行如果我在 php 脚本中调用 javascript 函数，用户仍然有机会在 php 脚本调用该函数以禁用该按钮之前多次单击该按钮。这允许他们在我的数据库中创建多条记录。我的想法是让我的 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'功能（它基本上做同样的事情，但是在一个计时器上。它使用起来有点简单，因为它只需要在你想要禁用的任何按钮上设置类'nobounce'，虽然它是在计时器上，发布完成后启用按钮并不准确。

    $('.nobounce').click(function () {

        $(this).attr("disabled", true);

        setTimeout(function () {

            $('.nobounce').removeAttr("disabled");

        }, 3000);

    });

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

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