buttonタグでsubmitさせない方法

formタグ内にあるbuttonを押したら意図しない挙動になったことはないでしょうか？

今回はそんな時の対処法をご紹介します。

サンプルコード

ボタンを押すとalertが表示されるサンプルコードです。

codepenにコピペすると動くので試してみてください！

<form onsubmit="alert('submit!'); return false">
  <!-- type指定なし -->
  <button type="">キャンセル</button>
  <button type="">送信</button>
</form>

このままだと、”キャンセル”、”送信”のどちらを押してもonsubmintが発火してalertが表示されます。

対策: buttonのtypeを指定する

buttonはtypeは指定しないとsubmitと判断されるため、

先ほどのコードだと、キャンセルを押してもonsubmitが発火します。

そこでonsubmintを発火したくないキャンセルの方にtypeとしてbuttonを指定します。

すると、キャンセルの方は押しても何も起きません。

<form onsubmit="alert('submit!'); return false">
  <!-- type指定あり -->
  <button type="button">キャンセル</button>
  <button type="">送信</button>
</form>

まとめ

formやbuttonで意図しない関数が実行されたときはtypeを確認してみましょう。