Raadionuppude seadistamine ja valideerimine

Süsteemi seadistamine ja valideerimine raadionupud näib olevat vormiväli mis tekitab paljudel veebimeistritel seadistamisel kõige rohkem raskusi. Tegelikult on nende väljade seadistamine kõigist vormiväljadest kõige lihtsam, et raadionuppudena kinnitada, üks väärtus, mida tuleb testida ainult vormi esitamisel.

Raadionuppude puhul on keeruline see, et vormil on vähemalt kaks ja tavaliselt rohkem välja, mis tuleb vormi panna, omavahel seostada ja ühe rühmana testida. Kui kasutate oma nuppude jaoks õigeid nimetamise tavasid ja paigutust, pole teil probleeme.

Esimene asi, mida meie vormil raadionuppude kasutamisel tasub silmas pidada, on see, kuidas on vaja nuppe kodeerida, et need raadionuppudena korralikult toimiksid. Soovitud käitumine on, et korraga oleks valitud ainult üks nupp; kui üks nupp on valitud, eemaldatakse automaatselt kõik varem valitud nupud.

Lahendus on siin anda rühma kõigile raadionuppudele sama nimi, kuid erinevad väärtused. Siin on raadionupu enda jaoks kasutatud kood.

Mitme raadionuppude rühma loomine ühe vormi jaoks on samuti lihtne. Kõik, mida peate tegema, on pakkuda teisele raadionuppude rühmale erinevat nime kui esimesel rühmal.

Nimiväli määrab, millisesse rühma see nupp kuulub. Väärtus, mis antakse konkreetse rühma jaoks vormi esitamisel üle, on nupu väärtus rühmas, mis on vormi esitamise ajal valitud.

Selleks, et vormi täitev inimene saaks aru, mida teeb meie rühmas iga raadionupp, peame iga nupu kirjeldama. Lihtsaim viis selleks on kirjelduse esitamine kohe nupule järgneva tekstina.

Lihtsa teksti kasutamisel on siiski paar probleemi:

1. Teksti võib visuaalselt seostada raadionupuga, kuid näiteks ekraaniekraani kasutavate jaoks ei pruugi see olla selge.
2. Enamikus kasutajaliidesed raadionuppude abil on nupuga seotud tekst klõpsatav ja sellega saab valida raadionuppu. Meie antud juhul ei tööta tekst sel viisil, kui tekst pole konkreetselt nupuga seotud.

Teksti seostamiseks vastava raadionupuga nii, et teksti klõpsates valitakse see nupp, peame seda tegema lisage iga nupu koodile täiendav lisa, ümbritsedes kogu nupu ja sellega seotud teksti a-osas silt.

Ühe nupu täielik HTML näeks välja järgmine:

 nuppu üks

Nagu raadionupp, mille tunnusnimi on viidatud jaoks etiketi parameeter sisaldub tegelikult sildis endas, jaoks ja id parameetrid on mõnes brauseris ülearused. Nende brauserid pole aga pesa tuvastamiseks sageli piisavalt nutikad, seetõttu tasub need sisse panna, et maksimeerida brauserite arvu, milles kood töötab.

See lõpetab raadionuppude endi kodeerimise. Viimane samm on raadionupu valideerimise seadistamine, kasutades JavaScript.

Raadionuppude rühmade valideerimine ei pruugi olla ilmne, kuid see on lihtne, kui teate, kuidas.

Järgmine funktsioon kinnitab, et üks rühma raadionuppudest on valitud:

// Raadionuppude valideerimine
// autoriõigused Stephen Chapman, 15. november 2004, 14. september 2005
// võite selle funktsiooni kopeerida, kuid palun hoidke sellega autoriõiguse teadet
funktsioon valButton (btn) {
var cnt = -1;
jaoks (var i = btn, pikkus-1; i> -1; i--) {
if (btn [i] .kontrollitud) {cnt = i; i = -1;}
}
if (cnt> -1) tagastab btn [cnt] .väärtuse;
muidu tagasta null;
}

Ülaltoodud funktsiooni kasutamiseks helistage sellele oma vormi kinnitamise rutiinist ja andke talle raadionupu rühma nimi. Tagastab nupu väärtuse valitud rühmas või tagastab nulli väärtuse, kui grupis pole ühtegi nuppu valitud.

Näiteks siin on kood, mis kontrollib raadionuppu:

var btn = valButton (vorm.rühm1);
if (btn == null) alarm ('raadionuppu pole valitud');
else alert ('nupu väärtus' + btn + 'valitud');

See kood lisati funktsiooni, mida kutsus onClick sündmus, mis on lisatud vormi valideerimise (või esitamise) nupule.

Funktsioonina viidi parameetrina viide kogu vormile, mis kasutab kogu vormi viitamiseks argumenti "vorm". Raadionuppude rühma valideerimiseks nimega group1 anname seetõttu vorm.group1 funktsioonile valButton.

Kõigi raadionuppude rühmadega, mida te kunagi vajate, saate hakkama ülaltoodud toimingute abil.