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

Question

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

• 如果我使用 JavaScript 禁用该按钮，我的 if (isset($_POST['submit'])) 语句的计算结果不会为 true，然后我的 php 不会运行
• 如果我在 php 脚本中调用 javascript 函数，则在 php 脚本调用该函数以禁用该按钮之前，用户仍然有机会多次单击该按钮。这允许他们在我的数据库中创建多个记录。

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

是否有其他想法可以禁用或隐藏我的按钮但仍然运行我的 php 脚本？ 谢谢。

<小时/>

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

Answer 1

您所需要的只是在发送提交后设置禁用。您可以使用零延迟的 setTimeout 来实现这一点:

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

然后，将会发生以下情况:

• 由于用户单击按钮或按Enter而触发表单提交事件
• 浏览器正在调用您的submit处理程序
• 您正在“准备”超时
• 浏览器正在将表单提交到服务器(使用提交按钮的值)
• 超时后立即触发，禁用按钮

请注意，我在表单上使用了 submit 处理程序，而不是在按钮上使用 click 处理程序，因为可以通过按 Enter 同时焦点也位于表单字段上，而不仅仅是通过单击按钮。然而due to how form submission works ，禁用该按钮还会阻止通过Enter提交。