防止雙重提交並允許“必填”字段

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');
});