MENU
  1. ホーム
  2. JavaScript
  3. Javascript応用
  4. 【Javascript応用】フォームイベント (submit, change)とは？

【Javascript応用】フォームイベント (submit, change)とは？

Javascript応用

フォームイベントは、ユーザーがフォームを操作する際に発生する重要なイベントであり、JavaScriptを使用してそれらを捕捉し、処理することができます。

この記事では、フォームイベントの主要な種類であるsubmitとchangeについて詳しく解説し、それらを実際のコーディングにどのように活用するかを解説します！

目次

Javascriptのフォームイベントとは？

フォームイベントは、ウェブページ上でのフォームの操作に関連するイベントです。ユーザーがテキスト入力を変更したり、フォームを送信したりするときに発生します。JavaScriptを使ってこれらのイベントを処理することで、フォームの動作を制御し、ユーザーエクスペリエンスを向上させることができます。主なフォームイベントとして、submitとchangeがあります。

submitイベントとは？

submitイベントは、フォームが送信されたときに発生します。通常、フォームの送信ボタンがクリックされたときやEnterキーが押されたときにこのイベントが発火します。

const form = document.getElementById('myForm');

form.addEventListener('submit', function(event) {
    event.preventDefault(); // フォームのデフォルトの動作を防止する
    // ここでフォームのデータを処理するなどの操作を行う
});

changeイベントとは？

changeイベントは、フォームの入力値が変更されたときに発生します。テキストボックス、チェックボックス、セレクトボックスなどの要素で使用されます。

const inputField = document.getElementById('myInput');

inputField.addEventListener('change', function(event) {
    // 入力値が変更されたときの処理をここに記述する
});

実践例

フォームイベントを活用することで、フォームの送信前に入力値を検証したり、リアルタイムでフォームの入力内容に応じて他の要素を更新したりすることができます。

const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');
const submitButton = document.getElementById('submitButton');

emailInput.addEventListener('change', validateForm);
passwordInput.addEventListener('change', validateForm);

function validateForm() {
    if (emailInput.value !== '' && passwordInput.value !== '') {
        submitButton.disabled = false;
    } else {
        submitButton.disabled = true;
    }
}

まとめ

フォームイベント (submit、change)は、ユーザーがフォームを操作する際に発生し、JavaScriptによって検知されます。これらのイベントを活用することで、フォームの動作をカスタマイズし、ユーザーエクスペリエンスを向上させることができます。

Javascript応用
目次