Javascript 防止重复提交并允许；“必需”；领域

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

<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（）似乎覆盖了所需的

这个问题的很多解决方案都需要很多插件或附加功能，但有一个优雅的解决方案吗

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

示例：





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

（我也知道PHP和SQL，但我认为这两种语言在这里都没有帮助。）

这可能吗？
与其在按钮的
onclick
属性中禁用按钮，不如在表单的
onsubmit
属性中禁用它

您需要为submit按钮指定一个名称，然后可以在
onsubmit
属性中将其称为
this.
。或者您可以给它一个ID，然后您可以使用
document.getElementById（“”
）来引用它



提交
对于jQuery风扇：

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

投反对票，不发表评论？我在尽力写最好的问题。如果有人对如何改进这一点有指导意见，或者重复的地方在哪里，我将非常感谢学习。这确实是一个非常优雅的解决方案。我会给它一个测试，如果有效的话，给你一个向上投票和绿色勾号。好的，一个真实项目的精确副本/粘贴：
我删除了
onclick=“this.form.submit（）；this.disabled=true；”“
双击仍然会导致双重提交。我做错了什么？你把
name=“submitButton”
添加到按钮上了吗？啊，那会有不同吗？好了，现在可以了。我不知道为什么，但我很高兴它能工作。在表单中，所有命名元素都是表单元素的属性。因此，
this.submitButton
引用具有
name=“submitButton”
的元素。