Qu'est-ce qu'un objet FormData en javascript?

Les objets FormData sont utilisés pour capturer le formulaire lors de la soumission d'un formulaire en le récupérant avec une autre méthode. Afin d'ajouter des champs avec des méthodes, nous pouvons soit construire un formulaire HTML nouveau ou le dernier formulaire ou faire un objet sans utiliser de formulaires. Les données des champs de texte doivent être fournies lorsque le bouton Soumettre est cliqué, et JavaScript doit les identifier et livrer ces valeurs variables.

Cet article démontrera l'objet FormData en JavaScript à l'aide des exemples les plus faciles.

Qu'est-ce qu'un objet FormData en javascript?

Un objet FormData est une approche populaire pour construire une collection de données en JavaScript qui peut être envoyée au serveur à l'aide de «Xmlhttprequest»Ou récupéré. Il remplit les mêmes fonctions que l'élément de forme HTML. Il peut être comparé à un tableau de tableaux. Un tableau séparé représente chaque élément que nous souhaitons transmettre au serveur.

Syntaxe

Pour utiliser l'objet FormData dans JavaScript, utilisez la syntaxe suivante:

const FormData = new FormData ();

Exemple 1: Créer un objet FormData sans formulaire HTML

Tout d'abord, initialisez une constante avec un nom spécifique et attribuez une valeur particulière à cette constante. Ici le "Nouveau formdata ()”Est ​​utilisé comme une valeur constante:

Const FormData = new FormData ();

Ensuite, ajoutez les données en passant les arguments dans le «ajouter()" méthode

Données de formulaire.ajouter («fname», «hafsa»);
Données de formulaire.ajouter («lname», «javed»);
Données de formulaire.ajouter («âge», 25);

Après cela, utilisez le «console.enregistrer()" méthode:

console.log ("Form Informations");

Utilisez le "pour”Boucle pour itérer et afficher la sortie sur la console à l'aide du«console.enregistrer()" méthode:

pour (que obj de formdata)
console.log (obj);

Exemple 2: Créer un objet FormData avec un formulaire HTML

Pour ajouter le formdata avec une forme HTML, créez d'abord une forme en HTML à l'aide du «”Élément et ajoutez l'attribut suivant répertorié ci-dessous:

• Pour ajouter le champ de saisie dans le formulaire, utilisez le «" élément.
• À l'intérieur de la balise d'entrée, spécifiez le «taper«Attribut pour définir le type de données de l'élément. Il existe plusieurs valeurs possibles pour cet attribut, y compris «texte","nombre","date","mot de passe", et beaucoup plus.
• Le "espace réservé”Est ​​utilisé pour ajouter la valeur à afficher sur le champ de saisie, et« Nom »fait référence au nom du champ de saisie.
• "sur clic»L'événement est déclenché lorsque l'utilisateur remplit une fonctionnalité en cliquant sur la souris:

Ensuite, accédez au formulaire dans CSS et définissez l'espace autour du formulaire:

.former
marge: 20px;
rembourrage: 30px;

De plus, utilisez la balise de script et ajoutez le code suivant:

functionData ()
var form = document.getElementById ("formulaire");
CONSFORMDATA = NEWFORMDATA (Form);
console.log ("Form Data");
pour (que obj OfformData)
console.log (obj);

Dans l'extrait de code ci-dessus:

• Invoque le «getElementByid («formulaire»)«Méthode pour accéder au formulaire en utilisant l'ID de formulaire.
• Maintenant, stockez l'élément accessible dans une nouvelle constante "Données de formulaire".
• Utilisez le "pour”Boucle pour itération et imprimez les éléments de la console.

Sortir

Vous avez appris la création de l'objet FormData dans JavaScript.

Conclusion

Un objet FormData est utilisé pour construire une collection de données en JavaScript qui peuvent être envoyées au serveur. Pour créer l'objet FormData en javascript, deux méthodes sont démontrées. Le premier consiste à utiliser JavaScript simple et le second passe par la création de formulaire en HTML et le liant avec JavaScript. Ce message a indiqué sur les objets FormData en javascript.