如何防止 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);

它只会禁用按钮。

演示链接