メールフォーム作成時の備忘録 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()でメール送信の流れです。

以下、簡略化したソース

原因は、<button>のtypeがsubmitになっていることでした。
IEの場合は、type=”submit” で1回目の送信、submit() で2回目の送信をしてしまうようです。

<form>とIE(インターネットエクスプローラ)

IE(インターネットエクスプローラ)では<form>タグを入れ子にしてしまうと正常動作しません。
他のブラウザは動作はします。

挙動としてはIE(インターネットエクスプローラ)が正しく解釈しているのですが、他のブラウザでは動作するので、IEの仕様に合わせてほしいです。

IEでのテストはまだまだ必須

デフォルトのブラウザがEgdeになったWindowsですが、IE11(インターネットエクスプローラ11)のシェアはまだ20%ほどあるので無視することができません。

CodeCampCodeCamp

jQueryやJavaScriptで<form>のsubmitを行う場合は注意が必要です。

コメントする

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)