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でURL末尾のアンカー(ハッシュ)を取得・条件分岐する方法

2022.10.28
191
JavaScript

JavaScriptでn番目の子要素を取得する方法

2022.10.18
216
JavaScript

JavaScriptでスクロールしたら要素をアニメーション表示する方法【Intersection Observer APIが便利】

2022.09.08
490
JavaScript

JavaScriptを使い、デバイス幅によって条件分岐する方法【jQuery不要】

2022.10.20
277