Práce s FormData v JavaScriptu

Nechť máme nějaký formulář:

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

Nechť chceme získat data tohoto formuláře ve formě párů klíč-hodnota. Je jasné, že k tomu budeme muset spustit cyklus a v něm vytvořit požadované. V JavaScriptu ovšem existuje jednodušší způsob - lze použít speciální objekt FormData, umožňující získávat data formuláře uspořádaným způsobem.

Pojďme si rozeberat práci s tímto objektem. Nejprve získáme odkaz na náš formulář:

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

Nyní vytvoříme objekt s naším formulářem:

javascriptlet formData = new FormData(form);

Můžeme vypsat náš objekt do konzole, avšak při takovém výpisu data formuláře neuvidíme:

javascriptconsole.log(formData);

Převedeme náš objekt na pole, abychom viděli data formuláře:

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