Εργασία με το FormData στην JavaScript

Ας υποθέσουμε ότι έχουμε μια φόρμα:

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

Ας υποθέσουμε ότι θέλουμε να λάβουμε τα δεδομένα αυτής της φόρμας σε μορφή ζευγών κλειδιού-τιμής. Είναι σαφές ότι για να το κάνουμε αυτό, θα πρέπει να εκτελέσουμε έναν βρόχο και μέσα σε αυτόν να σχηματίσουμε το επιθυμητό. Στην JavaScript, ωστόσο, υπάρχει ένας πιο εύκολος τρόπος - μπορούμε να χρησιμοποιήσουμε ένα ειδικό αντικείμενο FormData, που επιτρέπει την ανάκτηση δεδομένων φόρμας σε διατεταγμένη μορφή.

Ας αναλύσουμε τη λειτουργία με αυτό το αντικείμενο. Αρχικά, ας πάρουμε μια αναφορά στη φόρμα μας:

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

Τώρα ας δημιουργήσουμε το αντικείμενο με τη φόρμα μας:

let formData = new FormData(form);

Μπορούμε να εκτυπώσουμε το αντικείμενο μας στην κονσόλα, ωστόσο με μια τέτοια εκτύπωση δεν θα δούμε τα δεδομένα της φόρμας:

console.log(formData);

Ας μετατρέψουμε το αντικείμενο μας σε πίνακα για να δούμε τα δεδομένα της φόρμας:

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

Δίνεται μια φόρμα με τρία πεδία εισόδου. Δίνεται επίσης ένα κουμπί. Πατώντας το κουμπί, ανακτήστε τα δεδομένα της φόρμας σε μορφή αντικειμένου FormData.