読者です 読者をやめる 読者になる 読者になる

ITの隊長のブログ

ITの隊長のブログです。いや、まだ隊長と呼べるほどには至っていないけど、日々がんばります。CakePHPとPlayFrameworkを使って仕事しています。最近はAngular2をさわりはじめたお(^ω^ = ^ω^)

【JavaScript】submit二重送信防止

JavaScript jQuery

スポンサードリンク

んー。なんか腑に落ちない事象だけど。とりあえずメモ。

そもそもなにやりたいの?

とある問い合わせフォームにて、submitを二重送信されることが多かったので止めてほしいとのこと。(スマホとかだと連打しちゃうよねー。押しづらいし)

ちなみに、対象のフォームはキーボードのEnterで送信されないようにonsubmit="return false;"になっているので、jQueryでonメソッドを使った手法でsubmitするようにしている。

        $('#submit').on({
            click : function() {
                $('#submit').text('送信中').css('background', '#ccc'); // 送信 => 送信中に変更して「送信してるよ!」感を出す
                $('form').removeAttr('onsubmit').submit(); // onsubmitを空にして送信する
            }
        });

できた

htmlの属性にdisabledというのがある。それをsubmitの要素に仕込ませばおkだった。

        $('#submit').on({
            click : function() {
                $('#submit').attr('disabled', 'disabled').text('送信中').css('background', '#ccc'); // attr()でdisabled属性を追加
                $('form').removeAttr('onsubmit').submit();
            }
        });

できなかった

実は上の処理は1時間がんばったあとに見つけたものだった。

最初はunbind()を使っていた。

        $('#submit').on({
            click : function() {
                $('#submit').unbind().text('送信中').css('background', '#ccc');
                $('form').removeAttr('onsubmit').submit();
            }
        });

だが、何故かうまくいかない。

そーいえば、on()ってもともとはbind()だったなーってことを思い出し、on()と対象的なものを調べたら案の定off()というものがあった。

        $('#submit').on({
            click : function() {
                $('#submit').off('click').text('送信中').css('background', '#ccc');
                $('form').removeAttr('onsubmit').submit();
            }
        });

しかし、これもうまくいかず(´・ω・`)

んー、じゃあ上書きしちゃえばいいんじゃね?ということで...

        $('#submit').on({
            click : function() {
                $('#submit').off('click').on('click', function(){}).text('送信中').css('background', '#ccc');
                $('form').removeAttr('onsubmit').submit();
            }
        });

やけくそである。・・・が!

うまくいかず(´;ω;`)ブワッ

えーかげんよくわからん。

しかしブレークポイント$('form').removeAttr('onsubmit').submit();に付与しデバッグしてみたところ、初回のクリックには引っかかるが2回目以降のクリックにはブレークポイントが反応しない・・・!

が、あいかわらずブラウザ上では連打できる。。。?

何だこの挙動?

挙句の果てには

        $('#submit').on({
            click : function(e) {
                e.preventDefault();
                $('#submit').off('click').on('click', function(){}).text('送信中').css('background', '#ccc');
                $('form').removeAttr('onsubmit').submit();
            }
        });

e.preventDefault()を使ってみても何もかわらない。なにこれ怖い。

on()で付与したclickイベントがどこかに保持されているのか・・・?

Javascriptイマイチわからん。。。

というわけで、disabledにしましたとさ。いつか解明したい。