Werken met FormData in JavaScript

Stel we hebben een formulier:

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

Stel we willen de gegevens van dit formulier verkrijgen in de vorm van sleutel-waarde paren. Het is duidelijk dat we daarvoor een lus moeten uitvoeren en daarin het gewenste moeten vormen. In JavaScript is er echter een eenvoudigere manier - je kunt een speciaal object FormData gebruiken, dat het mogelijk maakt om op een geordende manier formuliergegevens te verkrijgen.

Laten we het werken met dit object bespreken. Laten we eerst een referentie naar ons formulier verkrijgen:

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

Laten we nu een object met ons formulier aanmaken:

let formData = new FormData(form);

We kunnen ons object in de console uitvoeren, maar bij zo'n uitvoer zullen we de formuliergegevens niet zien:

console.log(formData);

Laten we ons object omzetten in een array om de formuliergegevens te zien:

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

Gegeven een formulier met drie invoervelden. Ook is er een knop. Bij het klikken op de knop, verkrijg de formuliergegevens in de vorm van een FormData object.