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