JavaScript を使用してフォームを送信する

1. HTML フォームを作成する
2. フォームにアクセスする
3. JavaScript でフォームフィールドの値を取得する
4. JavaScript のフォームフィールドからのデータを検証する

このチュートリアルでは、JavaScript を使用してフォームを送信する方法を紹介します。

フォームは、ユーザーからデータを取得し、それを構造化データベースに保存するのに役立ちます。フォームの送信は、さまざまなアプリや Web サイトで作業する際の重要なイベントです。form.submit() を呼び出したり、送信ボタンをクリックしたりするほど簡単ではありません。フォームが送信されると、リクエストがサーバーに送信される直前に送信イベントが発生します。ここで JavaScript が実行され、入力されたデータが検証されます。オブジェクトを作成したり、さまざまな属性を追加したりすることもできます。

したがって、フォームを送信するには、まずフォームを作成し、フォームにアクセスし、さまざまなフィールドの値を取得し、すべての値を検証してから、送信ボタンをクリックするか、for.submit() を呼び出す必要があります。

HTML フォームを作成する

<form> 要素を使用して HTML フォームを作成できます。

<form action="/" method="post" id="signup-form">
    <input type="text" name="Username" placeholder="Full Name">
    <input type="email" name="EmailAddress" placeholder="Email Address">
    <button type="submit">Submit</button>
</form>

上記のフォームには、action と method の 2つの属性があります。

1. action：フォーム送信のプロセスを処理する URL を指定します。
2. method*：フォームの送信に使用される HTTP メソッドを指定します。post メソッドは、リクエストの本文でデータをサーバーに送信することにより、データベースにデータを保存するのに役立ちます。get メソッドは、? を持つ URL にフォームデータを追加します。

フォームにアクセスする

getElementByTag、getElementById などの JavaScript セレクターのいずれかを使用してフォーム要素にアクセスできます。

let form = document.getElementById('signup-form');

JavaScript でフォームフィールドの値を取得する

フォーム要素配列を使用するか、フィールドの ID を参照することにより、フォームの入力フィールドにアクセスできます。フィールドにアクセスした後、.values 属性を使用して、そのフィールド内に格納されている値を取得できます。フォームデータを取得したら、最終的なフォーム送信に進む前にデータを検証できます。

// Syntax1:
let name = form.elements[0];
let username = name.value;
// Syntax2:
let name = form.elements['name'];
let username = name.value;

JavaScript のフォームフィールドからのデータを検証する

次のページに移動する前に、送信ボタンにイベントリスナーを追加し、検証プロシージャを呼び出します。例：サインアップページの場合、ユーザーは電子メールとパスワードの両方を提供する必要があります。

// Function to check that the input field is not empty while submitting
function requireValue(input) {
  return !(input.value.trim() === '');
}
// Event listener to perform the validation when user clicks on submit button
form.addEventListener('submit', (event) => {
  requiredFields.forEach((input) => {
    valid = valid | requireValue(input.input);
  });
  if (!valid) {
    event.preventDefault();
  }
});

上記のコードでは、入力フィールドが空であるかどうかを確認するための小さな検証チェックを記述しました。次に、イベントリスナーを送信ボタンにアタッチして、データをアクション URL に渡す前に最初にデータを処理します。入力フィールドが空でないことを確認し、空の場合は、event.preventDefault() を呼び出してフォームの送信を防ぎます。このようにして、JavaScript と HTML が完全なフォーム送信を処理します。