FormData használata JavaScriptben

Tegyük fel, hogy van egy űrlapunk:

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

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

Most hozzuk létre az objektumot az űrlapunkkal:

javascriptlet formData = new FormData(form);

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

javascriptconsole.log(formData);

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

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