Radio pogu iestatīšana un apstiprināšana

Tīkla iestatīšana un apstiprināšana radio pogas šķiet formas lauks kas daudziem tīmekļa pārziņiem sagādā vislielākās grūtības iestatīšanā. Faktiski šo lauku iestatīšana ir visvienkāršākā no visiem veidlapas laukiem, lai tos apstiprinātu kā radiopogas, kas nosaka vienu vērtību, kas jāpārbauda tikai tad, kad tiek iesniegta veidlapa.

Ar radio pogām grūtības rada tas, ka ir vismaz divi un parasti vairāk lauki, kas jāievieto veidlapā, jāsaista kopā un jāpārbauda kā viena grupa. Ja jūs izmantojat pareizas nosaukumu piešķiršanas konvencijas un savu pogu izkārtojumu, jums nebūs problēmu.

Pirmais, kas jāapskata, izmantojot veidlapās radītās pogas, ir tas, kā pogas ir jākodē, lai tās pareizi darbotos kā radiopogām. Vēlamā rīcība, ko mēs vēlamies, ir vienlaikus atlasīt tikai vienu pogu; ja tiek atlasīta viena poga, automātiski tiks atcelta jebkura iepriekš izvēlēta poga.

Risinājums ir dot visām grupas pogām to pašu nosaukumu, bet atšķirīgas vērtības. Šeit ir kods, ko izmanto pašām radiopogām.

Vienkārša ir arī vairāku radio pogu grupas izveidošana vienai formai. Viss, kas jums jādara, ir nodrošināt otrās pogas grupas ar citu nosaukumu, nekā tas tika izmantots pirmajā grupā.

Nosaukuma lauks nosaka, kurai grupai šī poga pieder. Vērtība, kas tiks nodota konkrētai grupai, kad veidlapa tiks iesniegta, būs pogas vērtība grupā, kas ir atlasīta veidlapas iesniegšanas laikā.

Lai persona, kas aizpilda veidlapu, saprastu, ko dara katra mūsu grupas radiopoga, mums ir jāsniedz katras pogas apraksti. Vienkāršākais veids, kā to izdarīt, ir tūlīt pēc pogas sniegt aprakstu kā tekstu.

Ar vienkārša teksta izmantošanu ir dažas problēmas:

1. Teksts var būt vizuāli saistīts ar radio pogu, bet tas, iespējams, nav skaidrs dažiem, kuri, piemēram, izmanto ekrāna lasītājus.
2. Vairākumā lietotāja saskarnes izmantojot radio pogas, ar pogu saistītais teksts ir noklikšķināms un ir iespējams izvēlēties ar to saistīto radio pogu. Šajā gadījumā teksts šādā veidā nedarbosies, ja vien teksts nav īpaši saistīts ar pogu.

Lai asociētu tekstu ar atbilstošo radio pogu, lai, noklikšķinot uz teksta, šī poga tiktu atlasīta, mums tas ir jādara veiciet vēl vienu katras pogas koda papildinājumu, apņemot visu pogu un ar to saistīto tekstu etiķete.

Lūk, kā varētu izskatīties pilnīgs HTML kods vienai no pogām:

 poga viena

Kā radio pogu ar ID vārdu, kas minēts priekš etiķetes taga parametrs faktiski ir ietverts pašā tagā, priekš un id dažos pārlūkos parametri ir lieki. Viņu pārlūkprogrammas tomēr bieži nav pietiekami gudras, lai atpazītu ligzdošanu, tāpēc ir vērts tās ievietot, lai palielinātu pārlūku skaitu, kuros kods darbosies.

Tas pabeidz pašu radio pogu kodēšanu. Pēdējais solis ir iestatīt radiopogas apstiprināšanu, izmantojot JavaScript.

Radio taustiņu grupu validācija var nebūt acīmredzama, bet, ja jūs zināt, kā tas notiek, tas ir vienkārši.

Šī funkcija apstiprinās, ka ir atlasīta viena no grupas pogām:

// Radio Button validācija
// autortiesības Stefans Čepmens, 2004. gada 15. novembris, 2005. gada 14. septembris
// jūs varat kopēt šo funkciju, bet, lūdzu, saglabājiet autortiesību paziņojumu kopā ar to
funkcija valButton (btn) {
var cnt = -1;
for (var i = btn.length-1; i> -1; i--) {
if (btn [i] .pārbaudīts) {cnt = i; i = -1;}
}
if (cnt> -1) atgriezt btn [cnt] .vērtību;
else return null;
}

Lai izmantotu iepriekšminēto funkciju, izsauciet to no savas formas apstiprināšanas rutīnas un nododiet tai radio pogas grupas nosaukumu. Tas atgriezīs pogas vērtību atlasītajā grupā vai atgriezīs nulles vērtību, ja grupā netiks izvēlēta neviena poga.

Piemēram, šeit ir kods, kas veiks radio pogas validāciju:

var btn = valButton (forma.grupa1);
if (btn == null) trauksme ('Nav atlasīta poga');
cits brīdinājums ('Pogas vērtība' + btn + 'izvēlēts');

Šis kods tika iekļauts funkcijā, kuru izsauc an onClick notikums, kas pievienots veidlapas apstiprināšanas (vai iesniegšanas) pogai.

Funkcijā kā parametrs tika nodota atsauce uz visu veidlapu, kas, izmantojot norādi “forma”, atsaucas uz visu veidlapu. Tāpēc, lai apstiprinātu radio pogu grupu ar nosaukumu group1, mēs form.group1 nodosim funkcijai valButton.

Visas radio pogu grupas, kas jums jebkad būs vajadzīgas, var tikt apstrādātas, izmantojot iepriekš aprakstītās darbības.