ההגדרה ואימות של כפתורי רדיו נראה שהוא שדה טופס זה נותן למנהלי אתרים רבים את הקושי ביותר בהגדרה. למעשה, ההתקנה של שדות אלה היא הפשוטה ביותר מבין כל שדות הטופס לאימות ככפתורי רדיו קובעים ערך אחד שצריך להיבדק רק עם הגשת הטופס.
הקושי עם כפתורי הרדיו הוא שיש לפחות שניים ולרוב יותר שדות שצריך להציב על הטופס, קשורים זה לזה ונבדקים כקבוצה אחת. בתנאי שתשתמש במוסכמות ושמות המתאים הנכונים עבור הכפתורים שלך, לא תהיה לך שום בעיה.
הגדר את קבוצת כפתורי הרדיו
הדבר הראשון שצריך להסתכל עליו כאשר משתמשים בכפתורי רדיו בטופס שלנו, הוא כיצד צריך לקודד את הכפתורים כדי שהם יתפקדו ככפתורי רדיו. ההתנהגות הרצויה שאנו רוצים היא לבחור רק כפתור אחד בכל פעם; כשבוחרים כפתור אחד, כל כפתור שנבחר בעבר יבוטל אוטומטית.
הפיתרון כאן הוא לתת לכל כפתורי הרדיו בקבוצה את אותו שם אך ערכים שונים. להלן הקוד המשמש עבור לחצן הבחירה עצמם.
יצירת קבוצות מרובות של כפתורי רדיו עבור הצורה האחת היא גם פשוטה. כל שעליך לעשות הוא לספק לקבוצה השנייה של כפתורי הרדיו שם שונה מזה שמשמש לקבוצה הראשונה.
שדה השם קובע לאיזו קבוצה כפתור מסוים שייך. הערך שיועבר לקבוצה ספציפית עם הגשת הטופס יהיה ערך הכפתור בתוך הקבוצה שנבחרה בזמן הגשת הטופס.
תאר כל כפתור
על מנת שהאדם שממלא את הטופס יבין מה עושה כל כפתור רדיו בקבוצה שלנו, עלינו לספק תיאורים לכל כפתור. הדרך הפשוטה ביותר לעשות זאת היא לספק תיאור כטקסט מייד לאחר הכפתור.
עם זאת, יש כמה בעיות בשימוש בטקסט רגיל, עם זאת:
- הטקסט עשוי להיות משויך באופן ויזואלי לכפתור הבחירה, אך ייתכן שלא יהיה ברור עבור חלק מהמשתמשים בקוראי מסך, למשל.
- ברוב ממשקי משתמש באמצעות לחצני אפשרויות, ניתן ללחוץ על הטקסט המשויך לכפתור ומסוגל לבחור בלחצן הבחירה המשויך אליו. במקרה שלנו כאן הטקסט לא יעבוד בצורה זו אלא אם הטקסט משויך באופן ספציפי לכפתור.
שיוך טקסט לכפתור רדיו
כדי לשייך את הטקסט לכפתור הבחירה המתאים לו כך שלחיצה על הטקסט תבחר בלחצן זה, עלינו לעשות זאת הוסף תוספת לקוד עבור כל כפתור על ידי הקפת הכפתור כולו והטקסט המשויך אליו בתוך תווית.
כך נראה HTML המלא של אחד הכפתורים:
ככפתור הבחירה עם שם הזיהוי המוזכר ב- ל הפרמטר של תג התווית כלול למעשה בתוך התג עצמו, ל ו מזהה פרמטרים מיותרים בחלק מהדפדפנים. עם זאת, לעיתים קרובות הדפדפנים שלהם אינם חכמים כדי לזהות את הקינון, ולכן כדאי להכניס אותם למקסימום כמות הדפדפנים שבהם הקוד יתפקד.
זה משלים את קידוד כפתורי הרדיו עצמם. השלב האחרון הוא הגדרת אימות לחצן הבחירה באמצעות JavaScript.
הגדרת אימות כפתור הרדיו
אימות של קבוצות כפתורי רדיו אולי לא ברור מאליו, אבל זה פשוט ברגע שאתה יודע איך.
הפונקציה הבאה תאמת כי אחד מכפתורי הרדיו בקבוצה נבחר:
// אימות כפתור הרדיו
// זכויות יוצרים סטיבן צ'פמן, 15 בנובמבר 2004, 14 בספטמבר 2005
// אתה רשאי להעתיק פונקציה זו אך אנא שמור את הודעת זכויות היוצרים איתה
פונקציה valButton (btn) {
var cnt = -1;
עבור (var i = btn.length-1; i> -1; אני--) {
אם (btn [i]. בדק) {cnt = i; i = -1;}
}
אם (cnt> -1) להחזיר btn [cnt]. ערך;
אחרת להחזיר null;
}
כדי להשתמש בפונקציה שלמעלה, התקשר אליה מתוך שגרת אימות הטופס שלך והעביר לה את שם קבוצת כפתורי הבחירה. זה יחזיר את ערך הכפתור בקבוצה שנבחרה, או יחזיר ערך null אם לא נבחר כפתור בקבוצה.
לדוגמה, הנה הקוד שיבצע את אימות כפתור הרדיו:
var btn = valButton (form.group1);
אם (btn == null) התראה ('לא נבחר כפתור רדיו');
התראה אחרת ('ערך לחצן' + btn + 'נבחר');
קוד זה נכלל בפונקציה שנקראה על ידי an בלחיצה האירוע המצורף לכפתור האימות (או הגשת) בטופס.
הפניה לכל הטופס הועברה כפרמטר לפונקציה, המשתמשת בטיעון ה"טופס "כדי להתייחס לטופס השלם. כדי לאמת את קבוצת כפתורי הבחירה בקבוצת השם1 אנו, אפוא, מעבירים את form.group1 לפונקציה valButton.
ניתן לטפל בכל קבוצות כפתורי הבחירה שתידרש אי פעם באמצעות הצעדים המפורטים לעיל.