Űrlap választógombok.1106

Negyedik rész. Választógombok.

A kezdő form és záró form jelölőelemmel kijelölt objektumban, azaz területen, egy vagy több űrlapelem is elhelyezhető.

Ezek az űrlapelemek vagy adatbeviteli és adat megjelenítő elemek nem mások, mint az űrlap adatmezői.

• Szövegmezők
• Elküldő és törlő gombok
• Választógombok
• Jelölőnégyzetek
• Lenyíló listák

Adatok kiválasztására alkalmas gombok.

Ha a felhasználónak több lehetőség is biztosítunk egy adott témakör kiválasztására, akkor a választógombot alkalmazzuk

A választógomb típusának neve, radio.
Ha van nyomógombos rádiónk, a rádió nyomógombjával választhatjuk ki, a nekünk megfelelő műsort. (Innen származik a gomb elnevezése: radio)
Mivel több választási lehetőség is van, ezért annyi választógombra van szükségünk, amennyi lehetőséget megadunk.
Ezért a választógombok egy adott csoporthoz (rádióhoz) tartoznak, melyből adódóan az azonosító nevük (name) egyforma, de mindegyik értéke (value) más (azaz más műsort fognak)
A választógombok közül, csak egyet választhat ki a felhasználó.

A checked jelentése: Amelyik input jelölőelemben elhelyezzük, az lesz, az alapértelmezés szerinti kijelölt gomb.
Egy adott csoporthoz tartozó gombok közül, csak egyet jelölhetünk ki alapértelmezettnek.
Alkalmazása, azaz alapértelmezett kijelölés nem kötelező, ez csak ajánlásjellegű a felhasználó felé.
Kijelöltük vagy sem, úgyis a felhasználó dönt, és választ egyet.

A value után beírt jellemző ( érték ), cgi vagy JavaScript programunk felé továbbítódik, és ezzel állapítható meg, hogy a felhasználó melyik lehetőséget választotta.
(Hová továbbítódik? Ez attól függ, az elküldő gombot hogyan állítottuk be.)

JavaScriptben, a radio objektum alábbi tulajdonságaira hivatkozhatunk:
- name: A választógombok közös neve, de az adott objektumé is.
- length: Az adott csoportban lévő választógombok száma
- checked: Meghatározza gombok jelölési állapotát, mely lehet true vagy false.

A választógombok JavaScriptből történő eléréséhez a rádio objektumot használjuk, de tömbként kezeljük.
A tömbben, nullával kezdődően kapnak sorszámot.

A gombok, a következő tulajdonsággal rendelkeznek:
- value: Az adott gombhoz rendelt érték
- defaultChecked: A gomb alapértelmezett állapotát jelzi.
- checked: A nyomógomb, azaz választógomb állapota

Tesztelhető példa.

Melyik rádiógomb van kijelölve, JavaSript programunkban meg kell adnunk:
- A form objektum nevét. ( name )
- Az input elem nevét ( name ) és gombok tömbben elfoglalt sorszámát.( első=[0], második=[1], harmadik=[2] )
- A tulajdonsághoz tartozó értéket: checked ( Mely lehet true vagy false)

Ha checked értéke true lesz, akkor a gomb kijelölve. ( Az if feltétel teljesül.)
Ha checked értéke false lesz, akkor a gomb nincs kijelölve. ( Az if feltétel nem teljesül.)

<p>Melyik rádiógomb van kijelölve = <span id="rgaktiv"></span></p>
<button onClick="ellenorzes()";>Rádiógomb kijelölésének ellenőrzése. Katt ide!</button>

<script>
     function ellenorzes() {
          id=document.getElementById("rgaktiv");
              if(document.rendeles.jelolt[0].checked)  { id.innerHTML ="1. Gomb van kijelölve. (Alma)"}
              if(document.rendeles.jelolt[1].checked)  { id.innerHTML ="2. Gomb van kijelölve. (Tej)"}
              if(document.rendeles.jelolt[2].checked)  { id.innerHTML ="3. Gomb van kijelölve. (Zsemle)"}
        }
</script>

JavaSriptből

• A click( ) ezen tagfüggvénnyel rendelkezik a választógomb, mely a gombra kattintást utánozza.

Html oldalon

• Az onClick, mint eseménykezelő, minden egyes választógombhoz alkalmazható.

Nem kötelező. De, ha a JavaScriptből valamelyik gombra a true értéket állítottuk be alapértelmezettként,
akkor az adott objektum többi gombját false értékre kell beállítani!

Ugyanis, a gombok átállítása, nem történik meg automatikusan.
Ezen átállítást a click( ) tagfüggvénnyel is megtehetjük.

Egy adott html oldalon, több választógomb csoportot is elhelyezhetünk.

Egy adott témakörhöz, tetszőleges választógomb darabszámot, azaz mennyiséget alkalmazhatunk, ha mindegyiknek más value jellemzőt írunk be.
Ilyen például a KRESSZ tesztlap is, ahol több kérdés is fel van adva, és általában három választási lehetőségünk van kiválasztani a megfelelő gombot.
Feltétele, hogy egy adott témakörökhöz tartozó választógombok neve (name="valami") egyforma legyen, de elkülönüljön a többi témakör gombjainak elnevezésétől.

2. Tesztelhető példa.

<script>
function rendelesek() {
  var radioTomb = document.forms[0];
  var txt = "";
  var i;
  for (i = 0; i < radioTomb.length; i++) {
  // radioTomb[i].checked értéke = true, if feltétel teljesül. Ha értéke false, if feltétel nem teljesül.
          if (radioTomb[i].checked) {
             txt = txt + radioTomb[i].value + " ";
            }
  }
  
  // Válasszunk, melyik kiíratást akarjuk alkalmazni.
  // 1. Kiíratás az id="teszt" azonosítóval rendelkező input ablakban.
        document.getElementById("teszt").value = "Kiválasztott termék = " + txt;
  
  // 2. Kiíratás az id="info" azonosítóval rendelkező tetszőleges jelölőelemben.
        id=document.getElementById("info");
        id.innerHTML = txt;
}
</script>

Vissza a lap elejére