フォームの二重送信防止をjQueryで

ボタンをダブルクリックされることで発生するフォームの二重送信をクライアントサイドで防ぐには、JavaScriptを使ってonsubmitかonclickをハンドリングしてボタンをdisabledにしてからsubmitすれば良いだけなので、書くのは簡単。jQueryのプラグインもいくつか見つかるんだけど、ちょっと問題が…

「押したボタンのデータが渡らない」

disabledにした要素は送信されないから…

何が困るかと言うと、１つのフォームに複数のボタンを置いて、受信したnameの値に応じて処理を振り分ける。ということができなくなる。

この問題に対応した、二重送信防止jQueryプラグインを作りました。

• ダウンロード（jquery.disableOnSubmit.js）

使い方は、こんな感じで、

$(function() {
  $("form").disableOnSubmit();
});

フォーム要素を指定してdisableOnSubmit()を呼ぶだけです。これでそのフォームの二重送信が防止できます。

参照）submit ボタン disable 技の罠 - naoyaのはてなダイアリー

コメント

2012/1/28 19:16 from いくみ

これは素晴らしいです!! 使わせていただきます。

2012/3/ 2 16:03 from ぷ

まさに探していました！！
使わせていただきます～。