短期間に複数回HTMLフォームが送信されないようにするにはどうすればよいですか？

Question

私はログインを実装するために、この簡単なフォームを使用しています：私たちのQAチームはそれが内の行で2回二回のログインボタンをクリックするか、キーボード上の戻るボタンをハンマーすることも可能だということに気づい

<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> 

短期間。

これは、問題を引き起こす複数の要求をサーバーに送信することにつながります。

したがって、私は、次のJavaScriptコードでこれを防ぐことを試みた：

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

は、残念ながら、今のユーザー名+パスワードの値はもはやサーバーに送信されることはありません。私はそれは彼らが無効になっているからだと思っています。ブラウザは、「ええ、フィールドが無効になっていると、私はemを送信しません」と考えています。

この問題を回避するにはどうすればよいですか？

"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);

それが唯一のボタンが無効になります。