ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。