Javascript FormData

Formulare mit Javascript formdata einfacher bearbeiten

Javascript FormData belegt die Name-Wert-Paare eines Formulars und encodiert die Werte bei der Übertragung.

Das spart das langatmige Navigieren durch die Eingabefelder eines Formulars und Zusammenstellen eines Post-Requests oder eines JSON-Objekts und liefert die Daten Prêt-à-porter an die Anwendung.

Ü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 () {
   let data = new FormData();
   data.append("item" , document.querySelector("#item").value);
   data.append("price" , document.querySelector("#price").value);
   data.append("data" , "Wird noch mit dazugepackt");
   
   let 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]);
}

Nicht in IE 10 und IE11 und auch in Microsoft Edge immer noch nicht!

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.

Wer noch IE9 und älter unterstützen muss, wird eher jQuery oder eine andere Library einsetzen, die ihre eigenen Methoden zum Extrahieren der Daten aus Eingabefeldern bieten.

formData