JavaScript

Récupérer toutes les données avec l'objet FormData

0 chapitres 0 QCM Accès gratuit

À propos de ce cours

Récupérer toutes les données avec l'objet FormData. Dans cette leçon du cours JavaScript, vous apprendrez à : récupérer tous les champs d'un formulaire en une ligne avec FormData ; utiliser get, getAll, has et parcourir les paires ; savoir quels champs sont inclus ou exclus ; convertir correctement un FormData en objet.

Chapitre 14 — La gestion des formulaires · 14.4 Récupérer toutes les données avec l'objet FormData

🎯 Objectifs de la leçon
• récupérer tous les champs d'un formulaire en une ligne avec FormData;
• utiliser get, getAll, has et parcourir les paires ;
• savoir quels champs sont inclus ou exclus ;
• convertir correctement un FormData en objet.

1. Une ligne pour tout récupérer

Lire chaque champ un par un devient vite fastidieux. new FormData(form) rassemble automatiquement toutes les paires (nom, valeur), exactement comme le ferait le navigateur pour un envoi classique.

📄 l4_formdata.html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <form id="commande">
    <label>Nom <input name="nom" value="Sami"></label>
    <label>Code client <input name="code" value="C-042" disabled></label>
    <div class="choix">
      <label><input type="checkbox" name="options" value="emballage" checked> Emballage cadeau</label>
      <label><input type="checkbox" name="options" value="express" checked> Livraison express</label>
      <label><input type="checkbox" name="options" value="assurance"> Assurance</label>
      <label><input type="checkbox" name="facture"> Facture</label>
    </div>
    <label>Quantité <input name="quantite" type="number" value="3"></label>
    <button>Commander</button>
  </form>
  <pre id="sortie"></pre>

  <script>
    const form = document.querySelector("#commande");

    form.addEventListener("submit", (ev) => {
      ev.preventDefault();
      const donnees = new FormData(form); // tous les champs en UNE ligne

      const lignes = ["1) Toutes les paires (nom, valeur) :"];
      for (const [nom, valeur] of donnees) lignes.push(`   ${nom} = ${valeur}`);

      lignes.push("", "2) donnees.get('options')    → " + donnees.get("options"));
      lignes.push("   donnees.getAll('options') → " + JSON.stringify(donnees.getAll("options")));

      lignes.push("", "3) Object.fromEntries(donnees) :");
      lignes.push("   " + JSON.stringify(Object.fromEntries(donnees)));

      // Conversion correcte : tableaux pour les cases multiples, types corrects
      const objet = {
        ...Object.fromEntries(donnees),
        options: donnees.getAll("options"),
        quantite: Number(donnees.get("quantite")),
        facture: donnees.has("facture"),
      };
      lignes.push("", "4) Conversion soignée :", "   " + JSON.stringify(objet));

      document.querySelector("#sortie").textContent = lignes.join("\n");
    });
  </script>
</body>
</html>

Après un clic sur « Commander »

Contenu d'un FormData et conversions possibles
Figure 1 — Ce que FormData contient et ce qu'on en fait.

2. Ce qu'il faut savoir

Seuls les champs avec un attribut name et non désactivés sont inclus (code est absent).
Une case non cochée est absente : facture n'apparaît pas. On teste donc sa présence avec has().
Plusieurs cases de même nom donnent plusieurs paires : get() renvoie la première, getAll() toutes.
Object.fromEntries(donnees) est pratique mais écrase les doublons : il ne reste qu'une option.
Toutes les valeurs sont des chaînes (ou des objets File pour <input type="file">).

const donnees = new FormData(form);
donnees.append("source", "site-web");   // ajouter une donnée qui n'est pas dans le formulaire
donnees.set("nom", "Sami Ben Ali");     // remplacer une valeur
donnees.delete("code");                 // retirer

// Un FormData s'envoie directement avec fetch (leçon 14.7), fichiers compris
fetch("/api/commandes", { method: "POST", body: donnees });

ℹ️ À retenir
• new FormData(form): toutes les paires nom/valeur des champs nommés et actifs.
• get (1re valeur), getAll (toutes), has (présence), for…of (parcours).
• Cases non cochées et champs désactivés sont absents.
• Object.fromEntries perd les doublons : complétez avec getAll et convertissez les nombres.

🛠 Activité 4 — Un sondage en une ligne

Mission : Créez un sondage « Vos habitudes numériques » : âge, réseaux utilisés (cases), temps d'écran (liste), satisfaction (radio 1 à 5), commentaire.

Questions pour avancer (répondez dans votre compte rendu, puis appliquez dans votre projet) :

À l'envoi, affichez toutes les paires avec for…of. Combien de lignes obtenez-vous si trois réseaux sont cochés ?
Affichez Object.fromEntries(new FormData(form)). Quels réseaux manquent ? Écrivez une fonction versObjet(form) qui renvoie un objet correct (tableaux, nombres, booléens).
Désactivez le champ âge. Apparaît-il encore ? Et si vous le rendez readonly? Dans quel cas utiliser chacun ?
Votre fonction doit fonctionner pour n'importe quel formulaire : comment savoir, sans écrire les noms en dur, quels champs doivent devenir des tableaux ?
Ajoutez donnees.append("date", new Date().toISOString()) avant l'affichage. À quoi peut servir une donnée ajoutée ainsi ?
Comparez la longueur de votre code avec la version « un champ à la fois » de la leçon 14.3.

Je vérifie / je rends :

☐ La fonction versObjet(form) testée sur deux formulaires différents.

← 14.3 Récupérer la valeur d'un INPUT en JavaScript14.5 La validation des données de formulaires →

Sommaire du cours JavaScript

Télécharger ce cours en PDF 0

Récupérer toutes les données avec l'objet FormData

Dans cet article

14- La gestion des formulaires

Sommaire du cours

Autres catégories