formタグの中にbuttonを作成しても送信しないようにする

2022/05/28に公開

2つの機能を1つに統合しようとしていた時にtableタグをformタグで囲ったところ、
テーブルの中でajax通信をするボタンをクリックするとフォーム送信するようになってしまった。

formタグで囲うのをやめて、送信したい値を別途javascript経由で送信することも検討したが、
次の記事を読んで解決した。

https://qiita.com/t_oginogin/items/b682f664ce8244a7c2bd

buttonタグはデフォルトではtype: 'submit'となる。
従って何もしなければクリックした時にフォームが送信される。

このリファレンスによれば、formタグのid属性とbuttonタグのform属性を揃える方法もあるとのこと。
http://www.htmq.com/html5/button.shtml

次の記事も同じような悩みの解決です。

https://zenn.dev/phi/articles/form-submit-button-type-default

Discussion