JavaScript

The submit event is a JavaScript event that occurs when an HTML form is being submitted.

submit [event]

　submitイベントは、HTMLの form要素内で発生するイベントの一つです。フォームに入力されたデータをサーバーに送信する際に使用されます。このイベントは通常、フォームを送信するための「Submit」ボタンがクリックされたときに発生します。submitイベントを利用することで、JavaScriptを使ってフォームの内容を検証したり、カスタムの処理を行ったりすることができます。

Sample

お問い合わせフォーム

HTML

<h2>お問い合わせフォーム</h2>
<form id="contactForm">
	<label for="name">Name:</label><br>
	<input type="text" id="name" name="name" required><br>
	<br>
	<label for="email">Email:</label><br>
	<input type="email" id="email" name="email" required><br>
	<br>
	<label for="message">Message:</label><br>
	<textarea id="message" name="message" rows="4" cols="50" required></textarea><br>
	
	<input type="submit" value="送信">
</form>

<div id="result"></div>

<script src="script.js"></script>

CSS

textarea {
	max-width: 90%;  /* 狭い画面対策 */
}

JavaScript

// フォームのsubmitイベントを取得して処理する関数
function handleSubmit(event) {
event.preventDefault(); // フォームのデフォルトの送信動作をキャンセル

// フォームの要素を取得
const form = event.target;
const nameInput = form.elements.name;
const emailInput = form.elements.email;
const messageInput = form.elements.message;

// 入力された値を取得
const name = nameInput.value;
const email = emailInput.value;
const message = messageInput.value;

// 結果を表示
const resultDiv = document.getElementById("result");
resultDiv.innerHTML = `
	<p>Name: ${name}</p>
	<p>Email: ${email}</p>
	<p>Message: ${message}</p>
`;

// フォームをリセット（オプション）
form.reset();
}

// フォーム要素を取得
const contactForm = document.getElementById("contactForm");

// submitイベントをリスニング
contactForm.addEventListener("submit", handleSubmit);