Praca z FormData w JavaScript

Załóżmy, że mamy pewien formularz:

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

Załóżmy, że chcemy uzyskać dane tego formularza w postaci par klucz-wartość. Jest oczywiste, że w tym celu będziemy musieli uruchomić pętlę i w niej utworzyć pożądany obiekt. W JavaScript istnieje jednak prostszy sposób - można użyć specjalnego obiektu FormData, który pozwala w uporządkowany sposób pobierać dane formularza.

Przeanalizujmy pracę z tym obiektem. Na początek uzyskajmy referencję do naszego formularza:

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

Teraz utwórzmy obiekt z naszym formularzem:

let formData = new FormData(form);

Możemy wypisać nasz obiekt w konsoli, jednak przy takim wypisie nie zobaczymy danych formularza:

console.log(formData);

Przekształćmy nasz obiekt w tablicę, aby zobaczyć dane formularza:

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

Dany jest formularz z trzema polami input. Dana jest również przycisk. Po naciśnięciu przycisku uzyskaj dane formularza w postaci obiektu FormData.