ども。WEBおじさんです。
今日は、ちょっとお仕事で発生したトラブルから得た知識をひけらかそうと思いますｗ
といっても、もしかしたらこれは結構知られているかもしれないことなんですけどねｗ
今回の主役は、なんとあのブラウザ「Google Chrome」！
ブラウザトラブルと言ったら、もうIEかと思っちゃいますよねｗ
もうこの仕事初めて15年くらい経ちますけど、8年くらいはIE表示に困らされていますねｗ
最近やっと少なくなってきたと思っていたところにやってきましたからね。どんだけ使ってんだよ。
使ってる人もまぁまぁ人生のベテランの方々ですよね。
新しいのに変えるのが面倒というか、なんかそんなノリなんですよね。いざ変えたらどれもそれなりの機能があるからどれ使っても大差ないんですけどねｗ
話が逸れましたw
今回の主役は【Google Chrome】です。
そして、今回のは「トラブル」というくらいですから、バグなんです。多分。他のブラウザは問題なかったんですから。
みなさん、formって使いますか？
使いますよね？
結構な頻度で使いますよね。
メールフォームとか、検索したりとか。
まぁ、要はデータを送信するhtmlタグがformなんです。
で、htmlだけだとsubmitボタンで、JSだったらsubmitメソッドでフォームを送信するんですが、通常の送信であれば全く問題なく送信ができるんです。全然問題なく。
ただ、サイトに設置してあるメール送信フォームで「多重送信が目立ってきたから何か対策を打ってほしい」と言われ、送信ボタン（submitボタン）をクリックした後にdisabledで無効化すればボタンは押せなくなるから、それをやってみました。
結果、問題なくsubmitボタンは無効化され、メールも送信されており、挙動は全く問題なかったので、そのまま設置しました。
え？バグが出てるんじゃないかって？
実は、ボクのメインブラウザはFirefoxなんですｗ
だから気付かなかったんです。バグに。
で、本日電話がありまして。
「なんか、メールフォームがちゃんと動いていないんだけど。」
と言われまして。
内心「んなわけねーじゃん。こないだ動作チェックしたばっかだし。どうせまたなんか特殊な環境とか、よくわからない使い方してんだろ。」とか思ってましたｗ
で、使用環境とかどこのページとか、色々とヒアリングをしていると「ブラウザはGoogle Chrome」と言われまして。
まぁ、Chrome使ってる人多いですからね。別に珍しくない。
で、一通りヒアリングも終わったので、じゃあこっちで動作チェックして確認してからまた連絡しますね、ということで電話を切りました。
といことで、とりあえず自分の使用環境でメールフォームを動かしてみると、ちゃんと送信完了まで動く。
「やっぱな。」
なんて知ったかぶりして、一応相手の使用環境に合わせてヒアリングした通りにメールフォームを動かしていくとなんと！
バグが再現されたんです。。。
「うわ！やべ！なんだこれ！」
ソッコーでファイルを開いて該当部分を見てみたんですが、特におかしな記述があるわけでもなく。。
そりゃそうですよね。
だってFirefoxではちゃんと動いたんですから。
では、ここでそのソースを公開します。
jQueryです。
$(‘#send’).on(‘click’,function(){
$(this).prop(‘disabled’,true);
});
このまんまでした。
全然問題ないです。動いてるんですから。Firefoxではｗ
で、聞きましたよ。神（Google）に。
そしたら、すぐ出てきましたｗ
私の予想ではなかなか出てこないからどうやったら検索にヒットするんだ、という感じで悩んでる予定だったんですけど、すぐ出てきましたｗ
その記事によると、クリックしたときにdisabledにしてしまうとformの処理がその時点で止まってしまい、submitイベントまでたどり着かない、ということでした。
えー。
で、その人もなんかいろいろとデバッグしたりテストして解決されたらしいんですが、その方の書き方はゴリッゴリのJavaScriptでして、ちょっと拒否反応を起こしてしまったので、根本的なことを考えました。
要は、submitすればいいんです。
だから、そのゴリッゴリのJavaScriptにも書いてありましたが、submitイベントが開始してからsubmitボタンをdisabledにすればいいんだ、ということだったんですねー。
そうすれば、高橋名人よりも早く連射しないと多重送信はできませんよねｗ
そんな奴この世に存在しませんからｗｗｗ
ということで、WEBおじさん流の多重送信対策（恐らく全ブラウザ対応）はこちら。
$(‘#send’).on(‘submit’,function(){
$(this).prop(‘disabled’,true);
});
おわかりでしょうか。
clickからsubmitに変更してみました。
それで動作も問題なく、FirefoxでももちろんGoogle Chromeでもちゃんと送信できました。
多重送信も、超連射してみたけど送信されることなく、ちゃんと一度だけ送信される感じで、ちゃんと動作しているようです。
これにて無事解決！
意外と簡単でよかったー！
時間もかからず迅速な処置でお客さんも喜んでくれたし！
ということで、今日はここまで！
WEBおじさんでした！
