エンジニアのひよこ_level10

【毎日更新!】新卒2年目エンジニアブログです! プログラムだけじゃなく、マネジメントとかも書いていきたい!

【IE】Formタグのsubmitで二重送信されてエラーが出る【294日目】

こんなときがありました

<form>
    <input></input>

    <button onClick="submit();"></button>
</form>

こんな感じの構成で、submitが想定通りに動かなかった。

私のときは、Laravelのバリデーションのエラーで、サーバーサイドを疑いそうになった。
ブラウザの問題なのに。

IEは二重送信をそのまま送る

  1. buttonタグのonClick()でsubmit(他ブラウザはこれで終わる)
  2. buttonタグのデフォルト機能で、クリック時にsubmitするのが動作(IEはこれも動く)

これが原因でエラーが出ていました。

解消方法

JS側でsubmitしている行、例えば

(this).parents('form').submit();

の記述のあとに、

return false;

をする。

なんで?

return false によって、このあと発火されるデフォルトのbuttonの機能を止めることが出来る。

これは、aタグでも起こることなので、JSのあとにHTMLのデフォルトの機能を動かしたくないときに有効。