Arbejde med FormData i JavaScript

Lad os sige, at vi har en form:

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

Lad os sige, at vi ønsker at hente data fra denne form i form af nøgle-værdi-par. Det er klart, at vi for at gøre dette bliver nødt til at køre en løkke og i den danne det ønskede. I JavaScript findes der dog en enklere måde - man kan bruge et specielt objekt kaldet FormData, som gør det muligt at hente formdata på en struktureret måde.

Lad os gennemgå arbejdet med dette objekt. Lad os først få en reference til vores form:

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

Nu opretter vi et objekt med vores form:

let formData = new FormData(form);

Man kan udskrive vores objekt til konsollen, men ved en sådan udskrivning vil vi ikke se formdata:

console.log(formData);

Lad os konvertere vores objekt til et array for at se formdata:

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

Der er givet en form med tre input-felter. Der er også givet en knap. Ved klik på knappen, skal du hente data fra formen som et FormData-objekt.