Ρύθμιση και επικύρωση κουμπιών ραδιοφώνου

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

Η δυσκολία με τα κουμπιά επιλογής είναι ότι υπάρχουν τουλάχιστον δύο και συνήθως περισσότερα πεδία που πρέπει να τοποθετηθούν στη φόρμα, να συνδεθούν μαζί και να εξεταστούν ως μία ομάδα. Υπό την προϋπόθεση ότι χρησιμοποιείτε τις σωστές συμβάσεις ονομασίας και τη διάταξη των κουμπιών σας, δεν θα έχετε κανένα πρόβλημα.

Το πρώτο πράγμα που πρέπει να εξετάσουμε όταν χρησιμοποιούμε ραδιοφωνικά κουμπιά στη φόρμα μας είναι πώς πρέπει να κωδικοποιηθούν τα κουμπιά ώστε να λειτουργούν σωστά ως ραδιοφωνικά κουμπιά. Η επιθυμητή συμπεριφορά που θέλουμε είναι να επιλέξετε ένα μόνο κουμπί ταυτόχρονα. όταν είναι επιλεγμένο ένα κουμπί, τότε οποιοδήποτε προηγουμένως επιλεγμένο κουμπί θα απενεργοποιηθεί αυτόματα.

Η λύση εδώ είναι να δώσετε σε όλα τα κουμπιά ραδιοφώνου μέσα στην ομάδα το ίδιο όνομα αλλά διαφορετικές τιμές. Εδώ είναι ο κώδικας που χρησιμοποιείται για το ίδιο το κουμπί επιλογής.

Η δημιουργία πολλών ομάδων κουμπιών επιλογής για τη μία φόρμα είναι επίσης απλή. Το μόνο που χρειάζεται να κάνετε είναι να δώσετε τη δεύτερη ομάδα ραδιοφωνικών κουμπιών με διαφορετικό όνομα από εκείνο που χρησιμοποιείται για την πρώτη ομάδα.

Το πεδίο ονόματος προσδιορίζει σε ποια ομάδα ανήκει ένα συγκεκριμένο κουμπί. Η τιμή που θα περάσει για μια συγκεκριμένη ομάδα όταν υποβληθεί η φόρμα θα είναι η τιμή του κουμπιού μέσα στην ομάδα που επιλέγεται κατά την υποβολή της φόρμας.

Προκειμένου το άτομο που συμπληρώνει τη φόρμα να καταλάβει τι κάνει κάθε κουμπί επιλογής στην ομάδα μας, πρέπει να δώσουμε περιγραφές για κάθε κουμπί. Ο απλούστερος τρόπος για να το κάνετε αυτό είναι να δώσετε μια περιγραφή ως κείμενο αμέσως μετά το κουμπί.

Υπάρχουν μερικά προβλήματα με τη χρήση απλού κειμένου, ωστόσο:

1. Το κείμενο μπορεί να σχετίζεται οπτικά με το κουμπί επιλογής, αλλά μπορεί να μην είναι σαφές σε μερικούς χρήστες που χρησιμοποιούν συσκευές ανάγνωσης οθόνης, για παράδειγμα.
2. Στα περισσότερα διεπαφές χρήστη χρησιμοποιώντας κουμπιά επιλογής, το κείμενο που σχετίζεται με το κουμπί είναι clickable και μπορεί να επιλέξει το αντίστοιχο κουμπί επιλογής. Στην περίπτωσή μας εδώ, το κείμενο δεν θα λειτουργήσει με τον τρόπο αυτό, εκτός εάν το κείμενο σχετίζεται ειδικά με το κουμπί.

Για να συσχετίσετε το κείμενο με το αντίστοιχο κουμπί επιλογής, έτσι ώστε η επιλογή του κειμένου να επιλέξει αυτό το κουμπί, πρέπει να το κάνετε κάντε μια επιπλέον προσθήκη στον κώδικα για κάθε κουμπί, περικλείοντας ολόκληρο το κουμπί και το σχετικό κείμενο μέσα σε ένα επιγραφή.

Ακολουθεί το πλήρες HTML για ένα από τα κουμπιά:

 ένα κουμπί

Ως κουμπί επιλογής με το όνομα ταυτότητας που αναφέρεται στο Για παράμετρος της ετικέτας ετικέτας περιέχεται στην ίδια την ετικέτα, το Για και ταυτότητα οι παραμέτρους είναι περιττές σε ορισμένα προγράμματα περιήγησης. Οι φυλλομετρητές τους, ωστόσο, συχνά δεν είναι αρκετά έξυπνοι για να αναγνωρίσουν τη φωλιά, οπότε αξίζει να τους βάλουμε ώστε να μεγιστοποιήσουν τον αριθμό των προγραμμάτων περιήγησης στα οποία θα λειτουργήσει ο κώδικας.

Αυτό ολοκληρώνει την κωδικοποίηση των ίδιων των ραδιοφωνικών κουμπιών. Το τελευταίο βήμα είναι να ρυθμίσετε την επικύρωση με το ραδιοφωνικό κουμπί χρησιμοποιώντας JavaScript.

Η επικύρωση ομάδων ραδιοφωνικών κουμπιών μπορεί να μην είναι προφανής, αλλά είναι απλή όταν μάθετε πώς.

Η ακόλουθη λειτουργία θα επιβεβαιώσει ότι έχει επιλεγεί ένα από τα κουμπιά επιλογής μιας ομάδας:

// Επικύρωση κουμπιού ραδιοφώνου
// copyright Stephen Chapman, 15 Νοεμβρίου 2004, 14 Σεπτεμβρίου 2005
// μπορείτε να αντιγράψετε αυτή τη λειτουργία, αλλά παρακαλώ κρατήστε την ειδοποίηση πνευματικών δικαιωμάτων μαζί της
συνάρτηση valButton (btn) {
var cnt = -1.
για (var i = btn.length-1; i> -1. Εγώ--) {
αν (btn [i] .checked) {cnt = i; i = -1 ·}
}
αν (cnt> -1) επιστρέφουμε btn [cnt] .value;
else επιστροφή null?
}

Για να χρησιμοποιήσετε την παραπάνω λειτουργία, καλέστε την από τη ρουτίνα επικύρωσης της φόρμας και περάστε το όνομα της ομάδας κουμπιών επιλογής. Θα επιστρέψει την τιμή του κουμπιού μέσα στην ομάδα που έχει επιλεγεί ή θα επιστρέψει μια τιμή null εάν δεν έχει επιλεγεί κανένα κουμπί στην ομάδα.

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

var btn = ValButton (form.group1).
αν (btn == null) alert ('Δεν έχει επιλεγεί κανένα κουμπί επιλογής');
else alert ('Τιμή κουμπιού' + btn + 'επιλεγμένο');

Αυτός ο κώδικας συμπεριλήφθηκε στη συνάρτηση που ονομάζεται a στο κλικ συμβάν που επισυνάπτεται στο κουμπί επικύρωσης (ή υποβολής) στη φόρμα.

Μια αναφορά σε ολόκληρη τη μορφή πέρασε ως παράμετρος στη συνάρτηση, η οποία χρησιμοποιεί το όρισμα "φόρμα" για να αναφερθεί στην πλήρη φόρμα. Για να επικυρώσουμε την ομάδα κουμπιών με την ομάδα ονομάτων1, επομένως, περάσαμε το form.group1 στη συνάρτηση valButton.

Όλες οι ομάδες κουμπιών επιλογής που θα χρειαστείτε ποτέ μπορούν να αντιμετωπιστούν χρησιμοποιώντας τα βήματα που περιγράφονται παραπάνω.