JavaScriptでのフォームの入力値の取得方法

2024-02-28 18:18 JavaScript フォーム 入力値
  1. HTMLフォームの作成: まず、HTMLでフォームを作成します。例えば、以下のようなテキストフィールドを含むフォームを考えます。
<form>
  <input type="text" id="nameInput" placeholder="名前">
  <input type="email" id="emailInput" placeholder="メールアドレス">
  <button type="submit">送信</button>
</form>
  1. JavaScriptで入力値を取得する方法: JavaScriptを使用して、フォームの入力値を取得するためには、以下の手順を実行します。
  • JavaScriptコードをHTMLに追加するか、外部ファイルとして読み込みます。
  • フォームの要素をJavaScriptで取得します。一般的には、document.getElementById()メソッドを使用します。
// フォーム要素の取得
const nameInput = document.getElementById('nameInput');
const emailInput = document.getElementById('emailInput');
const form = document.querySelector('form');
// イベントリスナーの追加
form.addEventListener('submit', function(event) {
  event.preventDefault(); // フォームのデフォルトの送信動作をキャンセル
  // 入力値の取得
  const name = nameInput.value;
  const email = emailInput.value;
  // 取得した値の利用
  console.log('名前:', name);
  console.log('メールアドレス:', email);
  // ここで他の処理を行うことができます
  // フォームのリセット（オプション）
  form.reset();
});

上記のコードでは、フォームが送信されたときにイベントリスナーが実行され、入力値が取得されます。取得した値を利用する部分には、例としてconsole.log()を使用していますが、この部分を自分の要件に合わせて変更することができます。

以上がJavaScriptでフォームの入力値を取得する基本的な方法です。ご参考になれば幸いです。