Praca z FormData w JavaScript

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

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

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

Teraz utwórzmy obiekt z naszym formularzem:

javascriptlet formData = new FormData(form);

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

javascriptconsole.log(formData);

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

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