Lavorare con FormData in JavaScript

Supponiamo di avere un modulo:

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

Supponiamo di voler ottenere i dati di questo modulo in forma di coppie chiave-valore. È chiaro, che per farlo dovremmo eseguire un ciclo e al suo interno formare ciò che desideriamo. In JavaScript, comunque, esiste un modo più semplice - si può utilizzare un oggetto speciale FormData, che permette di ottenere in modo ordinato i dati del modulo.

Analizziamo come lavorare con questo oggetto. Per iniziare, otteniamo un riferimento al nostro modulo:

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

Ora creiamo un oggetto con il nostro modulo:

let formData = new FormData(form);

Possiamo stampare il nostro oggetto nella console, tuttavia con tale output non vedremo i dati del modulo:

console.log(formData);

Convertiamo il nostro oggetto in un array, per vedere i dati del modulo:

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

Dato un modulo con tre input. Data anche un pulsante. Alla pressione del pulsante, ottieni i dati del modulo sotto forma di oggetto FormData.