FormDatan käyttö JavaScriptissä

Oletetaan, että meillä on jokin lomake:

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

Oletetaan, että haluamme saada tämän lomakkeen tiedot avain-arvo -pareina. On selvää, että meidän on suoritettava silmukka ja muodostettava haluttu tieto siellä. JavaScriptissä on kuitenkin olemassa yksinkertaisempi tapa - voit käyttää erikoista FormData -objektia, joka mahdollistaa lomaketietojen saamisen järjestetyssä muodossa.

Käydään läpi työskentely tämän objektin kanssa. Aluksi saamme viittauksen lomakkeeseemme:

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

Nyt luomme objektin lomakkeellamme:

let formData = new FormData(form);

Voimme tulostaa objektimme konsoliin, kuitenkin tällaisella tulostuksella emme näe lomakkeen tietoja:

console.log(formData);

Muunnetaan objektimme taulukoksi nähdäksemme lomakkeen tiedot:

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

Annettu lomake, jossa on kolme syöttökenttää. Annettu myös painike. Painikkeen painalluksella haetaan lomakkeen tiedot FormData -objektin muodossa.