Convertir le formulaire javascript en objet

Formulaires JavaScript convertis en objets

Dans le développement Web, les formulaires sont un composant très courant. Lorsque nous avons besoin d'obtenir des données d'entrée à partir d'un formulaire, nous traitons généralement les données sous la forme d'un objet. La conversion du formulaire en objet JavaScript facilite la manipulation des données. Dans cet article, nous verrons comment convertir un formulaire en objet à l'aide de JavaScript.

En HTML, les formulaires sont généralement créés à l'aide de l'élément form. Nous utilisons JavaScript pour obtenir les éléments du formulaire, puis parcourons tous les contrôles du formulaire, obtenons leurs valeurs et les stockons dans l'objet. Voici un exemple :

Formulaire HTML

Tout d'abord, nous devons d'abord créer un formulaire en HTML, comme indiqué ci-dessous :

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

Le formulaire ci-dessus contient 3 contrôles de saisie et un bouton de soumission. Chaque contrôle a un nom et une valeur.

Code JavaScript

Ensuite, nous écrirons du code JavaScript pour convertir le formulaire en objet. Nous utiliserons l'objet FormData pour obtenir la valeur du contrôle de formulaire. L'objet FormData est une nouvelle API qui nous permet d'obtenir des données de formulaire de manière simple et peut gérer des formulaires contenant des fichiers.

Dans cet exemple, nous n'incluons pas de téléchargement de fichier, nous pouvons donc utiliser une simple boucle pour obtenir toutes les valeurs du formulaire. Nous pouvons obtenir le nom de chaque contrôle via l'attribut name et obtenir la valeur de chaque contrôle via l'attribut value. Nous devons également vérifier le type de chaque contrôle pour nous assurer que nous traitons correctement chaque valeur.

Voici notre code 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);

Dans le code ci-dessus, nous récupérons d'abord l'élément de formulaire, puis créons un objet vide formData pour stocker les données du formulaire. Nous utilisons une boucle pour parcourir tous les contrôles de formulaire, obtenir leurs noms et valeurs et les stocker dans un objet formData.

Veuillez noter que nous avons également vérifié le type de chaque contrôle. Si le contrôle est de type numérique, nous le convertissons en type numérique et le stockons dans l'objet.

Enfin, nous affichons l'objet de données du formulaire sur la console.

Code de test

Voici notre code de test pour vérifier que l'objet du formulaire est correct :

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

Exécutez le code de test ci-dessus et le résultat est le suivant :

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

Maintenant que nous avons converti le formulaire en objet JavaScript, nous pouvons facilement manipuler ces données, par exemple en les envoyant dans des requêtes AJAX.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!