JavaScript Academy · Leçon

L’événement submit

Gérez l’envoi des formulaires et empêchez les rechargements.

L’événement submit est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Envoyer des formulaires

L’événement submit se déclenche lorsqu’un formulaire est envoyé, que ce soit en cliquant sur un bouton d’envoi ou en appuyant sur Entrée dans un champ. C’est l’endroit approprié pour traiter les données du formulaire.

Écouter le formulaire

Ajoutez l’écouteur directement à l’élément form, et non au bouton d’envoi, afin de prendre en charge tous les modes d’envoi.

const form = document.querySelector("#signup");
form.addEventListener("submit", (e) => {
  console.log("submitting");
});

Le rechargement par défaut

Par défaut, l’envoi entraîne une navigation ou un rechargement de la page. Dans les applications pilotées par JavaScript, vous devez généralement l’annuler.

form.addEventListener("submit", (e) => {
  e.preventDefault();
});

Pourquoi utiliser preventDefault ici

Appeler preventDefault maintient la page en place afin que vous puissiez valider et envoyer vous-même les données, souvent via fetch.

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const data = new FormData(form);
  // send data without reloading
});

Boutons d’envoi

Un button avec type="submit", qui est la valeur par défaut dans un formulaire, déclenche l’envoi. Utilisez type="button" pour les boutons qui ne doivent pas envoyer le formulaire.

La touche Entrée envoie le formulaire

Appuyer sur Entrée dans un champ de texte sur une seule ligne envoie le formulaire, raison pour laquelle il est essentiel d’écouter le formulaire.

requestSubmit

form.requestSubmit envoie le formulaire par programmation tout en déclenchant l’événement submit et en exécutant la validation, contrairement à form.submit, qui ignore les deux.

form.requestSubmit(); // fires submit event + validates
// form.submit(); // bypasses validation and the event

Lire les données lors de l’envoi

Dans le gestionnaire, créez un objet FormData à partir du formulaire pour recueillir proprement tous les champs nommés.

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const fd = new FormData(form);
  const obj = Object.fromEntries(fd.entries());
  console.log(obj);
});

Désactiver le bouton

Pour éviter un double envoi, désactivez le bouton d’envoi pendant le traitement, puis réactivez-le une fois celui-ci terminé.

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const btn = form.querySelector("[type=submit]");
  btn.disabled = true;
});

Réinitialiser un formulaire

form.reset rétablit les valeurs par défaut des champs, et l’événement reset vous permet de réagir à cette action.

form.addEventListener("reset", () => {
  console.log("cleared");
});

Élément d’envoi

La propriété submitter de l’événement submit indique quel bouton a déclenché l’envoi, ce qui est utile lorsqu’un formulaire comporte plusieurs boutons d’envoi.

form.addEventListener("submit", (e) => {
  console.log(e.submitter && e.submitter.value);
});

Vérification rapide

Choisissez la meilleure pratique.

Récapitulatif

Gérez les envois avec l’événement submit du formulaire, en appelant preventDefault dans les applications pilotées par JS. Écoutez le formulaire, et non le bouton, pour intercepter les envois déclenchés par la touche Entrée. Utilisez FormData pour lire les champs, requestSubmit pour envoyer le formulaire par programmation avec validation, et désactivez le bouton pour éviter les doubles envois.

Questions Fréquemment Posées

La leçon « L’événement submit » est-elle gratuite ?

Oui — le texte complet de « L’événement submit » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « L’événement submit » ?

Gérez l’envoi des formulaires et empêchez les rechargements. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « L’événement submit » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?

Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à JavaScript Academy