Formulare ohne Neuladen abschicken – FormData und fetch

Handgeschriebenes Auslesen von Formularfeldern ist Fleißarbeit mit eingebauter Fehlerquelle: Ein neues Feld im HTML, und im JavaScript fehlt es. FormData liest das Formular so, wie der Browser es auch beim normalen Absenden täte – über die name-Attribute.

Das Grundgerüst

<form id="kontakt" method="post" action="/api/contact.php">
  <input name="name" required>
  <input name="email" type="email" required>
  <textarea name="text" required></textarea>
  <button>Absenden</button>
</form>

const form = document.getElementById('kontakt');

form.addEventListener('submit', async e => {
  e.preventDefault();
  if (!form.reportValidity()) return;          // nutzt die eingebaute HTML-Prüfung

  const knopf = form.querySelector('button');
  knopf.disabled = true;

  try {
    const antwort = await fetch(form.action, {
      method: form.method,
      body: new FormData(form),                // Dateien inklusive
    });
    if (!antwort.ok) throw new Error('HTTP ' + antwort.status);
    form.reset();
    melde('Danke, die Nachricht ist da.');
  } catch (fehler) {
    melde('Das hat gerade nicht geklappt. Bitte später erneut versuchen.');
  } finally {
    knopf.disabled = false;
  }
});

Zwei Dinge, die hier wichtig sind: action und method kommen aus dem HTML – das Formular funktioniert damit auch ohne JavaScript. Und knopf.disabled verhindert den Doppelklick, der sonst zwei Nachrichten erzeugt.

JSON statt multipart

Erwartet dein Backend JSON, wandelst du die FormData um:

const daten = Object.fromEntries(new FormData(form));
await fetch('/api/contact.php', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(daten),
});

Achtung bei mehrfach vergebenen Namen (Checkbox-Gruppen, name="tags[]"): Object.fromEntries behält nur den letzten Wert. Dafür gibt es getAll:

const fd = new FormData(form);
const daten = { ...Object.fromEntries(fd), tags: fd.getAll('tags') };

Setz den Content-Type nicht selbst

// FALSCH – zerstört die Grenzmarkierung zwischen den Feldern:
fetch(url, { method: 'POST', headers: { 'Content-Type': 'multipart/form-data' }, body: fd });

Bei einem FormData-Body setzt der Browser den Header selbst, samt boundary. Schreibst du ihn von Hand, fehlt die Grenzmarkierung und der Server liest ein leeres Formular.

Fallstrick

FormData sieht nur Felder mit einem name-Attribut, und nicht angehakte Checkboxen tauchen gar nicht auf (kein false, sondern nichts). Deaktivierte Felder (disabled) fehlen ebenfalls – wenn ein Wert mitsoll, nimm readonly statt disabled. Und ganz wichtig: Die Prüfung im Browser ist Bequemlichkeit, keine Sicherheit. Der Server muss jede Eingabe noch einmal selbst prüfen.

Kontaktformulare, die ankommen, und Backends, die sauber prüfen, baue ich regelmäßig – schreib mir über bymw.de.

Quellen

• FormData – MDN Web Docs
• Using FormData Objects – MDN Web Docs
• HTMLFormElement.reportValidity() – MDN Web Docs