【HTML】buttonタグでsubmitさせない方法

フォームなどを作成する時に、formタグと複数のbuttonタグを用いると、

submitしたくないbuttonを押した時もsubmitされるときはないでしょうか？

この記事ではbuttonを押してもsubmitさせない方法をご紹介します。

buttonタグでsubmitさせない方法

submitされる理由ですが、buttonのtypeの初期値がtype=”submit”だからです。

そのため、submitしたくないbuttonにはtype=”button”を指定することで解決します。

フォーム内に「送信」と「キャンセル」ボタンがあるフォームを想定してます。

See the Pen
Untitled by Shungo Matsumura (@shungo0525)
on CodePen.

typeの指定がないボタンに関してはすべてsubmitを認識されます。

(submitのときはわかりやすいようにalertモーダルが出るようにしているのでクリックしてみてください。)

そのため、「送信」と「キャンセル1」を押すとformのonsubmitが実行されます。

それに対して「キャンセル2」を押してもbuttonを認識されonsubmitは実行されせん。

ある程度実装に慣れていても、たまにつまずくポイントなので、

buttonで意図しない挙動になった際にはtypeを確認してみてください。