• JavaScript

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した時のページ遷移を無効にする方法について紹介しました。

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