Att arbeta med FormData i JavaScript

Låt oss säga att vi har ett formulär:

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

Låt oss säga att vi vill få data från detta formulär i form av nyckel-värde-par. Det är förstås klart att vi för att göra detta måste köra en loop och i den skapa det önskade. I JavaScript finns det dock ett enklare sätt - man kan använda ett specialobjekt FormData, som låter dig få formulärdata på ett ordnat sätt.

Låt oss gå igenom hur man arbetar med detta objekt. Låt oss först få en referens till vårt formulär:

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

Låt oss nu skapa ett objekt med vårt formulär:

let formData = new FormData(form);

Man kan skriva ut vårt objekt till konsolen, men med en sådan utskrift kommer vi inte att se formulärdatan:

console.log(formData);

Låt oss omvandla vårt objekt till en array för att se formulärdatan:

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

Ett formulär med tre inmatningsfält är givet. En knapp är också given. Vid klick på knappen, hämta formulärdatan i form av ett FormData-objekt.