JavaScriptでフォーム送信時に処理を追加するsubmitイベントの使い方

JavaScriptでフォーム送信時に処理を追加したい

Input属性に入力された各種値を保存する役目はPHPなどのサーバー側の言語の役目です。

しかし、送信自体はfrom要素(HTML)の役割であり、送信時に追加で何らかの処理を行うのはJavaScriptの役割となります。

JavaScriptでは、submitイベントを監視することで、サーバーにデータが送られる前に処理を追加することができます。

このイベントは下記のようなことに使われます。

  • データ送信前にデータを加工する
  • データ送信前のエラーチェック
  • ユーザーに再確認を催す

イベント

イベント名意味
submitフォーム送信時のイベント
submitイベントの仕様

サンプルコード

サンプルコードとして、送信時にsubmitイベントに対して送信をキャンセルする処理を追加したコードを紹介します。

  1. 送信ボタンの処理が発火する
  2. 送信前にsubmitイベントの処理を追加する
  3. この時、処理をキャンセルするコードを実行
  4. 行う処理がなくなり、送信ボタンの処理が終了

このように、送信ボタンを押しても、データが一切送信されないようになります。

Output
Pug
form#targetArea
		.form-group
			select.form-control#targetSelect
				option(name="targetSelect") Select 1
				option(name="targetSelect") Select 2
				option(name="targetSelect") Select 3
			button#targetButton.mt-4.btn.btn-primary(type="submit") 送信
	#formResult 
JavaScript
/*------------------------
Select要素関連の処理
-------------------------*/
const targetSelect = document.getElementById( 'targetSelect' );
const targetResult = document.getElementById( 'formResult' );

//ページ読み込み時に1度処理
window.addEventListener('DOMContentLoaded', onChange );

//選択肢の変更を検知
targetSelect.addEventListener( 'change', onChange );

function onChange() {
	targetResult.textContent = `現在の選択肢は【${targetSelect.value}】です。`;
}

/*----------------------
フォームの送信ボタンの処理
-----------------------*/
const targetArea = document.getElementById( 'targetArea' );

targetArea.addEventListener('submit', ( event ) => {
	//挙動をキャンセル
	event.preventDefault();
});
インストラクター