Radio buttons

Radio buttons er små runde knapper man klikker på for at foretage et valg mellem flere muligheder. Knapper hvor man kan klikke for at vælge mellem en række muligheder findes i to versioner, radio buttons hvor man kun kan vælge én af mulighederne og checkboxes hvor der ikke er begrænsninger i antallet af valg man kan klikke af.

Når man skal lave et felt til input via radio buttons, skal man først bruge en FORM-tag, dvs.


Til denne skal man bruge INPUT. Hvordan dette er udformet, afhænger af hvad der er man vil gøre. Koden for radio buttons således ud:


Dette er ikke nok til at få radio buttons til at fungere korrekt. INPUT skal udstyres med attributterne NAME og VALUE. NAME er navnet på den gruppe af valgmuligheder, der skal vælges imellem. Er den ikke med, kan FORM ikke finde ud af at skifte mellem valgmulighederne. VALUE er den værdi som returneres, når man klikker på den pågældende valfmulighed. Koden for radio buttons nu således ud:


På skærmen kommer det til at se således ud:

Der kan af mange årsager være en fordel i, at man på sin liste har et forvalg, en default værdi. Man behøver f.eks. at skulle tage højde for at der ikke er foretaget et valg, hvis man har et script som aflæser valget/valgene. Hvis der er mange værdier der skal klikkes af, kan man afmærke valgene som er mest populære og dermed gøre det lettere for brugeren ved kun at skulle ændre de steder det er relevant.

Måden man gør det på, er i al sin enkelthed at skrive checked ved den INPUT-tag man vil have forvalgt, f.eks. ved forvalg af Valgmulighed 2 af 5 som vist her:


På skærmen der det således ud:


Hvis man af en eller anden grund får skrevet checked ved flere INPUT tags i samme gruppe, viser browseren det sidste af valgene.

Når man foretager et valg, f.eks. med radio buttons, er det sædvanligvis fordi man skal bruge værdien til et eller andet. Det kan man gøre på flere måder.

Den helt simple er et script, der ved klik på knappen bliver eksekveret. Det kunne f.eks. være en lille alert der siger hvad man har valgt. Til dette ser koden således ud:


På skærmen kommer det til at se således ud:


Bemærk, at der ikke er specificeret en VALUE. Værdien bliver i stedet lagt i JavaScriptet. Dette er en standardmåde at arbejde med JavaScript. Hvis man har en navngivet rutine, lad os kalde den Beregning, hvor værdien er 2, så skriver man ONCLICK="Beregning(2)" i stedet for at angive VALUE="2" som attribut og derefter skulle til at hente den.

Alerts er ikke hensigstmæssige sammen med radio buttons andet end som eksempel for at vise principper, som det er gjort her. Det er en god løsning, hvis man skal lave afsnit på siden, der vises og gemmes, afhængig af hvad man klikker på, f.eks. en side om bilsalg, hvor man klikker på bilmærket man interesseret i, og så vises en sektion med de modeller af det pågældende mærke, der er til salg. Hvordan man gør dette, bliver gennemgået i detaljer på en af de andre sider.


Hvis man har brug for flere grupper af valgmuligheder, kan man også gøre dette i én ombæring. Fordi INPUT ser efter NAME til håndteringen af markering/ikke markering, kan man blot udstyre sine INPUT med forskellige NAMEs. Det kunne f.eks. være sådan her:


På skærmen kommer det til at se således ud:


For at style det lidt og gøre det mere overskueligt, kan man herefter lave noget fed skrift, indryk osv. f.eks.:


For at have glæde af at man har klikket valgmulighederne af, skal der være noget det bringer os videre. Dette er en knap, og til FORM og INPUT, er dette også et INPUT, her er TYPE bare "submit" i stedet. Til denne type INPUT er VALUE den tekst der kommer til at stå på knappen. Så ser det således ud:


Normalt vil man til en knap have en ONCLICK til at eksekvere sit script, men til denne type knapper skal man bruge en ONSUBMIT i FORM-tag'en. Her bruger vi et JavaScript der hedder VisValgene, så ser det således ud:


Bemærk: For ikke at skulle tage højde for at der ikke er foretaget et valg, når JavaScriptet starter, er der forvalg på begge kategorier.

JavaScriptet laves som et eksternt script, dvs. det ligger som en .js-fil. I dette tilfælde en fil der hedder GetValues.js, som ligger i directoriet JavaScripts. Dette erklærer man i HEAD-tag'en:


JavaScriptets indhold starter med at erklære funktionens navn. Ved at gøre det på denne måde, kan man samle flere rutiner i den samme fil, f.eks. en der hed GetValue2 til at hente værdierne fra et andet sæt radio buttons på en anden side. Erklæringen af VisValgene ser således ud:


frm betyder at der refereres til en form. Fra formen skal vi først have fat i værdierne fra Valgtype1 og Valgtype2. Dette gøre ved at definere to variabler, radioArray1 og 2:


Vi skal imidlertid kun bruge den værdi der er klikket af, så vi sætter en rutine til at løbe værdierne igennem fra en ende af, og hvis der er klikket af dvs. if (radioArray1[i].checked) defineres en variabel der, i dette tilfælde, hedder value1 og denne sættes til INPUT'ets VALUE. Dette gøres for begge NAME's. Så ser det sådan ud:


Lige her er i sat til at gå fra 0 til radioArray1.length, dvs. antallet af knapper med NAME="Valgtype1". Man kunne også bare have sat værdien til 1, svarende til at der er 2 punkter på listen. Det er en smagssag om man vil det ene eller det andet. Ved at bruge en .length har man den fordel, at man bare kan tilføje og fjerne punkter, uden at skulle til at holde styr på hvor lang listen er, så der er noget bøvl at undgå ved at bruge længden af listen. Havde de to lister Valgtype1 og Valgtype2 haft forskellig længde, skulle man selvsagt bruge den længste liste, for ellers ville gennemløbet stoppe inden man kom gennem listen, og man risikerede ikke at finde den værdi der var klikket på.

Vi har nu fat i de to værdier der er klikket på, og kan nu bruge dem efter behov. Her ser vi dem samlet i en alert. For at forhindre, at scriptet løber videre efter alerten og bl.a. går til toppen af siden, kan man afslutte med en return false. Den færdige kode til JavaScriptet kommer så til at se således ud:


Panelet med radio buttons på siden kommer til at se således ud, når det fungerer: