Arbeid med FormData i JavaScript

La oss si at vi har et skjema:

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

La oss si at vi ønsker å hente dataene fra dette skjemaet i form av nøkkel-verdi-par. Det er klart at for å gjøre dette må vi kjøre en løkke og deretter danne det ønskede. I JavaScript finnes det imidlertid en enklere måte - vi kan bruke et spesielt objekt kalt FormData, som lar oss hente skjemadata på en strukturert måte.

La oss gå gjennom hvordan man arbeider med dette objektet. Først henter vi en referanse til skjemaet vårt:

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

Nå oppretter vi et objekt med skjemaet vårt:

let formData = new FormData(form);

Vi kan skrive ut objektet vårt til konsollen, men ved en slik utskrift vil vi ikke se skjemadataene:

console.log(formData);

La oss konvertere objektet vårt til en array for å se skjemadataene:

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

Det er gitt et skjema med tre input-felt. Det er også gitt en knapp. Ved klikk på knappen, hent skjemadata i form av et FormData-objekt.