Envoyer un formulaire au serveur avec fetch

Chapitre 14 — La gestion des formulaires · 14.7 Envoyer un formulaire au serveur avec fetch

Figure 1 — Les étapes d'un envoi asynchrone.

📄 l7_fetch.html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <form id="avis" action="https://jsonplaceholder.typicode.com/posts" method="post">
    <label>Titre <input name="title" required></label>
    <label>Votre avis <textarea name="body" required rows="3"></textarea></label>
    <button>Publier</button>
  </form>
  <pre id="sortie"></pre>

  <script>
    const form = document.querySelector("#avis");
    const sortie = document.querySelector("#sortie");

    form.addEventListener("submit", async (ev) => {
      ev.preventDefault();
      const bouton = form.querySelector("button");
      bouton.disabled = true;            // empêche le double envoi
      bouton.textContent = "Envoi…";
      sortie.textContent = "";

      try {
        const donnees = Object.fromEntries(new FormData(form));
        const reponse = await fetch(form.action, {   // l'adresse vient de l'attribut action
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(donnees),
        });
        if (!reponse.ok) throw new Error(`Le serveur a répondu ${reponse.status}`);
        const resultat = await reponse.json();
        sortie.textContent = `Avis publié ✔ (numéro ${resultat.id})\n` + JSON.stringify(resultat, null, 2);
        form.reset();                    // vide le formulaire
      } catch (err) {
        sortie.textContent = "Échec de l'envoi : " + err.message + "\nVos saisies sont conservées, réessayez.";
      } finally {
        bouton.disabled = false;         // dans tous les cas
        bouton.textContent = "Publier";
      }
    });
  </script>
</body>
</html>

Pendant l'envoi, le bouton est désactivé et affiche « Envoi… » :

Pendant l'attente de la réponse

En cas de succès, le serveur de test jsonplaceholder renvoie les données reçues avec un numéro :

Réponse 201 : formulaire vidé, numéro affiché

En cas d'erreur du serveur (ici une erreur 500 simulée), le message l'indique et les saisies sont conservées :

Réponse 500 : rien n'est perdu

1. FormData ou JSON ?

// 1) Corps FormData : comme un envoi classique, fichiers compris.
//    Pas d'en-tête Content-Type : le navigateur le met lui-même.
await fetch(url, { method: "POST", body: new FormData(form) });

// 2) Corps JSON : le format préféré des API modernes
await fetch(url, {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(objet),
});

Ce n'est pas vous qui choisissez : c'est le serveur qui indique, dans sa documentation, le format qu'il attend.

2. Les bonnes pratiques

• Désactiver le bouton pendant l'envoi : un double clic enverrait deux fois la commande.
• Tester reponse.ok: fetch ne rejette sa promesse qu'en cas de problème réseau, pas pour une erreur 400 ou 500.
• Réactiver dans finally, pour que le bouton revienne même en cas d'erreur.
• Ne vider le formulaire qu'en cas de succès; en cas d'échec, l'utilisateur ne doit rien avoir à retaper.
• Afficher les erreurs renvoyées par le serveur (par exemple « cet e-mail est déjà inscrit ») à côté des champs concernés.
• Ne pas envoyer ce qui est inutile au serveur, comme la confirmation du mot de passe.

← 14.6 La validation de formulaire avec HTML514.8 TP 14 : Validation d'un formulaire en JavaScript →