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

Question

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

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

（已删除标签和其他字段等非必要功能以进行故障排除。）

前段时间，我遇到了双重提交的问题。 我记得尝试了许多不同的解决方案，但我在这里找到的唯一一个工作。

所以，我实现了这个解决方案：

<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。 如果可能的话，我想避免下载库或安装插件。

例子：

• 使用angularJS的解决方案
• 使用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');
});