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した時のページ遷移を無効にする方法について紹介しました。
以上で解説を終わります。
目次