Written by Kasumi

HTMLのformでsubmitした時、ページ遷移させない方法【JavaScript】

HTMLのformタグでsubmitした時ページ遷移させたくない。

本記事ではJavaScriptを使い、このような悩みを解決。

実装例を元に解説します。

実装例

See the Pen
Untitled
by Kohei (@kouk05)
on CodePen.0

formタグでページ遷移させない実装例です。

inputタグにテキストを入力。

送信ボタンを押してもページ遷移されません。

実装方法は以下の通りです。

ページ遷移させないJavaScriptコード

(function() {
  //formタグを変数に格納
  var todoform = document.querySelector('.form');
  //formでsubmitされたら
  todoform.addEventListener('submit', function (event) {
       //データ送信を無効
    event.preventDefault();
  });
}());

formをsubmitした時ページ遷移させないJavaScriptコード例です。

preventDefault()を使います。

preventDefaultはformタグのデフォルト機能であるデータ送信を無効にする事が出来ます。

addEventListenerを使って引数にsubmitを指定。

submitが押されたら、preventDefault()を発火すればOKです。

以上で解決します。

まとめ

JavaScriptを使い、HTMLのformでsubmitした時のページ遷移を無効にする方法について紹介しました。

以上で解説を終わります。

目次

関連記事

JavaScript

JavaScriptでスマホ画面をタップした時のイベントを検知する方法

2022.11.15
1966
JavaScript

【JavaScript】変数や関数をファイル分割。必要な時に読み込みする方法【モジュール化しよう】

2023.01.06
1831
JavaScript

JavaScriptでマウスが要素をhoverしたか判定する方法

2022.11.10
2460
JavaScript

【JavaScript】スプレット構文(…)を使い、配列・オブジェクトを追加・連結(マージ)する方法

2022.12.04
616