メールフォームの送信ボタン連打対策とブラウザの戻るでの2重送信対策
メールフォームを設置するときは入力画面→確認画面→完了画面のタイプのメールフォームです。 僕が主に使わせていただいているのはWordpressではMW WP Form、CMSを使わない場合はTransmitMailを使わせていただいています。 両者共にブラウザの戻る機能で確認画面に戻りもう一度送信ボタンを押すとメールが送れない仕様だったはずなのですが、Mac版のSafariで送れてしまいました。ChromeやFirefoxは大丈夫でした。検証したのが随分前だったので、記憶に自信はもてません。他のブラウザは大丈夫だったのでSafariの仕様が変わったのかな？とりあえずjQueryでブラウザの戻るで戻った場合ページをリロードするようにしてみました。
確認画面に以下を記述すればOKです。
|
1 2 3 4 5 |
<script> jQuery(function($){ $(window).unload(function(){}); }); </script> |
これで２重送信はできなくなりました。
送信ボタン連打対策
送信ボタンを連打すると複数メールが送信されましたので、そちらもjQueryで対策します。 こちらは２つの対策方法を思いつきました。
- 送信ボタンを押すとモーダルウィンドウでローディングを表示させる。
- 送信ボタンを押すとボタンを無効化する。
送信を押すとモーダルウィンドウでローディングを表示させる。
＃gardがモーダルウィンドウで.subm inputが送信ボタンです。
js
|
1 2 3 4 5 6 |
jQuery(function(){ $("#gard").css("display", "none"); $(".subm input").click(function(){ $("#gard").css("display", "block"); }); }); |
css
|
1 2 3 4 5 6 7 8 9 |
#gard{ width: 100%; height: 100%; bottom: 0; position:fixed; z-index: 99; text-align: center; background: url('../images/gard.png') 0 0 repeat; } |
送信ボタンを押すとボタンを無効化する
|
1 2 3 4 5 6 7 8 9 |
jQuery(function(){ var flag = true; $(".subm input").click(function(){ if(flag){flag = false; }else{ $(this).attr("disabled", "disabled"); } }) }); |
これでボタン連打も回避できました。
- 2014年04月04日金曜日
- ：Naruhiko Wakai
comments