Postavljanje i provjera radijskih tipki

Postavljanje i provjera valjanosti radio tipke čini se da je polje oblika što mnogim webmasterima pruža najviše poteškoća pri postavljanju. Zapravo je postavljanje ovih polja najjednostavnije od svih polja obrazaca za vrednovanje jer radio gumbi postavljaju jednu vrijednost koju treba testirati samo kad se obrazac preda.

Poteškoća s radio tipkama je što postoje najmanje dva i obično više polja koja treba staviti na obrazac, međusobno povezana i testirati kao jednu skupinu. Pod uvjetom da koristite ispravne konvencije imenovanja i izgled svojih gumba, nećete imati problema.

Postavljanje grupe gumba radija

Prvo na što treba upozoriti kada se koriste radio tipke na našem obrascu je kako se gumbi trebaju kodirati kako bi mogli pravilno funkcionirati kao radio gumbi. Željeno ponašanje želimo imati istovremeno odabran samo jedan gumb; ako je odabran jedan gumb, bilo koji prethodno odabrani gumb bit će automatski poništen.

Ovdje je rješenje dati svim radio tipkama unutar grupe isto ime, ali različite vrijednosti. Ovdje je kôd koji se koristi za sam radio gumb.

instagram viewer



Stvaranje više skupina radijskih gumba za jedan oblik također je jednostavno. Sve što trebate učiniti je osigurati drugoj grupi radijskih gumba drugačije ime od one koja se koristi za prvu grupu.

Polje s imenom određuje kojoj grupi pripada određeni gumb. Vrijednost koja će se proslijediti određenoj grupi prilikom predaje obrasca bit će vrijednost gumba unutar grupe koja je odabrana u trenutku slanja obrasca.

Opišite svaki gumb

Da bi osoba koja ispunjava obrazac shvatila što radi svaki radio gumb u našoj grupi, potrebno je pružiti opise za svaki gumb. Najjednostavniji način da to učinite je pružiti opis kao tekst odmah nakon gumba.

Međutim, postoji nekoliko problema s upotrebom običnog teksta:

  1. Tekst je vizualno povezan s radio gumbom, ali nekima koji koriste čitače zaslona, ​​možda to nije jasno, primjerice.
  2. U većini korisnička sučelja Pomoću radio gumba, tekst koji se povezuje s gumbom je moguće kliknuti i moći ćete odabrati pridruženi radio gumb. U našem slučaju ovdje tekst neće raditi na ovaj način ako tekst nije posebno povezan s gumbom.

Povezivanje teksta s gumbom radija

Da bismo povezali tekst s odgovarajućim radio gumbom, tako da klikanjem na tekst odaberemo taj gumb, moramo dodajte daljnji kôd za svako dugme tako što opišete cijeli gumb i pripadajući tekst unutar označiti.

Evo kako bi izgledao kompletni HTML za jedan od gumba:



Kao radio gumb s id imenom navedenim u za parametar oznake oznake zapravo se nalazi unutar same oznake, za i iskaznica parametri su suvišni u nekim preglednicima. Njihovi preglednici, međutim, često nisu dovoljno pametni da bi prepoznali gniježđenje, pa ih vrijedi staviti u maksimiziranje broja preglednika u kojima će kod funkcionirati.

Time se dovršava kodiranje samih radio tipki. Posljednji korak je postavljanje validacije radio gumba pomoću JavaScript.

Postavljanje provjere radio gumba

Provjeravanje skupina radijskih gumba možda nije očito, ali jednostavno je kad znate kako.

Sljedeća funkcija potvrđuje da je odabran jedan od radio gumba u grupi:

// Provjera radijskog gumba
// autorska prava Stephen Chapman, 15. 11. 2004. 144. rujna 2005
// možete kopirati ovu funkciju, ali molimo vas da zadržite obavijest o autorskim pravima s njom
funkcija valButton (btn) {
var cnt = -1;
za (var i = btn.length-1; i> -1; ja--) {
ako je (btn [i]. provjereno) {cnt = i; i = -1;}
}
ako (cnt> -1) vrati btn [cnt]. vrijednost;
vrati se nula;
}

Da biste koristili gornju funkciju, nazovite je iz svoje rutine provjere obrasca i proslijedite joj naziv grupe gumba. Vratit će vrijednost gumba unutar odabrane skupine ili vratiti nultu vrijednost ako u grupi nije odabran nijedan gumb.

Na primjer, ovdje je kôd koji će izvršiti provjeru radio gumba:

var btn = valButton (form.group1);
ako (btn == null) upozorenje ('Nije odabran radio gumb');
upozorenje drugo ('vrijednost gumba' + btn + 'odabrano');

Ovaj je kôd uključen u funkciju koju naziva an na klik događaj u prilogu gumba za potvrdu (ili slanje) na obrascu.

Upućivanje na cijeli obrazac preneseno je kao parametar u funkciju, koja koristi argument "form" za upućivanje na potpuni obrazac. Da bismo potvrdili skupinu radio gumba s imenom name1, prosljeđujemo form.group1 funkciji valButton.

Sve grupe radio-gumba koje će vam ikada trebati mogu se upravljati pomoću gore opisanih koraka.

instagram story viewer