buttonタグをクリックする度に画面がリロードされる

<button>タグのonclickイベントをJavascriptで処理しようとコード書いて動かしてみたら、毎回ボタンをクリックする度に画面がリロードされて、うまく動かない…。

調べてみたら基礎的なことだったけど、知らなかったのでメモ。

原因はbuttonタグのtype属性

そもそも、<button>タグを正しく理解していなかったので、以下に簡単なリファレンスを。

<button>

<button>タグは、ボタンを表示するタグ。<form>タグと合わせて使うのが基本。

属性

属性 説明
name ボタンの名前 ボタンの名前
value ボタンの値
type ボタンの種類
  • submit(初期値)
  • reset
  • button
disabled 操作を無効にする

以下は、HTML5で追加されたタグ。

属性 説明
autofocus 自動フォーカスを指定する
form <form>タグとの関連付け
(指定することで<form></form>の中に<button>タグがなくても関連付けできる)
関連付けたい<form>タグのid名
formaction 送信先URL URL
formenctype 送信データの形式
  • application/x-www-form-urlencoded(初期値)
  • multipart/form-data
  • text/plain
formmethod 送信方法(HTTPメソッド)
  • get(初期値)
  • post
formnovalidate 入力されたデータの妥当性を確認しない
formtarget フォーム送信するターゲット先
  • _blank
  • _self
  • _parent
  • _top

で、何が悪かったのか?

問題の事象が発生した時のコードは以下のような感じだった。

<form action="">
  <button onclick="abc()">
</from>

ここで、ボタンの動作としては、クリックする度にフォームの入力項目を変更するようなJavascriptを書いていたが、毎回リロードされ、うまくJavascriptが動かない…。

上記のリファレンスを理解していれば、すぐに分かったのだが、原因はtype属性の初期値がsubmitであることだった。

送信ボタンと同じ扱いであったため、毎回フォーム送信が行われており、ページがリロードされる動きとなっていた。

なので、type属性をbuttonに変更することで解決した。

投稿者: Output48

中学生の時に初めてHTMLに触れてからホームページ制作を独学で始める。 ベンチャー企業の営業、大手企業のSEを経て、独立。 ここ数年はWEB以外の仕事をしていたため、割と本気で勉強中。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です