【jQuery】フォームの二重送信を防止するシンプルな方法

フォームの「送信」ボタンを連続で押すとメールが多重送信されちゃうから、それを阻止したいとなった。

独自でフォームを作っているなら、phpでトークンを使って検証して動作を制御なんてこともできるんですが、WordPressでプラグインとかを使っている場合、phpをいじるのはちょっと現実的ではない。

というわけで、今回はjQueryで３分でできちゃう方法をご紹介します。

実装

HTML

フォームのHTML。とりあえずサブミットボタンにIDをつけましょう。

<input type="submit" id="double" value="送信する">

1	<input type="submit" id="double" value="送信する">

余談ですが、cssでスタイリングするときはclass、javascriptで動かす場合はidにしておくとわかりやすくていいですよ。また、classじゃなくてidで動かしたほうが圧倒的に処理が速いみたいです。僕はスタイリングの際はほとんどidを使用しません。

jQuery

たった３行。

$('#double').on('click', function () {
  $(this).css('pointer-events','none');
});

$('#double').on('click', function () {

$(this).css('pointer-events','none');

});

“#double”をクリックしたら、それに{pointer-events:none;}をつけてるだけですね。シンプルー！

pointer-events: none;はマウスホバーやクリック等のイベントの一切を禁止する神のようなプロパティで、便利すぎるのでちょいちょい使ってます。ボタンを１回クリックしたら、cssでそれ以降のイベントを禁止する。簡単ですね。

欠点

例のごとく、IE10以下では使えません。まぁ、もういいんじゃない？

安全性も動作も完璧に仕上げたいのであれば、phpでがんばるしかないかなと思いますが、実装費用に比べて効果はどんなものかといったところで相談しましょう。けっこう大変ですよ。

disabledじゃだめなの？

フォームのパーツの操作を全面的に禁止する”disabled”というものがありますよね。実は僕も最初これを使ってやってみたんですが、サブミットボタンがdisabledになった瞬間、フォームの送信も中断されてしまうんですね。送信ボタンを押しても何も起きない。そして２度とボタンは押せないのである。

巷ではこれを回避するために、ボタンが押されたらdisabledとなると同時に、ajaxで別途フォームの内容を送信するという方法が紹介されていましたが、これまたWordPressプラグインでやるのはきついです。

cssでイベントを禁止するだけなら、フォーム送信を妨げることもありません。

以上、現場からでした。