如何防止 HTML 表單在短時間內連續多次發送？

Question

我正在使用這個簡單的表單來實現登錄：

<form action="/handleLogin/" name="login" method="post">
    <div>
        <label for="userid">Username</label>
        <input type="text" id="userid" name="identifier" value="" pattern="\s*([^@\s]+@[^@\s]+|\d+)\s*" data-parsley-required>
    </div>
    <div>
        <label for="userpassword">Password</label>
        <input type="password" id="userpassword" name="credential" data-parsley-required>
    </div>
    <button id="login-button" class="button" type="submit">Login</button>
</form>

我們的 QA 團隊注意到，可以在短時間內連續兩次單擊登錄按鈕或敲擊鍵盤上的返回按鈕。

這會導致向服務器發送多個請求，從而導致問題。

因此，我嘗試使用以下 JavaScript 代碼來防止這種情況：

$('form[name="login"]').on('submit', function() {
    $("#userid, #userpassword, #login-button").attr("disabled", true);
});

不幸的是，現在用戶名 + 密碼的值將不再發送到服務器。 我想那是因為它們被禁用了，瀏覽器認為：“好吧，如果這些字段被禁用，我不會發送它們”。

我該如何解決這個問題？

我想過使用“return false”取消原始提交事件； 並手動發送表格的副本，但我認為這不是一個很好的解決方案。

Answer 1

嘗試這個：

$('form[name="login"]').on('submit', function() {
   $("#login-button").attr("disabled", true);
   $("#userid, #userpassword").attr("readonly", true);
});

Answer 2

用

$('button[type=submit], input[type=submit]').prop('disabled',true);

代替：

$("#userid, #userpassword, #login-button").attr("disabled", true);

它只會禁用按鈕。

演示鏈接