Javascript FormData – Datenübermittlung als Name-Werte-Paare

Übersichtliche Datenübermittlung

FormData übermittelt Daten als Name-Werte-Paare an die Anwendung auf den Server – und zwar nicht nur Daten aus einem Formular. Die append-Methode kann zusätzliche Name-Wert-Paare ohne Eingabefeld dynamisch in die Übermittlung aufnehmen.

Konsolenausgabe vor dem Versenden der Daten

Von der PHP-Anwendung auf dem Server empfangene Daten

Das Skript muss sich nicht um die Kodierung der Umlaute und Sonderzeichen kümmern, die Werte aus Checkbox-Feldern gehen automatisch in ein Array.

FormData Methoden

Wie auch bei den älteren Techniken zum Validieren und Absenden der Formulardaten mit JavaScript muss die Übermittlung an die Anwendung auf dem Server zuerst außer Kraft gesetzt werden (evt.preventDefault ()).

const form = document.querySelector ("#formdemo");

function onSubmit (evt) {
	evt.preventDefault ();
	// Eine Instanz des FormDate-Objekts anlegen
	const data = new FormData (form);
	console.log (data);
}

form.addEventListener ("submit", onSubmit);

Die Konsole zeigt nicht die vorliegenden Werte der Eingabefelder, aber eine Liste der Methoden des Objekts.

▼ FormData
  Keine Eigenschaften
  ▼ FormData Prototyp
    f append([name], [value], [filename])
  ▶ f constructor: function()
    f delete()
    f entries()
    f forEach()
    f get()
    f getAll()
    f has()
    f keys()
    f set()
    f values()
    …

• data.get () gibt individuelle Werte der Eingabefelder zurück.
• data.entries () gibt einen Iterator zurück, der über alle Name-Wert-Paare des Formulars läuft.
• data.append () hängt ein key-value-Paar an das FormData-Objekt an und erstellt neue Schlüssel.
• data.values () gibt ebenfalls einen Iterator zurück, der nur die Werte des FormData-Objekts anspricht.

Das Argument von data.get ist das Name-Attribut des Eingabefelds als String in Hochkommas.

const artikel = data.get ("artikel");
const start   = data.get ("start");
const txt     = data.get ("txt");
const mitm    = data.get ("mitm");
}

Mit den vier Zeilen hat das Skript alle Werte des Formulars eingesammelt.

FormData.entries () – alle Name-Wert-Paare des Formulars

Statt die Name-Wert-Paar Stück für Stück mit data.get () abzuholen, liefert FormData.entries () automatisch alle verfügbaren Paare in einem Rutsch. data.entries stellt einen FormData-Iterator zur Verfügung, der die Benutzereingaben des Formulars automatisch in Arrays mit jeweils dem name-Attribut und dem aktuellen Wert zurückgibt.

function onSubmit (evt) {
	evt.preventDefault ();
	const data = new FormData (form);
	
	const entries = data.entries ();
	for (const elem of entries) {
		console.log (elem[0], elem[1]);
	}
}

Jedes Paar ist ein einfaches Array. elem[0] reicht den Namen des Eingabefelds durch, elem[1] liefert den Wert durch (wobei der Wert bei einem input type="checkbox" selber ein Array sein kann).

FormData.append () und FormData.values ()

append () hängt ein weiteres Name/Wert-Paar an, das so nicht im Formular vorkommt. FormData.values () gibt wie FormData.entries () einen Iterator zurück, der über alle Werte des FormData-Objekts läuft.

data.append ("name", "Martina Schmitz");
const values = data.values ();
for (const item of values) {
	console.log (item)
}

Weitere FormData-Methoden: Referenz bei MDN Web Docs

Formulardaten in PHP übernehmen

In der Anwendung auf dem Server kommen die Daten »ganz normal« als $_POST-Array an. Wenn also Javascript im Browser nicht aktiv ist, haben wir ein normales HTML-Formular und eine normale PHP-Anwendung. Das Formular funktioniert also auch ohne Javascript, nur mit FormData.append () übernommene Werte würden dann ein input type="hidden"-Feld brauchen, um die Werte an die Anwendung zu übertragen.

Absenden mit fetch:

fetch ("formdatademo.php", {
	method: "POST",
	body: data
})
.then (response => response.json())
.then (data => {
	console.log('Antwort vom Server:', data);	
})
.catch (error => {
	console.error ("Fehler bei der Datenübermittlung", error)
});

Am Rande: formdata.php wirft nur einen einfacher Text zurück, um anzuzeigen, dass die Daten korrekt versendet und vom PHP-Script erkannt werden. Die Daten auf der Serverseite sind nicht von einer normalen Datenübertragung zu unterscheiden. Nur der Wert von data, der ohne das klassische input type="hidden" an die Anwendung übertragen wird, käme in diesem Fall nicht bei der Anwendung an.

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $username = $_POST['name'];
    $artikel = $_POST['artikel'];
    $txt = $_POST['txt'];

    
    if (isset($_POST['mitm'])) {
		$mitm = $_POST['mitm'];
	} else {
		$mitm = "nicht mitmachen";
	}

    // Nur kurzangebundenen Text zurück als Erfolgsmeldung
    $response = array('success' => true, 'message' => 'Daten erfolgreich empfangen.');
    echo json_encode($response);
} else {
    // Fehlermeldung, falls es keine POST-Anfrage war
    header('HTTP/1.1 405 Method Not Allowed');
    echo 'Ungültige Anfrage';
}
?>

Browser-Support

Die grundlegenden Funktionen FormData mit FormData.append werden von allen modernen Browsern unterstützt, IE ab Version 10.