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でDOM(HTML)・画像の読み込み完了時に任意の処理を実行する方法

2022.12.26
383
JavaScript

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

2022.12.04
484
JavaScript

【JavaScript】受け取ったデータが文字列 or 数値どちらなのか判定する方法【typeof演算子を使おう】

2022.11.29
493
JavaScript

【JavaScript初心者向け】繰り返し処理を使い、配列要素を展開する方法

2022.08.24
294