Σε αυτό το Οδηγός μαθαίνεις πώς μπορείς να διαβάζεις και να επεξεργάζεσαι τα δεδομένα που εισάγουν οι χρήστες από τις φόρμες με τη βοήθεια του JavaScript. Τα στοιχεία φόρμας είναι ένα ουσιαστικό μέρος κάθε ιστοσελίδας, καθώς επιτρέπουν στους χρήστες να εισάγουν πληροφορίες. Συχνά νομίζεται ότι για αυτό χρειάζεται να βασιστεί κανείς σε πολύπλοκα frameworks. Σε αυτή την ανάρτηση δείχνουμε πώς μπορείς να επεξεργαστείς επιτυχώς δεδομένα φόρμας με απλό JavaScript.
Κύριες Ευρήματα
- Μάθεις πώς να δημιουργείς φόρμες, πώς να έχεις πρόσβαση στα δεδομένα των φορμών με το JavaScript και πώς να εμποδίζεις την προεπιλεγμένη συμπεριφορά των φορμών χρησιμοποιώντας το preventDefault, ώστε να αποκτήσεις τον έλεγχο στα δεδομένα που εισάγουν οι χρήστες.
Οδηγίες Βήμα προς Βήμα
Ξεκίνα δημιουργώντας μια απλή φόρμα HTML στο έγγραφό σου. Βεβαιώσου ότι εισάγεις με επιτυχία τα διάφορα πεδία κειμένου και ένα κουμπί Υποβολή.
Μόλις η φόρμα σου είναι ορατή στον περιηγητή, μπορείς να τη δοκιμάσεις. Εισάγεις ένα όνομα στο πεδίο κειμένου και πατάς το πλήκτρο Enter ή το κουμπί Υποβολή. Αν όλα λειτουργούν σωστά, θα πρέπει να δεις ένα ειδοποιητικό με το όνομα που εισήγαγες.
Για να το επιτύχουμε αυτό, προσθέτουμε ένα ετικέτα σεναρίου (script) στο αρχείο HTML σου. Σε αυτό το σενάριο ορίζεις μια παγκόσμια συνάρτηση με το όνομα submitForm, η οποία δέχεται ένα αντικείμενο γεγονότος (Event Object) ως παράμετρο.
Στο σενάριο μπορείς να ορίσεις το χειριστή συμβάντος onsubmit για τη φόρμα σου. Αυτό σημαίνει ότι η λειτουργία submitForm καλείται όταν υποβάλλεται η φόρμα. Σημείωσε ότι το αντικείμενο γεγονότος είναι πάντα διαθέσιμο όταν βρίσκεσαι σε χειριστή συμβάντος.
Ένας από τους σημαντικούς βήματα είναι η αποτροπή της προεπιλεγμένης ενέργειας της φόρμας καλώντας το event.preventDefault(). Αυτό είναι σημαντικό διότι δεν θέλουμε η σελίδα να φορτώνεται ξανά μετά την υποβολή των δεδομένων.
Τώρα μπορείς να αρχίσεις την ανάκτηση των δεδομένων της φόρμας. Τα δεδομένα της φόρμας είναι διαθέσιμα στο event.target, κάτι που κάνει εύκολη την πρόσβαση στις πληροφορίες που εισήγαγε ο χρήστης.
Για να αποκτήσεις τα δεδομένα της φόρμας, δημιούργησε ένα νέο αντικείμενο με το Constructor FormData και περνάς το στοιχείο της φόρμας ως παράμετρο. Μετά τη δημιουργία του αντικειμένου, μπορείς να έχεις πρόσβαση στις τιμές των εισόδων μέσω της μεθόδου get.
Με το formData.get('firstName') για παράδειγμα μπορείς να λάβεις την τιμή του πεδίου εισόδου που έχει όνομα 'firstName'. Στη συνέχεια μπορείς να χρησιμοποιήσεις αυτήν την τιμή για να δημιουργήσεις ένα μήνυμα που θα εμφανίζεται στον χρήστη.
Αν θες να επεκτείνεις τη φόρμα σου με ένα πρόσθετο πεδίο εισόδου, ακολούθησε τα παρακάτω: Πρόσθεσε ένα επιπλέον πεδίο κειμένου για το επώνυμο με το όνομα 'lastName'. Έπειτα μπορείς να ακολουθήσεις παρόμοια βήματα για την ανάκτηση της τιμής του.
Με τις δύο τιμές μπορείς να δημιουργήσεις ένα εξατομικευμένο μήνυμα. Για παράδειγμα: "Γεια σου [Όνομα] [Επώνυμο]!"
Για να μην εμφανίζεται πλέον το μήνυμα μέσω μιας ειδοποίησης, αλλά να ενσωματωθεί απευθείας στο HTML, μπορείς να προσθέσεις μια νέα ενότητα στο DOM, η οποία θα περιλαμβάνει το μήνυμα ως κείμενο. Δημιούργησε ένα div με μια μοναδική ID και ορίστε το innerText σε αυτό το μήνυμα.
Μπορείς τώρα να δοκιμάσεις διάφορες παραλλαγές, εμφανίζοντας τα δεδομένα στην κονσόλα ή χρησιμοποιώντας τα για περαιτέρω ενέργειες JavaScript, όπως ένα αίτημα POST μέσω της fetch.
Αυτή είναι ο πιο βασικός τρόπος με τον οποίο μπορείτε να διαβάσετε και να χρησιμοποιήσετε δεδομένα φόρμας με το JavaScript. Υπάρχουν πολλοί άλλοι τρόποι για να βελτιώσετε αυτή την διαδικασία, όπως η εισαγωγή επαληθεύσεων ή η περαιτέρω επεξεργασία των δεδομένων στον διακομιστή.
Σύνοψη
Σε αυτό το εγχειρίδιο μάθατε πώς να διαβάζετε δεδομένα φόρμας με απλές λειτουργίες JavaScript. Εξερευνήσατε τη σημασία του event.preventDefault και είδατε πώς μπορείτε να εισάγετε δεδομένα είτε σε ειδοποιήσεις (Alerts) είτε απευθείας στο έγγραφο. Με αυτήν τη βάση είστε ετοιμοπαράδοτοι να σχεδιάσετε πιο σύνθετες φόρμες και τη διαχείριση των δεδομένων τους.
Συχνές Ερωτήσεις
Πώς μπορώ να έχω πρόσβαση στα δεδομένα φόρμας;Μπορείτε να έχετε πρόσβαση στα δεδομένα της φόρμας δημιουργώντας ένα νέο αντικείμενο FormData με το new FormData(event.target).
Τι συμβαίνει αν δεν καλέσω το event.preventDefault();Χωρίς το event.preventDefault();, η προεπιλεγμένη συμπεριφορά του προγράμματος περιήγησης θα εκτελεστεί, με αποτέλεσμα τη φόρτωση της σελίδας.
Μπορώ να έχω περισσότερες από μία φόρμες σε μία σελίδα;Ναι, μπορείτε να έχετε περισσότερες από μία φόρμες σε μία σελίδα και κάθε φόρμα μπορεί να έχει τη δική της συνάρτηση onsubmit.
Πώς μπορώ να χρησιμοποιήσω τα δεδομένα της φόρμας για μια αίτηση Fetch;Μπορείτε να μετατρέψετε τα δεδομένα της φόρμας σε μορφή JSON και μετά να τα στείλετε στον διακομιστή χρησιμοποιώντας το Fetch-API.
Είναι απαραίτητα τα πλαισια JavaScript για την επεξεργασία των φορμών;Όχι, δεν είναι απαραίτητο να χρησιμοποιείτε πλαίσια. Μπορείτε να επεξεργαστείτε τις φόρμες αποκλειστικά με το απλό JavaScript.
