2011/08/22HTMLフォームのsubmitボタンを連続でクリックしてしまうと、意図しないデータが多重に送信されてしまうという問題があります。これを防止するために、JavaScriptで二重にクリックするのを抑止する方法があります。シンプルなしくみだと、一度クリックされたらフラグをオンにしてボタンクリックを無効にしたり、押されたボタンにdisabledをセットして非活性にしてしまうなど、比較的簡単な処理で済みます。深いところまで突き詰めて完全に抑止しようとすると、めんどくさい設計と処理を実装が必要となります。コーディング規約やフレームワークのルールなどで制限されている環境だと、さらに難しい問題となってふりかかります。今回私が実装した環境では以下のような前提がありました。複数のボタンが存在しサーバ処理を分岐しているフラグを用いた方法だと、複数個所にJSを埋め込む必要があったので、却下しました。disabledをセットする方法では押されたボタンの情報はPOSTされないので、サーバ側でどのボタンが押されたのか判断できなくなるため、却下しました。そこで、考え出したのが以下の方法です。「type=”image”」のボタンが押されたら、そのボタン自信は非表示にし、代わりに画像を表示します。以下のように複数のボタンがあるとします。/>name属性の値を分けることでサーバ側でボタン判定できます。今回はその詳細については割愛します。起票時にjQueryを読み込み、以下のコードを実行します。/>');});ボタンがクリックされたら、そのボタンを非表示にすると同時に、画像のパスを抜き出してimgタグを挿入します。2回目にクリックする場合には画像がクリックされているだけなので、処理は実行されません。それにしても、そもそも、POSTの際に画面が切り替わる前に2つ以上のリクエストを発行する必要ってあるのでしょうか。必要がないのであれば、HTMLの仕様として、もしくは、ブラウザサイドで2重クリックを防止してもいいような気がします。本書は、実践で即役立つテクニックと開発ノウハウ、つまづきやすい・ハマりやすいポイントを徹底解説した「JavaScriptを利用するWebプログラマ必携の逆引き集」です。JavaScript(ECMAScript)の基本構文や新記法といった基礎的な知識から、オブジェクト指向、組み込みオブジェクト、関数、オブジェクト指向構文、DOM、ブラウザーオブジェクトなどの定石・応用テクニック、開発に役立つツール類まで、著者の経験に基づいた実践の場で必ず役立つノウハウ、レシピを提供します。JavaScriptをいまいち使いこなせていないと感じる方や中級レベルに向けてしっかり足場固めをしたい方、JavaScriptをもっと活用したい方などにおすすめの一冊です。アスキー・メディアワークスWeb制作に必要なjQueryの使い方を効率よくしっかり学べる。2.0など最新のトレンドにも対応。サンプルを100本超提供。1.9対応特製チートシート付き。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。inc.Profileサイト「helog」は私がWeb制作に携わるなかでの経験を中心に記しています。前にも発生したんだよなぁ。」といった無駄な時間を省くことを目的に書き始めました。「へ」の「ログ」です。個人的な技術メモのようなものですが、みなさんの何か役に立つことがあればこの上ないです。