buttonをクリックするとリロード処理が行われる

buttonをクリックするとリロード処理が行われる

javascriptで、buttonをクリックするとリロード処理が行われる場合の原因と対処法を掲載してます。ブラウザはchromeを使用しています。

環境

  • ブラウザ chrome 98.0.4758.102

リロードされるコード

以下のように「form」タグ内の「button」で発生

<form>

  <input id="txt" type="text" value="foo">
  <button>button</button>

</form>

以下のように「button」をクリックするたびにリロードされます。

原因

「type」属性を指定しないため。「type」属性は、指定しないと初期値は「submit」となります。

対処法

「type=”button”」と指定する

<form>

  <input id="txt" type="text" value="foo">
  <button type="button">button</button>

</form>