NavigateEvent.formData — Eigenschaft · JavaScript-Referenz

Signatur

NavigateEvent.formData

Beschreibung

Die Eigenschaft formData des NavigateEvent enthält die Daten eines abgeschickten Formulars, wenn die Navigation durch eine POST-Formularübermittlung ausgelöst wurde. In allen anderen Fällen ist der Wert null, etwa bei Linkklicks, navigation.navigate(), Vor-/Zurück-Navigation oder GET-Formularen, deren Felder ja schon in der URL stecken.

Gebraucht wird sie vor allem in Single-Page-Anwendungen: Ein zentraler navigate-Listener auf window.navigation fängt Formularübermittlungen ab, verhindert per event.intercept() das Neuladen der Seite und schickt die Daten selbst mit fetch() an den Server. So lassen sich ganz normale HTML-Formulare mit method="post" behalten, die ohne JavaScript weiter funktionieren (progressive Verbesserung).

Das zurückgegebene Objekt ist ein normales FormData. Man kann es mit get(), getAll(), entries() usw. auslesen oder direkt als body an fetch() übergeben. Die Eigenschaft selbst ist schreibgeschützt.

Rückgabewert

Typ

FormData | null

Beschreibung

Ein FormData-Objekt mit den übermittelten Formularfeldern bei einer POST-Übermittlung, sonst null.

Beispiele

Formularübermittlungen erkennen und protokollieren

navigation.addEventListener('navigate', (event) => {
  if (event.formData) {
    // Nur bei POST-Formularen gesetzt
    for (const [name, value] of event.formData.entries()) {
      console.log(`${name}: ${value}`);
    }
  } else {
    console.log('Keine POST-Formulardaten, Typ:', event.navigationType);
  }
});

email: max@example.com nachricht: Hallo!

POST-Formular in einer SPA per fetch abschicken

// <form action="/kontakt" method="post"> ... </form>
navigation.addEventListener('navigate', (event) => {
  if (!event.formData || !event.canIntercept) return;

  const ziel = new URL(event.destination.url);
  if (ziel.pathname !== '/kontakt') return;

  event.intercept({
    async handler() {
      const antwort = await fetch(ziel, {
        method: 'POST',
        body: event.formData,
        signal: event.signal // bricht ab, wenn eine neue Navigation startet
      });
      const text = await antwort.text();
      document.querySelector('#status').textContent = antwort.ok
        ? 'Danke für Ihre Nachricht!'
        : `Fehler: ${text}`;
    }
  });
});

Einzelne Felder auslesen und prüfen

navigation.addEventListener('navigate', (event) => {
  const daten = event.formData;
  if (!daten) return;

  const menge = Number(daten.get('menge'));
  const tags = daten.getAll('tag');

  if (Number.isNaN(menge) || menge < 1) {
    event.preventDefault(); // Navigation abbrechen (nur wenn cancelable)
    alert('Bitte eine gültige Menge angeben.');
    return;
  }
  console.log({ menge, tags });
});

{ menge: 3, tags: ['neu', 'angebot'] }

// Wichtig · Fallstricke

Nur bei POST: Formulare mit method="get" (Standard!) liefern null. Ihre Daten stehen in event.destination.url als Query-String.
Bei Vor-/Zurück-Navigation (navigationType === "traverse") und in der Regel auch beim Neuladen ist formData null, selbst wenn der Verlaufseintrag ursprünglich durch ein POST-Formular entstanden ist.
Vor event.intercept() immer event.canIntercept prüfen. Navigationen zu anderen Ursprüngen lassen sich nicht abfangen.
Dateifelder (<input type="file">) stehen als File-Objekte im FormData. Beim Senden per fetch() keinen Content-Type-Header selbst setzen, sonst fehlt die multipart-Boundary.
Formulardaten sind Nutzereingaben: Sie müssen serverseitig geprüft werden, eine Prüfung im Client reicht nicht. Außerdem dürfen sie nie ungefiltert über innerHTML ausgegeben werden (XSS).
Kompatibilität: Die Navigation API gibt es seit Chromium 102, andere Engines haben erst später nachgezogen. Unterstützung mit 'navigation' in window prüfen und sonst auf klassische submit-Listener zurückfallen.

Siehe auch

Navigation NavigateEvent.signal NavigateEvent.info NavigateEvent.destination NavigateEvent.hashChange