Radio és checkbox ellenőrzése.1130

Radio és checkbox ellenőrzés JavaScript programmal.

Amikor űrlapunkon felhasználónak több választási lehetősége is van.
Például: rádio és checkbox.
Felhasználó által kiválasztottakat, JavaScript határozza meg elkülönítve, hogy radio gombok közül, melyiket választotta felhasználó, és külön rendezze, hogy a checkbox lehetőségek közül, melyiket jelölte be.

Egy weboldalon több űrlapot is, azaz, form elemet is elhelyezhetünk.
JavaScript-nek tudnia kell, hogy melyik űrlap adatait kell feldolgozni.

Űrlapokat, azaz, form elemeket html fájlunkban elhelyezhetünk úgy is, hogy:

1. Egyiknek sem adunk, egyedi nevet.
   • <form> Ide jönnek az input elemek. </form>
   • <form> Ide jönnek az input elemek. </form>
   • <form> Ide jönnek az input elemek. </form>


2. Mindegyiknek adunk egyedi nevet, azaz, másik form elem ezzel a névvel nem rendelkezhet.
   Adott form elemben, a name és id azonosító egyforma legyen.
   • <form> name="rendeles" id="rendeles"> Ide jönnek az input elemek. </form>
   • <form> name="keszlet" id="keszlet"> Ide jönnek az input elemek. </form>
   • <form> name="matek" id="matek"> Ide jönnek az input elemek. </form>

JavaScript-ben űrlap, azaz, form beazonosításához megadhatjuk:

1. Oldalon elhelyezkedő értékét. Első űrlap értéke = "0". Második űrlap értéke = "1" és így tovább.
   Példák:
   • var Elso = document.forms[0];
     Az "Elso" változó, tömb formátumban tárolja, az első form elemben lévő, összes input elemet.
   
   
   • var Masodik = document.forms[1];
     A "Masodik" változó, tömb formátumban tárolja, a második form elemben lévő, összes input elemet.
   
   
   • var Harmadik = document.forms[2];
     A "Harmadik" változó, tömb formátumban tárolja, a harmadik form elemben lévő, összes input elemet.


2. Űrlap, azaz, form elemben a "name" és "id" után megadott szöveggel, azaz, űrlap azonosítóval.
   Példák:
   • var Rendeles = document.rendeles;
     A "Rendeles" változó, tömb formátumban tárolja, a name="rendeles" nevű form elemben lévő, összes input elemet.
   
   
   • var Keszlet = document.keszlet;
     A "Keszlet" változó, tömb formátumban tárolja, a name="keszlet" nevű form elemben lévő, összes input elemet.
   
   
   • var Matek = document.matek;
     A "Matek" változó, tömb formátumban tárolja, a name="matek" nevű form elemben lévő, összes input elemet.

Megjegyzés a form elem felhasználásához:

Ha csak JavaScript dolgozza fel az űrlapot, azaz form elemet.
Akkor a form elem csak name és id azonosítóval rendelkezik, a küldő gom típusa button és rendelkezik onclick függvényhívással.
Példa:
<form name="rendeles" id="rendeles">
<input type="button" onclick="feldolgozas()" value="Katt ide!">
</form

Ha szerveroldali program dolgozza fel az űrlapot, azaz form elemet. (Például: PHP fájl.)
A form elem, name és id azonosítóval, és action -- method POST vagy GET meghatározással rendelkezik,
a küldő gom típusa submit.
Példa:
<form name="rendeles" id="rendeles" action="Elérési_útvonal.php" method="POST">
<input type="submit" value="Katt ide!">
</form

Tesztelhető példa.

<form name="rendeles" id="rendeles"> 
  Válaszd ki a terméket: <br>
        <input type="checkbox" name="termek" value="Alma" checked> Alma <br>
        <input type="checkbox" name="termek" value="Tej"> Tej <br>
        <input type="checkbox" name="termek" value="Zsemle"> Zsemle <br>
        <input type="checkbox" name="termek" value="Kifli"> Kifli <br>
        <input type="checkbox" name="termek" value="Vaj"> Vaj <br> <br>

  Válaszd ki,  melyik a kedvenc gyümölcsöd. <br>
        <input type="radio" name="kedvenc" value="Barack" checked> Barack <br>
        <input type="radio" name="kedvenc" value="Szilva"> Szilva <br>
        <input type="radio" name="kedvenc" value="Meggy"> Meggy <br> <br>

<input type="text" id="teszt" size="30"> <br>

<input type="button" onclick="csekkelt()" value="Próbáld ki. Katt ide!">
</form

<hr>
<p>Kiértékelés eredményei: <br>
Mennyi termék választható:  <span id="vtermek"></span> <br>
checkbox, kiválasztott termék: <span id="cgaktiv"></span> <br>
rádiógomb, kiválasztott kedvenc: <span id="rgaktiv"></span>
</p>
<hr>

<script>
function csekkelt() {
			  
    // Választható checkbox termékek száma. ------------------------------------------
        var termekszam = document.rendeles.termek.length; 
            cgsz=document.getElementById("vtermek");
            cgsz.innerHTML=termekszam;
		
    // A name="termek"     checkbox jelőltek állapota. ------------------------------------------
        cgid=document.getElementById("cgaktiv");
        var txt = "";
        for(i=0; i<termekszam; i++){
              if(document.rendeles.termek[i].checked)  {txt = txt + document.rendeles.termek[i].value + " ";}
            }
        cgid.innerHTML= txt;

    // A name="kedvenc"     rádiógombok állapota. ----------------------------------------
            rgid=document.getElementById("rgaktiv");

              if(document.rendeles.kedvenc[0].checked)  { rgid.innerHTML = document.rendeles.kedvenc[0].value;}
              if(document.rendeles.kedvenc[1].checked)  { rgid.innerHTML = document.rendeles.kedvenc[1].value;}
              if(document.rendeles.kedvenc[2].checked)  { rgid.innerHTML = document.rendeles.kedvenc[2].value;}
			
}
</script>

Vissza a lap elejére