Práce s FormData v JavaScriptu

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

<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ář:

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

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

let formData = new FormData(form);

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

console.log(formData);

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

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

Daný formulář se třemi vstupy. Dané také tlačítko. Po stisknutí tlačítka získejte data formuláře ve formě objektu FormData.