Weblap Hová jutunk?

form elemek keresése, id azonositó használatakor.

Beazonosítás, a DOM-on keresztül. 1125

Szabály:
Minden html fájlban, ugyanazon id vagy name azonosítóval, csak 1, azaz, egy jelölőelem rendelkezhet.
Oka:
Ha több helyen is szerepel ugyanazon azonosító név, akkor a külső vezérlő programok, (mint például a JavaScript is) nem tudják egyértelműen és elkülönülten kezelni az eseményeket, és jelölőelemeket.

A form meghatározásához ennyi is elegendő, ha az adatokat, csak JavaScript programunhoz továbbítjuk:
<form name="form1" id="form1"> ..................... </form>

Formok elérési módja a DOM-on keresztül:

Példákban:
- A "TESZT" gombok, nincsenek aktiválva.
- A "Törlés" gombot használhatjuk, ha módosítjuk a jelenleg beírt adatokat.

Beazonosításokhoz a gyakorlatban, name és id azonosítók egyformák legyenek, hogy egyértelmű legyen beazonosításuk bármely lekérdezési meghatározásnál.
Most a teszt végett, az id azonosító más nevet kap, hogy a meghatározásoknál egyértelmű legyen, hogy a name vagy az id azonosító alapján kérdezzük le az adatokat.

A könnyebb nyomkövetésre, mindegyik id="azonosító" lila színnel lesz kiemelve!

1. Űrlap példa:

<form name="form01" id="urlap01">
Vezetékneve: <input type="text" name="Vezetekneve"  id="Vez_neve"   value="Piros"   size="20"> <br /> 
Keresztneve: <input type="text" name="Keresztneve"   id="Ker_neve"   value="Kakas"  size="20"> <br />
Lakhelycíme: <input type="text" name="Lakhelycime"  id="Lak_cime"   value="Csirkeól 3. létrafok"   size="20"> <br />
Telefonszám: <input type="text" name="Telefonszam"   id="Tel_szam"   value="++1234567890"   size="20"> <br />
Munkahelye:  <input type="text" name="Munkahelye"  id="Ceg_helye"  value="Tyúkudvar."   size="20"> <br />

                <input type="hidden" name="hidden" id="rejtett" value="elso_form">
                <input type="button"  name="button" id="kuldes" value="TESZT01" onclick="feladat(xxxxxx.yyyyy)">
                <input type="reset"   name="reset" value="Törlés">
</form>

Vezetékneve:
Keresztneve:
Lakhelycíme:
Telefonszám:
Munkahelye:


2. Űrlap példa:

<form name="form02" id="urlap02">
     Neve:     <input type="text" name="Neve"  id="nev"   value="Sakk Matt"  size="20"><br /> 
     Hobbija: <input type="text" name="Hobbi" id="sport"  value="Sakk"   size="20"> <br />
	 
              <input type="hidden" name="hidden" id="titok"value="masodik_form">
              <input type="button"  name="button"  id="tovabbitas"  value="TESZT02" onclick="feladat(xxxxxx.yyyyy)">
              <input type="reset"   name="reset" value="Törlés">
</form>

Neve:
Hobbija:


HTML fájlunk, azaz weblapunk, mennyi form elemet (űrlapot) tartalmaz?

<script type="text/javascript">
    var form_elem=document.getElementsByTagName("form");
	szamuk=form_elem.length;
	document.write("A programot megelőzően található form elemek(űrlapok) száma = " + szamuk);
</script>


A form elemek(űrlapok), mennyi input elemet tartalmaznak?

<script type="text/javascript">
var elso_form = document.getElementById('urlap01').getElementsByTagName('input');
var masodik_form = document.getElementById('urlap02').getElementsByTagName('input');

elso = elso_form.length;
masodik = masodik_form.length;

document.write("Első űrlapunk, azaz, első form elem = " + elso + " inputmezőt tartalmaz.<br />");
document.write("Második űrlapunk, azaz, második form elem = " + masodik + " inputmezőt tartalmaz.");
</script>


Tetszőleges inputmező értékének lekérdezése.
Mit tartalmaz:
Első form elemnél, harmadik inputmező?
Második form elemnél, első inputmező? 

<script type="text/javascript">
    var elso_form=document.getElementById('urlap01').getElementsByTagName('input')[2].value;
    var masodik_form=document.getElementById('urlap02').getElementsByTagName('input')[0].value;

        document.write("Első form elem, harmadik inputmezőjének értéke = " + elso_form +"<br />");
        document.write("Második form elem, első inputmezőjének értéke = " + masodik_form);
</script>


Tetszőleges inputmező nevének(name) lekérdezése.
Mi a neve:
Első form elemnél, harmadik inputmezőnek?
Második form elemnél, első inputmezőnek? 

<script type="text/javascript">
    var elso_form=document.getElementById('urlap01').getElementsByTagName('input')[2].name;
    var masodik_form=document.getElementById('urlap02').getElementsByTagName('input')[0].name;

        document.write("Első form elem, harmadik inputmező name (neve)  = " + elso_form +"<br />");
        document.write("Második form elem, első inputmező name (neve)  = " + masodik_form);
</script>

 

 

Ha a lekérdezett elemeket, tömb elembe íratjuk programunkkal, akkor a továbbiakban, bármelyik elemre hivatkozhatunk a tömb elemszámának meghatározásával.

Következő példában, tömbbe íratjuk a lekérdezett elemek adatait.
Program szempontjából a document.write kiíratások nem fontosak, ezek tájékoztató jelleggel szerepelnek. 

<script type="text/javascript">
var inputok= new Array();           // Létrehozunk egy tetszőleges elnevezésű tömböt.
var urlap_neve="urlap02";           // Meghatározzuk id azonosítóval, melyik form elem, 'input' adatait kérdezzük le.
document.write('<b><u>'+urlap_neve+' nevű form elem adatai:</u></b>');

var input=document.getElementById(urlap_neve).getElementsByTagName('input');
for (var i=0; i<input.length; i++)  
	{ 
		inputok[i]=input[i];
		input_adatok="<b>"+inputok[i].name +" = "+ inputok[i].value+"</b>";
		document.write("<br />"+input_adatok);	
	}
inputok_szama = inputok.length;
	document.write('<br /><b>Az input mezők száma = </b>' + inputok_szama);

document.write("<br />------------------------------------------------------------------------------------ <br />");
document.write("<br /><b><u>Gyakorlatban nincs szükség minden inputmező lekérdezésére!</u></b> <br />Az összes input mezőt és adatát, a fenti for ciklussal beírtattuk egy tömbbe, melynek neve = inputok[]<br />A kapcsos zárójelek közé beírt értékkel (egészszám), tetszőleges input adatát lekérdezhetjük.<br /><br /><b><u>Példa:</u></b><br />"); 

input02_neve=inputok[1].name;
input02_erteke=inputok[1].value;

document.write('<b>input02_neve=</b>' + input02_neve);
document.write('<br /><b>input02_erteke=</b>' + input02_erteke);
</script>

Fenti programunk eredménye:

 

 

A form elem name="valami" és input elemek name="valami" meghatározása kötelező, az id="valami" meghatározás nem kötelező.
Ha a form és input elemeknek, meghatározunk egyedi id azonosítót is, akkor az űrlap elemeiről, tetszőleges formátumban kérdezhetünk le információt.

Példa:
Tetszőlegesen kiválasztott űrlap eleméről történő információk lekérdezése, az id="valami" azonosítóval. 

<script type="text/javascript">
  var id="sport";             // Idézőjelek közé írjuk, a lekérdezendő elem id azonosítójának nevét.
  var input_neve=document.getElementById(id).name;
  var input_erteke=document.getElementById(id).value;

  document.write('<br /><b>Lekérdezett input "name" név=</b>' + input_neve);
  document.write('<br /><b>Lekérdezett input "value" értéke=</b>' + input_erteke);
</script>

Fenti programunk eredménye:

 

 

 

 

Vissza a lap elejére