Lire efficacement les données du formulaire avec JavaScript

Dans ce tutoriel, tu apprendras comment lire et traiter les données saisies par les utilisateurs dans les formulaires en utilisant JavaScript. Les éléments de formulaire sont une partie essentielle de tout site web car ils permettent aux utilisateurs de saisir des informations. On pense souvent qu'il est nécessaire de recourir à des frameworks compliqués pour cela. Dans cet article, nous montrons comment traiter efficacement les données de formulaire avec JavaScript simple.

Principales conclusions

• Tu apprendras à créer des formulaires, à accéder aux données du formulaire avec JavaScript et à empêcher les comportements par défaut des formulaires en utilisant preventDefault, te permettant ainsi de prendre le contrôle sur les entrées de données de tes utilisateurs.

Guide pas à pas

Commence par créer un formulaire HTML simple dans ton document. Assure-toi d'ajouter avec succès les différents champs de saisie et un bouton Soumettre.

Une fois que ton formulaire est visible dans le navigateur, tu peux le tester. Saisis un nom dans le champ de saisie et appuie sur la touche Entrée ou le bouton Soumettre. Si tout fonctionne correctement, tu devrais voir une alerte avec le nom que tu as saisi.

Pour y parvenir, nous ajoutons une balise de script à ton fichier HTML. Dans ce script, tu définis une fonction globale nommée submitForm, qui accepte un objet événement comme paramètre.

Dans le script, tu peux définir l'événement onsubmit pour ton formulaire. Cela signifie que la fonction submitForm sera appelée lorsque le formulaire est soumis. Note que l'objet événement est toujours disponible lorsque tu te trouves dans un gestionnaire d'événements.

L'une des étapes importantes est d'empêcher l'action par défaut du formulaire en appelant event.preventDefault(). C'est important car nous ne voulons pas que le formulaire recharge la page après la soumission des données.

Maintenant, nous pouvons commencer à lire les données du formulaire. Les données du formulaire sont disponibles dans event.target, ce qui facilite l'accès aux informations saisies.

Pour obtenir les données du formulaire, crée un nouvel objet avec le constructeur FormData et passe l'élément de formulaire en tant que paramètre. Après la création de l'objet, tu peux accéder aux valeurs de saisie via la méthode get.

Avec formData.get('firstName'), par exemple, tu obtiens la valeur du champ de saisie portant le nom 'firstName'. Ensuite, tu peux utiliser cette valeur pour créer un message qui sera affiché à l'utilisateur.

Si tu souhaites ajouter un autre champ de saisie au formulaire, procède comme suit : ajoute un champ de texte supplémentaire pour le nom de famille portant le nom 'lastName'. Ensuite, tu peux entreprendre des étapes similaires pour récupérer sa valeur.

Avec ces deux valeurs, tu peux ensuite générer un message personnalisé. Par exemple : "Bonjour [Prénom] [Nom]!"

Pour ne plus afficher le message via une alerte mais l'intégrer directement dans HTML, tu peux ajouter une nouvelle section au DOM qui affiche le message sous forme de texte. Crée un div avec un ID unique et définis son innerText sur le message résultant.

Maintenant, tu peux essayer les différentes variations en imprimant les données dans la console ou les utilisant pour d'autres actions JavaScript, telles qu'une requête POST via fetch.

C'est la manière la plus fondamentale de lire et d'utiliser des données de formulaire avec JavaScript. Il existe de nombreuses façons d'améliorer cela, telles que l'ajout de validations ou le traitement ultérieur des données sur le serveur.

Résumé

Dans ce tutoriel, vous avez appris comment lire des données de formulaire avec des fonctions JavaScript simples. Vous avez exploré l'importance de event.preventDefault et vu comment insérer des données à la fois dans des alertes et directement dans le document. Avec cette base, vous êtes bien équipé pour concevoir des formulaires plus complexes et leur gestion des données.