フォームの二重送信を防ぐ「正しい」方法を見つけようとしています。SO には関連する投稿がたくさんありますが、どれも私にとっては的を射ていません。以下に 2 つの質問があります。
これが私のフォームです
<form method="POST">
<input type="text" name="q"/>
<button class="once-only">Send</button>
</form>
二重送信を無効にする最初の試みは次のとおりです。
$(document).ready(function(){
$(".once-only").click(function(){
this.disabled = true;
return true;
});
});
ここで提案されているアプローチは次のとおりです。JS/Jquery を使用して投稿後にボタンを無効にするその投稿では、送信要素はボタンではなく入力である必要があると示唆していますが、両方をテストしても違いはありません。次のフィドルを使用して自分で試すことができます。http://jsfiddle.net/uT3hP/
ご覧のとおり、これによりボタンが無効になりますが、フォームの送信も防止されます。送信要素がボタンと入力要素である場合。
質問1：このクリック ハンドラーがフォームの送信を停止するのはなぜですか?
さらに検索してみると、この解決策が見つかりました（ダブルクリックを防ぐために送信ボタンを無効にすると、フォームが送信されないのはなぜですか?）
if($.data(this, 'clicked')){
return false;
} else{
$.data(this, 'clicked', true);
return true;
}
次のフィドルを使用してこれを操作できます:http://jsfiddle.net/uT3hP/1/
これは確かに機能しますが...
質問2：これが私たちにできる最善のことでしょうか?
これは初歩的なことだと思いました。アプローチ 1 は機能しませんが、アプローチ 2 は機能しますが、私はそれが気に入らず、もっと簡単な方法があるはずだと感じています。
ベストアンサー1
シンプルで効果的な解決策は
<form ... onsubmit="myButton.disabled = true; return true;">
...
<input type="submit" name="myButton" value="Submit">
</form>
ソース：ここ