Question

从需要电子邮件地址的简单表格开始：

<form action="NextPage.php" method="post">
    <input type="email" name="contact[email]" required id="frmEmailA" autocomplete="email">
    <button type="submit">Submit</button>
</form>

（出于故障排除的目的，已删除了诸如标签和其他字段之类的非必需功能。）

前段时间，我在重复提交时遇到了麻烦。我记得尝试过许多不同的解决方案，但我发现here是唯一可行的解决方案。

因此，我实现了该解决方案：

<form action="NextPage.php" method="post">
    <input type="email" name="contact[email]" required id="frmEmailA" autocomplete="email">
    <button type="submit" onclick="this.form.submit(); this.disabled = true;">Submit</button>
</form>

这是一个多月前的事，直到现在我都忘记了。 “ {required”属性现在不起作用，因为this.form.submit();似乎覆盖了required。

许多解决此问题的方法需要大量插件或额外功能，但是有一个优雅的解决方案吗？

最优雅的解决方案可能是纯HTML，但我希望我也需要JavaScript。我想尽可能避免下载库或安装插件。

示例：

我想要的是一种不会在双击时提交两次的表格，而是使用required属性。理想情况下，无需学习新的库或标记语言。如果需要，我不介意编写几个冗长的javascript函数。即使是重定向到下一页的页面也不会太优雅。

（我也了解PHP和SQL，但我认为它们都不会对这里有所帮助。）

这有可能吗？

Answer 1

与其在按钮的onclick属性中禁用该按钮，不如在表单的onsubmit属性中禁用它。

您需要给“提交”按钮命名，然后可以在this.<name>属性中将其称为onsubmit。或者，您可以给它一个ID，然后可以使用document.getElementById("<id>")来引用它。

<form action="NextPage.php" method="post" onsubmit="this.submitButton.disabled = true;">
  <input type="email" name="contact[email]" required id="frmEmailA" autocomplete="email">
  <button type="submit" name="submitButton">Submit</button>
</form>

您的代码需要调用this.form.submit()的原因是，单击禁用的按钮不会触发默认的表单提交。但是，如果将禁用代码放在onsubmit属性中，则仅在表单提交过程开始后才运行。

Answer 2

对于jQuery粉丝：

$('form').submit(function(){
   $(':submit').attr('disabled','disabled');
});

防止重复提交并允许“必填”字段

2 个答案: