Récupérer les données d'un formulaire avec JavaScript

// Méthode traditionnelle (à éviter !)
const nom = document.getElementById('nom').value;
const prenom = document.getElementById('prenom').value;
const email = document.getElementById('email').value;
const telephone = document.getElementById('telephone').value;
// ... et ainsi de suite pour chaque champ

🎯 Récupérer les données avec FormData

Pour utiliser FormData, il suffit de passer le formulaire au constructeur. La manière la plus propre est d'utiliser l'événement submit et sa propriété currentTarget :

<form id="monFormulaire">
    <input type="text" name="nom">
    <input type="email" name="email">
    <button type="submit">Envoyer</button>
</form>

const form = document.getElementById('monFormulaire');

form.addEventListener('submit', (e) => {
    e.preventDefault(); // Empêche le rechargement de la page
    
    // Récupération de toutes les données du formulaire
    const formData = new FormData(e.currentTarget);
    
    console.log(formData);
});

Astuce : e.currentTarget fait référence à l'élément sur lequel l'écouteur d'événement est attaché (ici, le formulaire). C'est plus fiable que e.target qui peut pointer vers n'importe quel élément enfant.

📖 Lire les données avec entries() et Object.fromEntries()

Une fois le FormData créé, plusieurs méthodes permettent d'accéder aux données. La plus pratique est de convertir l'objet en objet JavaScript classique :

form.addEventListener('submit', (e) => {
    e.preventDefault();
    
    const formData = new FormData(e.currentTarget);
    
    // Conversion en objet JavaScript
    const data = Object.fromEntries(formData);
    
    console.log(data);
    // Résultat : { nom: 'Dupont', email: 'dupont@mail.com' }
    
    // Accès direct aux valeurs
    console.log(data.nom);    // 'Dupont'
    console.log(data.email);  // 'dupont@mail.com'
});

Cette méthode te donne un objet simple et facile à manipuler. On peut ensuite l'utiliser pour envoyer les données à une API, les stocker, ou effectuer des validations.

🔄 Autres méthodes pour lire les données

FormData offre plusieurs méthodes pour accéder aux valeurs selon tes besoins.

Récupérer une valeur spécifique

La méthode get() permet d'accéder directement à la valeur d'un champ :

const formData = new FormData(form);

const nom = formData.get('nom');
console.log(nom); // 'Dupont'

Vérifier l'existence d'un champ

Avant d'accéder à une valeur, tu peux vérifier si le champ existe avec has() :

if (formData.has('email')) {
    console.log('Le champ email existe');
}

Parcourir toutes les entrées

Pour itérer sur l'ensemble des données, utilise entries() avec une boucle for...of :

for (const [key, value] of formData.entries()) {
    console.log(`${key}: ${value}`);
}

Récupérer toutes les valeurs d'un champ

Pour les champs multiples comme les checkbox, getAll() retourne un tableau de toutes les valeurs :

const hobbies = formData.getAll('hobby');
console.log(hobbies); // ['lecture', 'sport', 'musique']

⚠️ Points d'attention importants

Pour que FormData fonctionne correctement, certaines règles doivent être respectées :

• L'attribut name est obligatoire : Chaque champ de formulaire doit avoir un attribut name. Sans cela, le champ ne sera pas inclus dans FormData.

<!-- ❌ Mauvais : pas d'attribut name -->
<input type="text" id="nom">

<!-- ✅ Bon : attribut name présent -->
<input type="text" id="nom" name="nom">

• Les champs désactivés sont ignorés : Un champ avec l'attribut disabled ne sera pas inclus dans FormData.
• Les boutons ne sont pas inclus : Les boutons <button> et <input type="submit"> ne sont généralement pas inclus (sauf si explicitement cliqués pour soumettre le formulaire).
• Attention aux cases à cocher : Les checkbox non cochées ne sont pas incluses dans FormData. Utilise getAll() pour récupérer toutes les valeurs d'un groupe de checkbox.

💡 Avantages de FormData

• Code plus court : Plus besoin de répéter getElementById() pour chaque champ.
• Maintenabilité : Ajouter de nouveaux champs au formulaire ne nécessite aucune modification du code JavaScript.
• Gestion des fichiers : FormData gère automatiquement les fichiers uploadés via <input type="file">.
• Compatible avec fetch() : Peut être directement envoyé dans une requête HTTP sans conversion supplémentaire.

✏️ Manipuler les données récupérées

Une fois les données récupérées avec FormData, on peut les modifier avant de les utiliser. Voici les méthodes les plus utiles :

Modifier une valeur existante

La méthode set() permet de modifier la valeur d'un champ ou d'en ajouter un nouveau s'il n'existe pas :

const formData = new FormData(form);

// Modifier une valeur
formData.set('nom', 'Nouveau nom');

// Ajouter un champ qui n'existe pas dans le formulaire
formData.set('timestamp', Date.now());

Ajouter des valeurs multiples

Contrairement à set(), la méthode append() ajoute une valeur sans supprimer les précédentes. C'est utile pour les champs multiples comme les checkbox :

// append() ajoute sans écraser
formData.append('hobby', 'lecture');
formData.append('hobby', 'sport');

console.log(formData.getAll('hobby')); 
// ['lecture', 'sport']

Supprimer un champ

On peut retirer un champ des données avant de les envoyer :

// Supprimer un champ
formData.delete('telephone');

// Vérifier qu'il n'existe plus
console.log(formData.has('telephone')); // false

Exemple pratique : enrichir les données

Voici comment ajouter automatiquement des informations supplémentaires aux données du formulaire :

form.addEventListener('submit', (e) => {
    e.preventDefault();
    
    const formData = new FormData(e.currentTarget);
    
    // Ajouter des métadonnées
    formData.set('dateEnvoi', new Date().toISOString());
    formData.set('userAgent', navigator.userAgent);
    
    // Convertir en objet pour visualiser
    console.log(Object.fromEntries(formData));
});