FormDatan käyttö JavaScriptissä

Oletetaan, että meillä on jokin lomake:

html<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:

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

Nyt luomme objektin lomakkeellamme:

javascriptlet formData = new FormData(form);

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

javascriptconsole.log(formData);

Muunnetaan objektimme taulukoksi nähdäksemme lomakkeen tiedot:

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