送信ボタンの連続クリック（連打）による多重送信を回避（防止）する（jQueryでdisabled）

HOME > 送信ボタンの連続クリック（連打）による多重送信を回避（防止）する

送信ボタンの連続クリック（連打）による多重送信を回避（防止）する（jQueryでdisabled）

2017/04/24

メールフォームなどで送信ボタンを連打されてしまうと、多数の送信処理を実行されてしまうことがあります。

ただ実際には送信ボタンを押したらすぐにページ遷移してしまうので、よほど連打しない限りはそういったことは起きにくいです。これは主にFirefoxを除くブラウザで確認できています。
※実際にはFirefoxでも出来てしまうけど、他のブラウザに比べて発生しずらい印象でした。

まぁそもそもそこまで頻発するような性質のものでもないため、必ずしも対策を行う必要はないとも考えています。
あくまで必要に応じて以下を参考の上で対応いただければと思います。

主な発生要件

※以下に当てはまる場合に発生すると考えられます。

明らかに意図を持って連打する
（正規のユーザーがあえてそういったことをすることは考えにくいですがね）
項目数が膨大にある、処理するものが多い、またはサーバーのスペックが低い、アクセスが集中しているなど、サーバーの処理が遅いと当然連打されるリスクは高まります。
これは主に心理的な問題でもあります。送信ボタンを押してもすぐにページ遷移しないとユーザーはクリックできたかどうかが分からずに再びボタンを押してしまう傾向にあると思います。
ダブルクリックしてしまう。これは単にその人の癖・・・なのでどうしようもないんですが。。。
現実的にはこれが一番の原因と考えられます。

対処法

ネットで調べてみると様々な方法があるようですが、
最も手っ取り早くシンプルなものとして、送信ボタンをクリックしたらjQueryでボタンを無効化（disabled）してしまうというのが考えられます。

以下のjQueryでOKですね。
ちなみにjQuery依存なのでjQuery本体の読み込みは必須です。
またjQueryのバージョンが1.6以上である必要があるのでご注意下さい。

具体的にはフォームと送信ボタンがあるファイルのhead部にでも以下ソースをまるっとコピペすればOKです。
※当サイトで配布しているメールフォームプログラムの場合、mail.phpです。
※送信ボタンが一般的な「input type="submit"」ではない場合は適宜セレクタを変更下さい。

jQueryでもあるということで、これで問題が出る可能性はかなり低いと考えられます。
またこのサイトのフォームでも実際に使用しています。

【重要】ただし、これは主に当サイトで配布しているメールフォームプログラムでの使用を想定しています。
理由として、ものによっては送信ボタンを押した後に何らかのチェックを行なうようなものもあるでしょう。
その場合、再び送信ボタンを押すことができなくなりますのでこの手法は適さないと思います。ご注意下さい。
※まぁこのあたりは動作確認すればすぐに気づくことだと思いますが。

当サイトのメールフォームでは確認画面の段階で必要なチェック（必須チェックなど）を行い、送信ボタンを押したときには必ず送信される仕様になっているため、これが最適であるということになります。

いずれにしてもお問い合わせなどはサイトにとって非常に重要なものですので、必ずご自身で十分な動作確認を行うことを強くお勧め致します。

何らかの問題があればご報告いただければありがたいです。