一般社団法人 全国個人事業主支援協会

COLUMN コラム

  • form中のボタンでリローディングバグ【HTML】

検索ボックスに詳細検索用のボタンを付けて詳細を押すと詳細検索モーダルを表示するようにしていたんですけど、

inputの自動補完をOFFにしたいなと思い下記のように変えたら

<form autoComplete=’off’> //←追加
<input type=’text’>
<button onClick={……}>詳細</button>
<button onClick={……}>検索</button>
</form>

詳細ボタンをクリックするとページがリローディングされるバグが発生するようになりました。

どうやら<form>の中の<button>はtype=’button’などtypeを明確にしていない場合、全てsubmit扱いになってしまうようでした。そのため詳細ボタンを押すとsubmitのデフォルト動作としてページをリロードしてしまっていました。

これはevent.preventDefault()でも解消できるっぽいですね。

The following two tabs change content below.

内田 美樹

システムエンジニアをしています。 フロントエンドを主に、サーバーサイドも書いたりします。 JS/TS/Python/Javaは少しだけ React/Angular/Next/Nuxt/Vue/Nodeなんかを使ったりします。

この記事をシェアする

  • Twitterでシェア
  • Facebookでシェア
  • LINEでシェア