JavaScriptフォームをオブジェクトに変換する

JavaScript フォームをオブジェクトに変換する

Web 開発では、フォームは非常に一般的なコンポーネントです。フォームから入力データを取得する必要がある場合、通常はデータをオブジェクトの形式で処理します。フォームを JavaScript オブジェクトに変換すると、データの操作が簡単になります。この記事では、JavaScript を使用してフォームをオブジェクトに変換する方法について説明します。

HTML では、フォームは通常、form 要素を使用して作成されます。 JavaScript を使用してフォーム要素を取得し、フォームのすべてのコントロールを反復処理して値を取得し、オブジェクトに格納します。以下に例を示します。

HTML フォーム

まず、以下に示すように、HTML でフォームを作成する必要があります。

<form>
  <input type="text" name="firstName" value="John">
  <input type="text" name="lastName" value="Doe">
  <input type="email" name="email" value="john.doe@example.com">
  <input type="submit" value="Submit">
</form>

上のフォームには 3 つの入力コントロールと送信ボタン。各コントロールには名前と値があります。

JavaScript コード

次に、フォームをオブジェクトに変換する JavaScript コードを記述します。 FormData オブジェクトを使用して、フォーム コントロールの値を取得します。 FormData オブジェクトは、簡単な方法でフォーム データを取得できる新しい API であり、ファイルを含むフォームを処理できます。

この例ではファイルのアップロードを含めていないため、単純なループを使用してフォーム内のすべての値を取得できます。 name 属性を通じて各コントロールの名前を取得し、value 属性を通じて各コントロールの値を取得できます。また、各コントロールの型をチェックして、各値が正しく処理されていることを確認する必要があります。

以下は JavaScript コードです:

// 获取表单元素
var form = document.querySelector('form');

// 创建一个空对象来存储表单数据
var formData = {};

// 循环所有控件
for (var i = 0; i < form.elements.length; i++) {
  var element = form.elements[i];
  var name = element.name;
  var value = element.value;

  // 确保控件被支持，并且不包含文件
  if (name && value && (element.type !== 'file')) {
    if (element.type === 'number') {
      // 将数字转换成数值类型
      value = parseFloat(value);
    }
    formData[name] = value;
  }
}

// 输出表单数据对象
console.log(formData);

上記のコードでは、最初に form 要素を取得し、次にフォーム データを保存する空のオブジェクト formData を作成します。ループを使用してすべてのフォーム コントロールをループし、その名前と値を取得して、formData オブジェクトに保存します。

各コントロールのタイプもチェックすることに注意してください。コントロールが数値型の場合は、数値型に変換してオブジェクトに格納します。

最後に、フォーム データ オブジェクトをコンソールに出力します。

テスト コード

以下は、フォーム オブジェクトが正しいかどうかを確認するためのテスト コードです:

// 测试代码
var form = document.querySelector('form');
form.elements['firstName'].value = 'Jane';
form.elements['lastName'].value = 'Doe';
form.elements['email'].value = 'jane.doe@example.com';

var formData = {};

for (var i = 0; i < form.elements.length; i++) {
  var element = form.elements[i];
  var name = element.name;
  var value = element.value;
  if (name && value && (element.type !== 'file')) {
    if (element.type === 'number') {
      value = parseFloat(value);
    }
    formData[name] = value;
  }
}

console.log(formData);

上記のテスト コードを実行すると、出力は次のようになります:

{
  firstName: "Jane",
  lastName: "Doe",
  email: "jane.doe@example.com"
}

フォームを JavaScript オブジェクトに変換したので、AJAX リクエストで送信するなど、データを簡単に操作できるようになります。

以上がJavaScriptフォームをオブジェクトに変換するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。