メールフォーム作成時の備忘録 button type
メールフォームはプログラムではよくある案件です。
今回、一部のIE11（インターネットエクスプローラ11）で起きた現象への対処法の備忘録です。
IE11（インターネットエクスプローラ11）でメールが二重送信されてしまう
PHPの関数「mb_send_mail()」でメールを送信しているのですが、「送信」ボタンをクリックするとなぜかメールが二重送信されてしまいます。
SafariやFirefox、Edgeなどは正常に1通のみの送信ですが、一部の環境のIE11（インターネットエクスプローラ11）だけ二重送信されてしまいます。
メール二重送信の原因
プログラム、HTMLを細かく確認してみました。
<button>をクリックするとjQueryでバリデーションなどの処理をし問題なければ<button>をdisabledに変更し $(this).parent().submit();でPOST送信しています。
送信されたデータを受け取ったPHPがmb_send_mail()でメール送信の流れです。
以下、簡略化したソース
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <?php if( $_SERVER['REQUEST_METHOD'] == 'POST' ){ mb_send_mail(....); } ?> .... .... .... <form> .... .... <button type="submit" id="send_btn"> </form> .... <script> $('#send_btn').on('click',function(){ $('#send_btn').prop('disabled', true); $(this).parent().submit(); }); </script> |
原因は、<button>のtypeがsubmitになっていることでした。
IEの場合は、type=”submit” で1回目の送信、submit() で2回目の送信をしてしまうようです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <?php if( $_SERVER['REQUEST_METHOD'] == 'POST' ){ mb_send_mail(....); } ?> .... .... .... <form> .... .... <button type="button" id="send_btn"> </form> .... <script> $('#send_btn').on('click',function(){ $('#send_btn').prop('disabled', true); $(this).parent().submit(); }); </script> |
<form>とIE（インターネットエクスプローラ）
IE（インターネットエクスプローラ）では<form>タグを入れ子にしてしまうと正常動作しません。
他のブラウザは動作はします。
1 2 3 4 5 6 7 8 | <form> <form> <input type="submit"> </form> <input type="submit"> </form> |
挙動としてはIE（インターネットエクスプローラ）が正しく解釈しているのですが、他のブラウザでは動作するので、IEの仕様に合わせてほしいです。
IEでのテストはまだまだ必須
デフォルトのブラウザがEgdeになったWindowsですが、IE11（インターネットエクスプローラ11）のシェアはまだ20%ほどあるので無視することができません。
jQueryやJavaScriptで<form>のsubmitを行う場合は注意が必要です。