FormData használata JavaScriptben

Tegyük fel, hogy van egy űrlapunk:

<form action="/target/" method="POST">
	<input name="test1" value="123">
	<input name="test2" value="456">
	<input type="submit">
</form>

Tegyük fel, hogy az űrlap adatait kulcs-érték párok formájában szeretnénk megkapni. Érthető, hogy ehhez ciklust kell futtatnunk és azban kell létrehoznunk a kívánt formátumot. JavaScriptben azonban van egy egyszerűbb módszer - használhatjuk a speciális FormData objektumot, amely lehetővé teszi az űrlap adatainak rendezett módon történő lekérését.

Nézzük meg ennek az objektumnak a használatát. Először szerezzük meg az űrlapunkra mutató hivatkozást:

let form = document.querySelector('form');

Most hozzuk létre az objektumot az űrlapunkkal:

let formData = new FormData(form);

Kiírhatjuk az objektumot a konzolra, azonban ilyen kiírással nem fogjuk látni az űrlap adatait:

console.log(formData);

Alakítsuk át az objektumunkat tömbbé, hogy láthassuk az űrlap adatait:

console.log(Array.from(formData));

Adott egy három bemenettel rendelkező űrlap. Adott egy gomb is. A gomb megnyomásakor kérje le az űrlap adatait FormData objektum formájában.