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.

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

FormData append

• FormData() erstellt ein neues FormData-Objekt,
• FormData.append() hängt ein key-value-Paar an das FormData-Objekt an erstellt neue Schlüssel.

<script>
document.querySelector("button").addEventListener ("click", function () {
   const data = new FormData();
   data.append("item" , document.querySelector("#item").value);
   data.append("price" , document.querySelector("#price").value);
   data.append("data" , "Wird noch mit dazugepackt");
   
   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);
         …
         out.innerHTML += "item " + response.item;
         out.innerHTML += "price " + response.price;
         …
      }
   }
});
</script>

FormData.values und FormData.entries

FormData.values () gibt einen Iterator zurück, der über alle Werte des FormData-Objekts läuft.

let formData = new FormData();
formData.append('item', document.querySelector("#item").value);
formData.append('price', document.querySelector("#price").value);

for (let value of formData.values()) {
   console.log(value); 
}

FormData.entries () gibt Name und Wert zurück.

for (let value of formData.entries()) {
   console.log ("entries " + value[0] + " mit " + value[1]);
}

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.

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.