Javascript FormData

Übersichtliche Datenübermittlung

FormData übermittelt Daten als Name-Werte-Paare an die Anwendung auf den Server – und zwar nicht nur Daten aus einem Formular.

<form id="form" action="formdata.php">
	<input type="text" name="item" id="item>
	<input type="text" name="price" id="price">
	<input type="checkbox" name="chk" id="chk" checked> Mitmachen!
	<textarea name="tx" id="tx">Und etwas Text mit in die Übertragung</textarea>
	<button>Submit</button>
</form>

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 ()). Eine Instanz des FormDate-Objekts anlegen mit

const data = new FormData (form);

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

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

function onSubmit (evt) {
	evt.preventDefault ();
	const data = new FormData (form);
	console.log (data);
}

form.addEventListener ("submit", onSubmit);

▼ 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.

function onSubmit (evt) {
	evt.preventDefault ();
	const data = new FormData (form);
	console.log (data);
	
	const item  = data.get ("item");
	const price = data.get ("price");
	const chk   = data.get ("chk");
	const tx    = data.get ("tx");

	console.log ("data", item, price, chk, tx);
}

Mit den vier Zeilen hat das Skript alle Werte versammelt.

data – "Fahrrad" – "675" – "on" – "Kommt man mit diesem Rad auch gut über Feldwege?"

FormData.entries ()

Ein etwas komplizierterer Anlauf, dafür dann alle Werte in einem Rutsch einholen. data.entries gibt uns einen FormData-Iterator, der alle Name-Wert-Paare des Formulars automatisch in Arrays mit jeweils dem name-Attribut und den 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]);
	}
}

Die Konsolenausgabe liefert

["item", "Fahrrad"] (2) 
["price", "675"] (2) 
["chk", "on"] (2) 
["tx", "Kommt man mit diesem Rad auch gut über Feldwege?"] (2) 

Das sind einfache Arrays, elem[1] erreicht also den Wert, elem[0] den Namen des Eingabefelds.

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 ("foo", "Und eine kleine Zugabe");
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 auch ohne Javascript – wenn auch wahrscheinlich deutlich unbequemer für den Benutzer.

Absenden (z.B. mit einem XHR, am Ende der Funktion onSubmit):

const xhr = new XMLHttpRequest();
xhr.open( 'post', 'formdata.php', true );
xhr.send(data);

xhr.onreadystatechange = function() {
	if(xhr.readyState == 4) {
		let response = JSON.parse(xhr.responseText);
		document.querySelector ('.res').innerHTML = `data ${response.data} 
`;
		document.querySelector ('.res').innerHTML += `item ${response.item} 
`;
		document.querySelector ('.res').innerHTML += `price ${response.price} 
`;
		document.querySelector ('.res').innerHTML += `chk ${response.chk} 
`;
		document.querySelector ('.res').innerHTML += `tx ${response.tx} 
`;
	}
}

Am Rande: formdata.php wirft die Werte nur einfach zurück, einfacher Test, ob die Daten korrekt versendet und vom PHP-Script erkannt werden.

Der Vorteil gegenüber JSON: 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.

Javascript kann zwar Daten aus XML-Dateien lesen, aber kann Dateien nicht schreiben und speichern. Beispiel: PHP – Daten aus Formdata in XML übernehmen – Sparversion.

<?php
$xml = new DomDocument("1.0", "UTF-8" );
$xml->FormatOutput = true;

$insale = $_POST["item"];
$inprice = $_POST["price"];

if (file_exists('formdata.xml')) {
	$xml->load("formdata.xml");
	$root = $xml->getElementsByTagName("root")->item(0);
	
} else {
	$root = $xml->createElement("root");
	$root = $xml->appendChild($root);
}
$sale = $xml->createElement("sale");
$sale = $root->appendChild($sale);

$item = $xml->createElement("item",$insale);
$item = $sale->appendChild($item);

$price = $xml->createElement("price",$inprice);
$price = $sale->appendChild($price);

$string_value = $xml->saveXML();
$xml->save("formdata.xml");

Browser-Support

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