Űrlap, azaz form elemek keresése.

Beazonosítás a forms objektumon keresztül. 1127

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 forms objektumon keresztül:
- Helyszámmal:
  document.forms[n]; Az "n" egy egészszám.
  - document.forms[0].length; Az első űrlap, azaz, form elemben található mezők száma.
  - document.forms[0][0].name; Az első űrlap, azaz form, első inputmezőjének neve.
  - document.forms[0][0].value; Az első űrlap, azaz form, első inputmezőjének értéke.
- Objektumként értelmezhető name attribútummal:
  document.forms.formNeve;
  - document.forms.form01.length; Az első űrlap, azaz, form elemben található mezők száma.
  - document.forms.form01['Vezetekneve'].name; Az első űrlap, azaz form, első inputmezőjének neve.
  - document.forms.form01['Vezetekneve'].value; Az első űrlap, azaz form, első inputmezőjének értéke.
- Csak stringként értelmezhető: (pl. különleges karaktereket tartalmazó) name attribútum alapján:
  document.forms['formNeve'];
  - document.forms['form01'].length; Az első űrlap, azaz, form elemben található mezők száma.
  - document.forms['form01'][0].name; Az első űrlap, azaz form, első inputmezőjének neve.
  - document.forms['form01'][0].value; Az első űrlap, azaz form, első inputmezőjének értéke.
    
    Vagy a következőképpen:
  - document.forms['form01']['Vezetekneve'].name; Az első űrlap, azaz form, első inputmezőjének neve.
  - document.forms['form01']['Vezetekneve'].value; Az első űrlap, azaz form, első inputmezőjének értéke.

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 name="azonosító" lila színnel lesz kiemelve!

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.

1. Űrlap példa:

<form name="form01" id="urlap01">
Vezetékneve: <input type="text" name="Vezetekneve"  id="Vezetekneve"   value="Piros"   size="20"> <br /> 
Keresztneve: <input type="text" name="Keresztneve"   id="Keresztneve"    value="Kakas"  size="20"> <br />
Lakhelycíme: <input type="text" name="Lakhelycime"  id="Lakhelycime"   value="Csirkeól 3. létrafok"   size="20"> <br />
Telefonszám: <input type="text" name="Telefonszam"   id="Telefonszam"   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>

2. Űrlap példa:

<form name="form02" id="urlap02">
     Neve:     <input type="text" name="neve"  id="neve"   value="Sakk Matt"  size="20"><br /> 
     Hobbija: <input type="text" name="hobbi" id="hobbi"  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>

Mennyi űrlapmezőt tartalmaz, a lekérdezett form elem.

<script type="text/javascript">				
  var elso_mezoszamai=document.forms[0].length;        // 1.form, azaz űrlapban található mezők száma.
  var masodik_mezoszamai=document.forms[1].length;   // 2.form, azaz űrlapban található mezők száma.
	
	document.write("<br /><b> 1.form, elemeinek száma = </b>" + elso_mezoszamai);
	document.write("<br /><b> 2.form, elemeinek száma  = </b>" + masodik_mezoszamai);
</script>

Fenti mezőszámok lekérdezésének eredményei:

Formok elérésse helyszámmal:
document.forms[n]; Az "n" egy egészszám.

<script type="text/javascript">
    var elso_form=document.forms[0].name;
    var masodik_form=document.forms[1].name;
	
	document.write("<b>A programot megelőzően található:</b><br />");
	document.write("<br /><b> 1. form neve = </b>" + elso_form);
	document.write("<br /><b> 2. form neve = </b>" + masodik_form);
</script>

Formok elérésse objektumként értelmezhető name attribútummal::
document.forms.formNév;

<script type="text/javascript">
    var elso_form=document.forms.form01.name;
    var masodik_form=document.forms.form02.name;
	
	document.write("<b>A programot megelőzően található:</b><br />");
	document.write("<br /><b> 1. form neve = </b>" + elso_form);
	document.write("<br /><b> 2. form neve = </b>" + masodik_form);
</script>

Formok elérésse Csak stringként értelmezhető name attribútum alapján::
document.forms['formNév']; --- (pl. különleges karaktereket tartalmazó name attribútum alapján)

A form nevét:

Beírhatjuk közvetlen a kapcsos zárójelek közé idézőjelekkel.
(document.forms['form01'])

Vagy változóhoz rendeljük, és a változó nevét írjuk a kapcsos zárójelek közé, idézőjelek nélkül.
(document.forms[változó_neve])

<script type="text/javascript">
    var e='form01';
    var m='form02';
        var elso_form=document.forms[e].name;
        var masodik_form=document.forms[m].name;
	
	document.write("<b>A programot megelőzően található:</b><br />");
	document.write("<br /><b> 1. form neve = </b>" + elso_form);
	document.write("<br /><b> 2. form neve = </b>" + masodik_form);
</script>

Formok elérésse, adatok lekérdezésére.

<script type="text/javascript">
 var e='form01';
 var m='form02';				
               var e_inputnev=document.forms[e][0].name;         // 1. form, első inputmezőjének neve. 
               var e_inputerteke=document.forms[e][0].value;     // 1. form, első inputmezőjének értéke.
               var m_inputnev=document.forms[m][0].name;       // 2. form,  első inputmezőjének neve.
               var m_inputerteke=document.forms[m][0].value;   // 2. form,  első inputmezőjének értéke.
	
	document.write("<b><u>A programot megelőzően található:</u></b>");
	document.write("<br /><b> 1. form, első inputmezőjének neve = </b>" + e_inputnev);
	document.write("<br /><b> 1. form, első inputmezőjének értéke = </b>" + e_inputerteke);
	document.write("<br /><b> 2. form,  első inputmezőjének neve = </b>" + m_inputnev);
	document.write("<br /><b> 2. form,  első inputmezőjének értéke = </b>" + m_inputerteke);
</script>

Formok elérésse, adatok lekérdezésére.

<script type="text/javascript">
// Lekérdezés form név változóhoz rendelésével, inputmező helyszáma alapján.	
  var e='form01';
  var m='form02';			
    var e01_nev=document.forms[e][0].name;       // 1. form, első inputmezőjének neve. 
    var e01_erteke=document.forms[e][0].value;   // 1. form, első inputmezőjének értéke.
	
    var m01_nev=document.forms[m][0].name;       // 2. form,  első inputmezőjének neve.
    var m01_erteke=document.forms[m][0].value;   // 2. form,  első inputmezőjének értéke.
	
	document.write("<b><u>Lekérdezés form név változóhoz rendelésével, inputmező helyszáma alapján:</u></b>");
	document.write("<br /><b> 1. form, első inputmezőjének neve = </b>" + e01_nev);
	document.write("<br /><b> 1. form, első inputmezőjének értéke = </b>" + e01_erteke);
	document.write("<br /><b> 2. form,  első inputmezőjének neve = </b>" + m01_nev);
	document.write("<br /><b> 2. form,  első inputmezőjének értéke = </b>" + m01_erteke);
	
	document.write("<br /><br />");

// -----------------------------------------------------------------------------------------------------------------------------------	
// Lekérdezés form név + inputmező helyszáma alapján.
	
    var e02_nev=document.forms['form01'][0].name;       // 1. form, első inputmezőjének neve. 
    var e02_erteke=document.forms['form01'][0].value;   // 1. form, első inputmezőjének értéke.
	
    var m02_nev=document.forms['form02'][0].name;       // 2. form,  első inputmezőjének neve.
    var m02_erteke=document.forms['form02'][0].value;   // 2. form,  első inputmezőjének értéke.
	
	document.write("<b><u>Lekérdezés form név + inputmező helyszáma alapján:</u></b>");
	document.write("<br /><b> 1. form, első inputmezőjének neve = </b>" + e02_nev);
	document.write("<br /><b> 1. form, első inputmezőjének értéke = </b>" + e02_erteke);
	document.write("<br /><b> 2. form,  első inputmezőjének neve = </b>" + m02_nev);
	document.write("<br /><b> 2. form,  első inputmezőjének értéke = </b>" + m02_erteke);
	
	document.write("<br /><br />");

// -----------------------------------------------------------------------------------------------------------------------------------	
// Lekérdezés form helyszáma + inputmező helyszáma alapján.
	
    var e03_nev=document.forms[0][0].name;       // 1. form, első inputmezőjének neve. 
    var e03_erteke=document.forms[0][0].value;   // 1. form, első inputmezőjének értéke.
	
    var m03_nev=document.forms[1][0].name;       // 2. form,  első inputmezőjének neve.
    var m03_erteke=document.forms[1][0].value;   // 2. form,  első inputmezőjének értéke.
	
	document.write("<b><u>Lekérdezés form helyszáma + inputmező helyszáma alapján:</u></b>");
	document.write("<br /><b> 1. form, első inputmezőjének neve = </b>" + e03_nev);
	document.write("<br /><b> 1. form, első inputmezőjének értéke = </b>" + e03_erteke);
	document.write("<br /><b> 2. form,  első inputmezőjének neve = </b>" + m03_nev);
	document.write("<br /><b> 2. form,  első inputmezőjének értéke = </b>" + m03_erteke);
	
	document.write("<br /><br />");
// -----------------------------------------------------------------------------------------------------------------------------------


// Mivel az inputmező nevét tudjuk, most csak a hozzá tartozó értéket kérdezzük le.	
// 1.Példa: Lekérdezés ['form név'] ['inputmező neve'] alapján.

    var e04_erteke=document.forms['form01']['Vezetekneve'].value;   // 1. form, első inputmezőjének értéke.
    var m04_erteke=document.forms['form02']['neve'].value;          // 2. form,  első inputmezőjének értéke.
	
	document.write("<br />Az inputmező nevét tudjuk, mostantól, csak a hozzá tartozó értéket kérdezzük le:<br />");
	document.write("<br />Lekérdezés ['form név'] + ['inputmező név'] alapján.<br />");
	document.write("<br /><b> 1. form, első inputmező name='Vezetekneve' érték = </b>" + e04_erteke);
	document.write("<br /><b> 2. form,  első inputmező name='neve' érték = </b>" + m04_erteke);
	 
	 document.write("<br /><br />");
	 
// 2.Példa: Lekérdezés form név.['inputmező neve'] alapján.  
    var e05_erteke=document.forms.form01['Vezetekneve'].value;   // 1. form, első inputmezőjének értéke.
    var m05_erteke=document.forms.form02['neve'].value;          // 2. form,  első inputmezőjének értéke.
	
	document.write("<b><u>Lekérdezés form név.['inputmező név'] alapján.</u></b><br />");
	document.write("<br /><b> 1. form, első inputmező name='Vezetekneve' érték = </b>" + e05_erteke);
	document.write("<br /><b> 2. form,  első inputmező name='neve' érték = </b>" + m05_erteke);
	 
	 document.write("<br /><br />");
	
// 3.Példa: Lekérdezés form név.['inputmező helyszáma'] alapján.
    var e06_erteke=document.forms.form01[0].value;   // 1. form, első inputmezőjének értéke.
    var m06_erteke=document.forms.form02[0].value;          // 2. form,  első inputmezőjének értéke.
	
	document.write("<b><u>Lekérdezés form név.[inputmező helyszáma] alapján.</u></b><br />");
	document.write("<br /><b> 1. form, első inputmező name='Vezetekneve' érték = </b>" + e06_erteke);
	document.write("<br /><b> 2. form,  első inputmező name='neve' érték = </b>" + m06_erteke);
</script>

Fenti lekérdezések eredményei:

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 mezo= new Array();           // Létrehozunk egy tetszőleges elnevezésű tömböt.
var urlap_neve="form01";      // Meghatározzuk name azonosítóval, melyik form elem adatait kérdezzük le.
document.write('<b><u>'+urlap_neve+' nevű form elem adatai:</u></b>');

var elemek=document.forms[urlap_neve];
mezok_szama = elemek.length;
	document.write('<b>A lekérdezett űrlap, azaz, a form elemeinek száma = </b>' + mezok_szama+"<br />");
	
for (var i=0; i<elemek.length; i++)  
	{ 
		mezo[i]=elemek[i];
		mezo_adatok="<b>"+mezo[i].name +" = "+ mezo[i].value+"</b>";
		document.write("<br />"+mezo_adatok);	
	}

document.write("<br />------------------------------------------------------------------------------------ <br />");

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


// Csak, a második inputmező adatainak lekérdezése.
input02_neve=mezo[1].name;
input02_erteke=mezo[1].value;

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

</script>

Fenti mezőszámok lekérdezésének eredményei:

Vissza a lap elejére