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

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>

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

这个问题的很多解决方案都需要很多插件或额外的功能，但是有没有一个优雅的解决方案？

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

例子：

• Solution using angularJS
• Solution using jQuery

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

（我也知道 PHP 和 SQL，但我认为它们都不会在这里提供帮助。）

这可能吗？

Answer 1

不要在按钮的onclick 属性中禁用按钮，而是在表单的onsubmit 属性中禁用它。

您需要为提交按钮命名，然后您可以在onsubmit 属性中将其称为this.<name>。或者你可以给它一个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');
});