Un seul envoi — exercice corrigé de JavaScript : rendre le Web interactif (école d'ingénieur) (chapitre 8)

Un seul envoi

Événements et formulaires · niveau 2

Énoncé

Un visiteur impatient clique deux fois sur « Envoyer la commande », ou appuie sur Entrée juste après avoir cliqué. Modifier l'écouteur submit pour que la commande ne parte qu'une fois : le bouton est désactivé et son texte devient « Envoi en cours… ».

Corrigé


const f = document.querySelector("#f");
const bouton = document.querySelector("#envoyer");
let envois = 0;

f.addEventListener("submit", (e) => {
  e.preventDefault();
  if (bouton.disabled) {
    return;
  }
  bouton.disabled = true;
  bouton.textContent = "Envoi en cours…";
  envois += 1;
  document.querySelector("#etat").textContent = `Commande envoyée (${envois} envoi).`;
  console.log("envois :", envois, "| bouton désactivé :", bouton.disabled);
});

On clique, on clique de nouveau, puis on appuie sur Entrée dans le champ :


envois : 1 | bouton désactivé : true

Une seule commande part. Un bouton désactivé ne déclenche plus d'envoi ; et quand le bouton d'envoi d'un formulaire est désactivé, la touche Entrée n'envoie plus le formulaire non plus. Le test if (bouton.disabled) reste une sécurité si le formulaire est envoyé par un autre moyen.