JavaScriptのsubmitイベントは、フォームの送信時に発生するイベントです。このイベントを活用することで、フォーム送信時に追加の処理を行ったり、送信をキャンセルしたりすることが可能です。今回は、submitイベントの基本的な使い方から応用例までをまとめていきたいと思います。
JavaScriptのsubmitイベントは、フォームの送信時に発生するイベントです。このイベントを活用することで、フォーム送信時に追加の処理を行ったり、送信をキャンセルしたりすることが可能です。今回は、submitイベントの基本的な使い方から応用例までをまとめていきたいと思います。
See the Pen Untitled by tones (@tonescodedesign) on CodePen.
const form = document.getElementById('myForm');
form.addEventListener('submit', (event) => {
event.preventDefault(); // デフォルトの送信をキャンセル
const name = document.getElementById('name').value;
alert(`送信された名前: ${name}`);
});<form id="myForm">
<label for="name">名前：</label>
<input type="text" id="name" name="name" required>
<button type="submit">送信</button>
</form>このコードでは、フォームが送信される際にsubmitイベントが発生し、preventDefault()でデフォルトの送信動作をキャンセルしています。さらに、入力された名前を取得してアラートで表示させています。
submitイベントを使用すると、送信前に入力データを検証して、不正なデータが送信されるのを防ぐことができます。
以下は簡単な入力データのバリデーションの例です。
See the Pen Untitled by tones (@tonescodedesign) on CodePen.
const form = document.getElementById('registrationForm');
const errorMessage = document.getElementById('errorMessage');
form.addEventListener('submit', (event) => {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
if (username.length < 3 || password.length < 6) {
event.preventDefault(); // デフォルトの送信をキャンセル
errorMessage.textContent = 'ユーザー名は3文字以上、パスワードは6文字以上で入力してください。';
} else {
errorMessage.textContent = '';
alert('登録が完了しました！');
}
});<form id="registrationForm">
<label for="username">ユーザー名：</label>
<input type="text" id="username" name="username" required>
<label for="password">パスワード：</label>
<input type="password" id="password" name="password" required>
<button type="submit">登録</button>
</form>
<p id="errorMessage" style="color: red;"></p>このコードでは、ユーザー名とパスワードの長さをチェックし、条件を満たしていない場合はフォームの送信をキャンセルしてエラーメッセージを表示します。
フォーム送信時に非同期リクエストを行う場合にもsubmitイベントが役立ちます。以下は、フォームデータをfetchを使用して送信する例です。
See the Pen submit() by tones (@tonescodedesign) on CodePen.
const form = document.getElementById('feedbackForm');
const statusMessage = document.getElementById('statusMessage');
form.addEventListener('submit', async (event) => {
event.preventDefault(); // デフォルトの送信をキャンセル
const feedback = document.getElementById('feedback').value;
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ feedback }),
});
if (response.ok) {
statusMessage.textContent = 'フィードバックが送信されました。ありがとうございます！';
statusMessage.style.color = 'green';
} else {
throw new Error('送信に失敗しました。');
}
} catch (error) {
statusMessage.textContent = error.message;
statusMessage.style.color = 'red';
}
});<form id="feedbackForm">
<label for="feedback">フィードバック：</label>
<textarea id="feedback" name="feedback" required></textarea>
<button type="submit">送信</button>
</form>
<p id="statusMessage"></p>このコードでは、フォーム送信をキャンセルし、fetchを使用して非同期リクエストを送信しています。
