Lire un formulaire — exercice corrigé de JavaScript : rendre le Web interactif (école d'ingénieur) (chapitre 8)

Lire un formulaire

Événements et formulaires · niveau 2

Énoncé

Un formulaire contient un champ nom, trois cases à cocher de même nom rayons (deux cochées) et une case lettre non cochée. Qu'affiche Object.fromEntries(new FormData(f)) ? Écrire une fonction lireFormulaire(f) qui rend { nom, rayons, lettre } avec le nom sans espaces superflus, la liste de tous les rayons cochés et un booléen.

Corrigé


const f = document.querySelector("#f");

function lireFormulaire(formulaire) {
  const donnees = new FormData(formulaire);
  return {
    nom: donnees.get("nom").trim(),
    rayons: donnees.getAll("rayons"),
    lettre: donnees.has("lettre"),
  };
}

f.addEventListener("submit", (e) => {
  e.preventDefault();
  console.log(JSON.stringify(Object.fromEntries(new FormData(f))));
  console.log(JSON.stringify(lireFormulaire(f)));
});


{"nom":"Lina Haddad","rayons":"Physique"}
{"nom":"Lina Haddad","rayons":["Informatique","Physique"],"lettre":false}

FormData contient deux paires rayons ; Object.fromEntries garde la dernière, et Informatique est perdu. getAll rend toutes les valeurs d'un nom. Une case non cochée n'est pas envoyée du tout : has("lettre") donne donc le booléen voulu.