Konvertieren Sie ein Javascript-Formular in ein Objekt

JavaScript-Formulare in Objekte umgewandelt

In der Webentwicklung sind Formulare eine sehr häufige Komponente. Wenn wir Eingabedaten aus einem Formular abrufen müssen, verarbeiten wir die Daten normalerweise in Form eines Objekts. Durch die Konvertierung des Formulars in ein JavaScript-Objekt können Daten einfacher bearbeitet werden. In diesem Artikel erfahren Sie, wie Sie mithilfe von JavaScript ein Formular in ein Objekt konvertieren.

In HTML werden Formulare normalerweise mithilfe des Formularelements erstellt. Wir verwenden JavaScript, um die Formularelemente abzurufen, durchlaufen dann alle Steuerelemente des Formulars, rufen ihre Werte ab und speichern sie im Objekt. Hier ist ein Beispiel:

HTML-Formular

Zunächst müssen wir ein Formular in HTML erstellen, wie unten gezeigt:

<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>

Das obige Formular enthält 3 Eingabesteuerelemente und eine Senden-Schaltfläche. Jedes Steuerelement hat einen Namen und einen Wert.

JavaScript-Code

Als nächstes schreiben wir JavaScript-Code, um das Formular in ein Objekt umzuwandeln. Wir werden das FormData-Objekt verwenden, um den Wert des Formularsteuerelements abzurufen. Das FormData-Objekt ist eine neue API, die es uns ermöglicht, auf einfache Weise Formulardaten abzurufen und Formulare mit Dateien zu verarbeiten.

In diesem Beispiel schließen wir keinen Datei-Upload ein, sodass wir eine einfache Schleife verwenden können, um alle Werte im Formular abzurufen. Wir können den Namen jedes Steuerelements über das Namensattribut und den Wert jedes Steuerelements über das Wertattribut abrufen. Wir müssen auch den Typ jedes Steuerelements überprüfen, um sicherzustellen, dass wir jeden Wert korrekt verarbeiten.

Hier ist unser JavaScript-Code:

// 获取表单元素
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);

Im obigen Code rufen wir zuerst das Formularelement ab und erstellen dann ein leeres Objekt formData, um die Formulardaten zu speichern. Wir verwenden eine Schleife, um alle Formularsteuerelemente zu durchlaufen, ihre Namen und Werte abzurufen und sie in einem formData-Objekt zu speichern.

Bitte beachten Sie, dass wir auch die Art der einzelnen Kontrollen überprüft haben. Wenn das Steuerelement vom numerischen Typ ist, konvertieren wir es in einen numerischen Typ und speichern es im Objekt.

Abschließend geben wir das Formulardatenobjekt an die Konsole aus.

Testcode

Hier ist unser Testcode, um zu überprüfen, ob das Formularobjekt korrekt ist:

// 测试代码
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);

Führen Sie den obigen Testcode aus und die Ausgabe ist wie folgt:

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

Nachdem wir das Formular nun in ein JavaScript-Objekt konvertiert haben, Wir können diese Daten leicht manipulieren, beispielsweise indem wir sie in AJAX-Anfragen senden.

Das obige ist der detaillierte Inhalt vonKonvertieren Sie ein Javascript-Formular in ein Objekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!