Űrlap adatok megjelenítése, feldolgozása.1108

Előzetes:
JavaScript programokat, a számítógépünkre telepített böngészőprogramok futtatják.
CGI programokat, mint például a PHP is, szerverek futtatják. Ezeket olyan tárhelyen tudjuk alkalmazni, melyeknél engedélyezett a PHP programok használata, vagy ha a saját számítógépünkre telepítjük az APACHE szervert és a PHP meghajtó motort (programot).

JavaScript program feldolgozza az űrlap adatokat, és az eredményt is kiírathatjuk. De a kapott eredményeket nem tudja elmenteni úgy, hogy a weboldalról történő kilépést követően azok eltárolódjanak és a jövőben bármikor lekérdezhessük az elmentett adatokat.
CGI programok, mint például a PHP is feldolgozza az űrlap adatokat, eredményt is kiírathatjuk, és ha szükséges, feldolgozott adatokat el tudja menteni meghatározott fájlba (Például: valami.txt fájlba). A TXT fájlba, vagy adatbázisba elmentett adatokat, jövőben bármikor lekérdezhetjük.

Űrlap adatokat szerverre, valamelyik CGI programnak (Például: PHP) küldjük feldolgozásra,
alkalmazzuk a
Példa: <input type="submit" value="Küldőgomb">

Űrlap adatokat JavaScript programnak küldjük feldolgozásra, alkalmazzuk a
Példa: <input type="button" value="Küldőgomb" onClick="Kiértékelő Függvény_neve();">

Űrlap feldolgozásához, akár CGI programok, akár JavaScript programok dolgozzák fel, minden űrlapelemnek, egymástól elkülönülő, egyedi name elnevezést kell meghatározni, azaz, kettő egyforma nem lehet. ( name="egyedi_elnevezés" )

Űrlapot nem csak levelezésre, adatok begyűjtésére alkalmazunk. A mindennapi munkánk megkönnyítésére is,(Matematika, Logikai műveletek). Űrlapon az adatokat gyorsan megváltoztathatjuk, melyeket a JavaScript programmal azonnal feldolgozhatunk és eredményt kiírathatjuk, szerverkapcsolat nélkül is.

Űrlapadatok feldolgozásához:
Egy oldalon belül több form, azaz űrlapot is készítünk, akkor mindegyik form elemnek egymástól elkülönülő, egyedi name elnevezést kell meghatározni.
Feldolgozó program a form elnevezése name="egyedinév" alapján dönti el, hogy melyik form, azaz űrlap adataival kell dolgoznia.
Az adatbeviteli mezőknek, mint például az input, szintén egyedi name azonosítóval kell rendelkezniük.
A form elemnek és az adatbeviteli mezőknek is, meghatározhatunk a name azonosító mellé, id egyedi azonosítót is.
A name és id azonosító egyforma elnevezéssel is szerepelhet, abban az esetben, ha az oldalon nincs másik elemnek is ugyanazon elnevezéssel, id azonosítója.
A button, submit, és reset gomboknak, nem kötelező name azonosító nevet meghatározni.
A value értékmeghatározás nem kötelező. De megadhatunk üres értéket is, így: value=" "; vagy előre meghatározott értéket, melyet felhasználó módosíthat: value="Póstás Pista"

JavaScript programhoz, űrlapadatok küldéséhez, ennyi meghatározás is elegendő:

<form name="urlap"  id="urlap">

Neve: <input type="text" name="neve" id="neve" value="Póstás Pista" size="20" >
Címe: <input type="text" name="cime" id="cime" value="Pósta Levél ú 12"  size="30" >
 
	<input type="button" value="Küldőgomb" onClick="Kiértékelő Függvény_neve();">
	
</form>

Valamelyik CGI programnak szerverre, űrlapadatok küldéséhez ezek a meghatározások kellenek:
- method értéke: lehet GET vagy POST.
- action: Itt kel meghatározni a feldolgozó fájl, elérési útvonalát.(URL címét. Ugyan-úgy, mint a hivatkozási linkeknél. )
- onSubmit: Nem kötelező. Akkor alkalmazzuk, ha az űrlapadatok elküldése előtt, JavaScript programmal ellenőriztetni akarjuk, az űrlap helyes kitöltését, azaz, helyes kitöltés esetén továbbíthatók az adatok, helytelen kitöltés esetén nem.

<form name="urlap" id="urlap" method="GET"  action="fájl_neve.php" onSubmit="return ellenoriz()">

Neve: <input type="text" name="neve" id="neve" value="" size="20" >
Címe: <input type="text" name="cime" id="cime" value="" size="30" >

         <input type="submit" value="Küldőgomb">

         <input type="reset" value="Törlés">

</form>

JavaScript programmal történő feldolgozás.

Ezeket a szkripteket számítógépünkre telepített böngészőprogramok futtatják, még akkor is, ha a programjaink valamelyik külső szerverre vannak telepítve.

Formok, azaz, űrlapok elérési módjai:

A DOM-on keresztül:
- getElementsByTagName();
- getElementById();
A forms objektumon keresztül:
- Helyszámmal: document.forms[1];
Objektumként értelmezhető name attribútummal:
- document.forms.formNév;
Csak stringként értelmezhető (pl. különleges karaktereket tartalmazó) name attribútum alapján:
- document.forms.['formNév'];

Űrlapadatok lekérdezését követően, adatokat tetszőleges célra feldolgozhatjuk, vagy kiírathatjuk.
Kiíratásra több lehetőségünk is van:
- Általunk kiválasztott egyedi id azonosítóval rendelkező elem területén.
- Alert ablakban.
- Vagy window ablakban.

Teszteléshez, előre beírtam adatokat, de ezeket módosíthatod is.

Fenti 1. és 2. button gombra történő kattintás után, adatok kiíratása, itt lesz látható:

Fenti program leírása:

<p>Teszteléshez, előre beírtam adatokat, de ezeket módosíthatod is.</p>

<form name="urlap" id="urlap">
<p> Neve:   <input type="text" name="neve" id="neve" value="Póstás Pista" size="20" ></p>
<p> Címe:   <input type="text" name="cime" id="cime" value="Pósta Levél út 12" size="30"></p>
<p> Telefon: <input type="text" name="tel" id="tel" value="1234567" size="15"></p>
	<p> 
	<input type="button" value="Kiértékelés a name azonosítókkal. Kattints ide!" onClick="Name_kiertekeles();"> 
	<input type="button" value="Kiértékelés az id azonosítókkal. Kattints ide!" onClick="Id_kiertekeles();"> 
	<input type="button" value="Kiértékelés kiíratása, alert ablakban. Kattints ide!" onClick="AlertAblak();">
	<input type="reset" value="Törlés">
	</p>
</form>

<p> Fenti button gombra történő kattintás után, adatok kiértékelése és kiíratása, itt lesz látható:</p>
<p id="adatok"></p>


<script language="JavaScript" type="text/javascript">
// 1.Példa:
// Űrlap adatokat, a name="valami" azonosítók alapján kérdezzük le, és általunk kiválasztott területen íratjuk ki.
function  Name_kiertekeles() {
        var id = document.getElementById ("adatok");  // Kiíratási terület beazonosítása.

    // Lekérdezzük azon űrlap, azaz form elem adatait, melynek azonosítója, name="urlap"	
        var formnev=document.urlap.name;             // Lekérdezzük a form nevét (name)
        var elemszam=document.urlap.length;        // Lekérdezzük a form elemeinek számát. (length)
        var neve=document.urlap.neve.value;          // Lekérdezzük a name="neve" inputmező adatát.(value)
        var cime=document.urlap.cime.value;         // Lekérdezzük a name="cime" inputmező adatát.(value)
        var tel=document.urlap.tel.value;                // Lekérdezzük a name="tel" inputmező adatát.(value)

    // Adatok kiíratása az id="adatok" azonosítóval rendelkező elem területén:
		id.innerHTML ="<b><u>Lekérdezés a name adatok alapján:</u></b><br />Lekérdezett űrlap neve= "+formnev
		+"<br /> Elemeinek száma= "+elemszam
		+"<br />Neve: "+neve+"<br />Címe: "+cime+"<br />Telefon: "+tel;
}

// ---------------------------------------------------------------------------------------------------------------

// 2.Példa:
// Űrlap adatokat, az id="valami" azonosítók alapján kérdezzük le, és általunk kiválasztott területen íratjuk ki.

function Id_kiertekeles() {
        var id = document.getElementById("adatok");  // Kiíratási terület beazonosítása.

        var formnev= document.getElementById("urlap").name;          // Lekérdezzük a form nevét (name)
        var elemszam= document.getElementById("urlap").length;     // Lekérdezzük a form elemeinek számát. (length)
        var neve= document.getElementById("neve").value;             // Lekérdezzük az id="neve" inputmező adatát. (value)
        var cime= document.getElementById("cime").value;            // Lekérdezzük az id="cime" inputmező adatát. (value)
        var tel= document.getElementById("tel").value;                   // Lekérdezzük az id="tel" inputmező adatát. (value)

    // Adatok kiíratása az id="adatok" azonosítóval rendelkező elem területén:
		id.innerHTML ="<b><u>Lekérdezés az id adatok alapján:</u></b><br />Lekérdezett űrlap neve= "+formnev
		+"<br /> Elemeinek száma= "+elemszam
		+"<br />Neve: "+neve+"<br />Címe: "+cime+"<br />Telefon: "+tel;
}

// ---------------------------------------------------------------------------------------------------------------

// 3.Példa:
// Alert ablakban, űrlap adatokatok kiíratása.

function AlertAblak() {
        var id = document.getElementById("adatok");
        var formnev= document.getElementById("urlap").name;
        var elemszam= document.getElementById("urlap").length;
        var neve= document.getElementById("neve").value;
        var cime= document.getElementById("cime").value;
        var tel= document.getElementById("tel").value;

  // Adatok változóhoz rendelése:
  // Alert kiíratásnál a sorlezáró <br /> elem helyett, a \n elemet alkalmazzuk.	
       UrlapAdatok = "Lekérdezett űrlap neve= "+formnev+"\nElemeinek száma= "+elemszam
		+"\nNeve: "+neve+"\nCíme: "+cime+"\nTelefon: "+tel;
		
  // Adatok kiíratása, alert ablakban:
      alert(UrlapAdatok);
}
</script>

Megjelenítés külön window ablakban.

Teszteléshez, előre beírtam adatokat, de ezeket módosíthatod is.

Megjegyzés:
A window.open(' ', meghatározásnál, Explorer esetében idézőjelek között, nem lehet szóköz.

<form name="form1">
<p> Neve: <input type="text" size="20" name="yourname"></p>
<p> Lakcíme: <input type="text" size="30" name="address"></p>
<p> Telefonszám: <input type="text" size="15" name="phone"></p>
<p> 
    <input type="button" value="Button gomb. Window bemutató" onClick="Bemutato();"> 
    <input type="reset" value="Törlés">
</p>
</form>

<script language="JavaScript" type="text/javascript">
function Bemutato() 
{
WindowAblak = window.open('','NewWin','toolbar=no, status=no, width=600, height=200, top=200, left=400' )

adat = "<ul><li><b>ŰRLAP NEVE: </b>" + document.form1.name + "</li>";
adat += "<li><b>ELEMEK SZÁMA: </b>" + document.form1.length;
adat += "<ul><li><b>NEVE: </b>" + document.form1.yourname.value + "</li>";
adat += "<li><b>LAKCÍME: </b>" + document.form1.address.value + "</li>";
adat += "<li><b>TELEFON: </b>" + document.form1.phone.value "</li></ul></li></ul>";

WindowAblak.document.write(adat);
}
</script>

Következő részben a fenti űrlapok adatait, a forms objektumon keresztül és a getElementsByTagName(); meghatározásokkal kérdezzük le.

document.forms[...] alkalmazással, visszakapott adatok kiíratása:

document.getElementsByTagName('form')[...] alkalmazással, visszakapott adatok kiíratása:

Program leírása:

<p><input type="button" value="Button gomb. Fenti űrlapok kiértékelése. Kattints ide!" onClick="Teszt01();"></p>

<hr></hr>
<div class="keret">
<p><b><u>document.forms[...] alkalmazással, visszakapott adatok kiíratása:</u></b><br /> 
	<span id="formsadatok"></span></p>
<br /><hr></hr><br />
<p><b><u>document.getElementsByTagName('form')[...]  alkalmazással, visszakapott adatok kiíratása:</u></b><br /> 
	<span id="TagNameadatok"></span></p>
</div>



<script language="JavaScript" type="text/javascript">

function Teszt01() {
var forms_id = document.getElementById("formsadatok");
var TagName_id = document.getElementById("TagNameadatok");

// A tömb adatok, 0-val kezdődnek.
// Lekérdezés a document.forms[..] tömb formátumban.---------------------------------------------------------
var formnev01_forms = document.forms[0].name;
var formnev02_forms = document.forms[1].name;
var forms01_elemekszama = document.forms[0].length;
var forms02_elemekszama= document.forms[1].length;
var forms01_elem01 = document.forms[0][0].value;
var forms01_elem02 = document.forms[0][1].value;
var forms01_elem03 = document.forms[0][2].value;
var forms02_elem01 = document.forms[1][0].value;
var forms02_elem02 = document.forms[1][1].value;
var forms02_elem03 = document.forms[1][2].value;

// Lekérdezés a document.getElementsByTagName meghatározásokkal.-----------------------------
var formnev01_tagname= document.getElementsByTagName('form')[0].name;
var formnev02_tagname= document.getElementsByTagName('form')[1].name;
var tagname01_elemekszama = document.getElementsByTagName('form')[0].length;
var tagname02_elemekszama= document.getElementsByTagName('form')[1].length;
var tagname01_elem01 = document.getElementsByTagName('form')[0][0].value;
var tagname01_elem02 = document.getElementsByTagName('form')[0][1].value;
var tagname01_elem03 = document.getElementsByTagName('form')[0][2].value;
var tagname02_elem01 = document.getElementsByTagName('form')[1][0].value;
var tagname02_elem02 = document.getElementsByTagName('form')[1][1].value;
var tagname02_elem03 = document.getElementsByTagName('form')[1][2].value;


//  A forms adatok kiíratása, id="formsadatok" azonosítóval rendelkező elem területén:
	forms_id.innerHTML = "Első űrlap neve = "+formnev01_forms+"<br />Második űrlap neve = "+formnev02_forms
		+"<br />Első űrlap elemeinek száma ="+forms01_elemekszama
		+"<br />Második űrlap elemeinek száma= "+forms02_elemekszama
		+"<br /><br />Első űrlap, első elemének adata ="+forms01_elem01
		+" <br /> Első űrlap, második elemének adata ="+forms01_elem02
		+"<br /> Első űrlap, harmadik elemének adata ="+forms01_elem03
		+"<br /><br />Második űrlap, első elemének adata ="+forms02_elem01
		+"<br /> Második űrlap, második elemének adata ="+forms02_elem02
		+"<br />Második űrlap, harmadik elemének adata ="+forms02_elem03;

		
//  A TagName adatok kiíratása, id="TagNameadatok" azonosítóval rendelkező elem területén:
	TagName_id.innerHTML = "Első űrlap neve = "+formnev01_tagname+"<br />Második űrlap neve = "+formnev02_tagname
		+"<br />Első űrlap elemeinek száma ="+tagname01_elemekszama
		+"<br />Második űrlap elemeinek száma= "+tagname02_elemekszama
		+"<br /><br />Első űrlap, első elemének adata ="+tagname01_elem01
		+"<br /> Első űrlap, második elemének adata ="+tagname01_elem02
		+"<br /> Első űrlap, harmadik elemének adata ="+tagname01_elem03
		+"<br /><br />Második űrlap, első elemének adata ="+tagname02_elem01
		+"<br /> Második űrlap, második elemének adata ="+tagname02_elem02
		+"<br />Második űrlap, harmadik elemének adata ="+tagname02_elem03;

}
</script>

JavaScript (this.form) példa:

Űrlapról matematikai adatok továbbítása, függvény meghívással és paraméter átadással történik:
onClick="FormAdatok(this.form)" = Kattintáskor hívd meg a FormAdatok(form) függvényt,
űrlap paramétereit (adatait) a zárójelbe írt (form) fogja tárolni.

Leírás.

<form name="Matek">	
	<p>a = <input  type="number"  name="a"  value=2   size="6" ></p>
	<p>b = <input  type="number"  name="b"  value=4   size="6"></p>
	<p>c = <input  type="number"  name="c"  value=12  size="6"></p>

	<u>Adatok kiértékelése és kiíratása, a következő ablakban lesz látható:</u><br />
	<textarea name="AdatAblak" cols="40" rows="5"></textarea>
	<br />
	<input type="button" value="Küldés" onClick="FormAdatok(this.form)">
	<input type="reset" value="Törlés">
</form>

<script language="JavaScript" type="text/javascript">
function FormAdatok(form) {
	a=eval(form.a.value)	
	b=eval(form.b.value)	
	c=eval(form.c.value)
	y=a+b+c;	
	x="\n a értéke= "+a+"\n b értéke= "+b+"\n c értéke= "+c+"\n Ősszeadás="+y;
	
// Adatok kiíratása azon input vagy textarea ablak területén, melynek azonosítója: name="AdatAblak"	
	form.AdatAblak.value = x  
}
</script>

Következő példát, olyan tárhelyen tudjuk alkalmazni(tesztelni), melyeknél engedélyezett a PHP programok használata, vagy, a saját számítógépünkre telepítjük az APACHE szervert és a PHP meghajtó motort (programot).

Űrlap adatok feldolgozása, szerverre telepített valamilyen CGI programmal, például PHP fájl használatával.

Űrlapról elküldött adatokat PHP fájl, GET[] vagy POST[] tömb formátumban kapja meg.
A tömb elemeinek neve, megegyezik az űrlapról elküldött name azonosítókkal.

<?php

  // Ha az adatok method="GET" formátumban lettek elküldve, akkor így azonosíthatjuk az adatokat.
    $_GET['neve'];          // Ez a tömbelem tárolja az űrlapról érkezett nevet.
    $_GET['cim'];           // Ez a tömbelem tárolja az űrlapról érkezett címet.
    $_GET['tel'];             // Ez a tömbelem tárolja az űrlapról érkezett telefonszámot.

  // Ha az adatok method="POST" formátumban lettek elküldve, akkor így azonosíthatjuk az adatokat.
    $_POST['neve'];        // Ez a tömbelem tárolja az űrlapról érkezett nevet.
    $_POST['cim'];         // Ez a tömbelem tárolja az űrlapról érkezett címet.
    $_POST['tel'];           // Ez a tömbelem tárolja az űrlapról érkezett telefonszámot.

?>

Vissza a lap elejére