form button.1117

Adat továbbítása, JavaScript programhoz.

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.

Adatok küldése, csak JavaScript programunhoz, akkor a submit helyett, használjuk a button meghatározást.
Ebben az esetben ennyi form meghatározás is, megfelel az alkalmazásra:
<form name="form1" id="form1"> ....... </form>

<form name="urlap" id="urlap">
Neve: <input type="text" name="kiseger" value="" size="55"><br /><br />
	<input type="button" value="Feladat indítása!"onClick="feladat(urlap.kiseger)">
	<input type="reset" name="reset" value="Beírt adat törlése">
</form>

Űrlapunk kiértékelése:

Ez a "button" gomb, űrlapon, azaz, a form elemen kívül helyezkedik el.
Rákattintunk, hatása ugyan az, mint az 1.példa form elemében található button gombnak.

<input type="button" value="Feladat indítása!" onClick="feladat(form_inputablak.kiseger)"> 

<script language="JavaScript">
<!-- A JavaScript kód elrejtése.
var adat="";
var beirt_adat="";
var beirt_stringszam="";

function feladat(mezo)
 {
  var iras=document.getElementById('adatablak');
      iras.innerHTML ="";

   if (mezo.value != "") 
    {	
     adat=mezo.value;
     adathossz=adat.length;
     beirt_adat="<u>Következő adatot írtad be:</u> "+ adat +"<br />";
     beirt_stringszam="<u>A szöveg, szóközzel együtt, ennyi stringből áll:</u> "+ adathossz +"<br />";
        iras.innerHTML +=beirt_adat;
        iras.innerHTML +=beirt_stringszam;
    }	
   else { 
         figyelmeztetes = "<b><u>Nem írtál semmit!</u></b><br />"; 
          iras.innerHTML =figyelmeztetes;
        }
 }
// -->
</script>

Hogyan működik:

JavaScript egy függvényt tartalmaz, melynek neve function feladat()

A formok és beviteli mezők egyedi name névvel rendelkeznek.
Mindegyik button gomb, kattintáskor aktiválódik ( onClick ).
Az onClick meghatározásai határozzák meg, hogy mi történjen.
Jelen esetben, meghívja a JavaScriptben található feladat nevű functiont, és e függvénynek átadja a zárójelekben meghatározott (urlap.kiseger) paramétert.
Paraméter tartalmazza a form nevét(name azonosítóját) és a beviteli mező nevét(name azonosítóját).
Ezen két név alapján dönti el js program, hogy melyik form elem, melyik mezőjének értékével (value) kell dolgoznia.
Az így átadott paraméter értéket, a függvény zárójelei közé beírt tetszőleges változó név fogja tárolni:
(jelen esetben a változó nevének ezt adjuk, "mezo") feladat(mezo)

JavaScript programunk, hól jelenítse meg az eredményt:
Kiíratáshoz, document.write(valami); helyett, használjuk az "innerHTML" utasítát.
A html fájlban jelöljünk ki egy területet, div vagy span jelölőelemmel, melyben megjelenítjük az eredményeket.
Pédául így: <div id="adatablak"></div>
Programunkkal megkerestetjük ezt a területet , és változóhoz rendeljük.
Példa: iras=document.getElementById('adatablak');
Az "iras" változó tárolja a kijelölt területet, melyhez az innerHTML utasítással értéket határozhatunk meg.
Például: iras.innerHTML ="valami"; vagy iras.innerHTML +="valami";

A fenti bemutatóban láthattuk, hogy a "button" gomb, önállóan is képes működni.

Ez azt jelenti, hogy:

• Elhelyezhetjük közvetlen a form elemben, vagy azon kívül is, azaz, html fájlunkban tetszőleges helyen.
• A button gombra történő kattintáskor az onClick után megadott paraméterekkel hivja meg a feldolgozó függvényt.
  • Ha itt, a kiválasztott form elem nevét, és a feldolgozandó inputmező nevét megadjuk, akkor ezen form elemben található, input névhez tartozó értéket , azaz paramétert adja át a függvénybe írt változónak.
    A függvénybe írt változónak tetszőleges általunk kitalált ékezet nélküli elnevezése lehet.
• Értelemszerűen:
  Ha egy adott form elem adataival dolgozunk, akkor a button gombot is az adott form elembe helyezzük.
  Ha egy előre elkészített példához használjuk, melynél az értékek nem változnak, akkor az oldal tetszőleges helyén elhelyezhetjük.
  Természetesen itt is az adott témakörnél helyezzük el, hogy egyértelmű legyen, minek is van ott. Az eredmény kiíratása is, a gomb környékén legyen, ne keljen az oldalt oda-vissza görgetni.

2.Példa:
A "button" gomb használata, fix paraméterek átadására.

<style type="text/css">
.eredmeny{width:100%; height: 80px; border: 1px solid black; padding: 2px; background-color: #ffc;}
</style>
<div class="eredmeny"><span id="munkaablak"></span></div>

<input type="button" value="Munka indítása!" onClick="munkamenet(200,300)">
<input type="button" value="Munka törlése!" onClick="munkamenetTorlese()">

<script type="text/javascript">

function munkamenetTorlese()
{
	var munka=document.getElementById('munkaablak');
		munka.innerHTML ="";
}

function munkamenet(a,b)
{
	var munka=document.getElementById('munkaablak');
		munka.style.backgroundColor="blue";
		munka.style.color="white";
		var c=a*b;
		d="<b>Lekérdezett eredmény = "+c+"</b>";
		munka.innerHTML = d;
}
</script>

Teszteljük le, kattinsunk a Munka indítása, majd a Munka törlése gombra.

3.Példa:
A "button" gomb használata, változó paraméterek átadására.
Változó paraméterek meghatározásához, űrlapot kell készíteni.

<form name="matek" id="matek">
a = <input type="text" name="x" value="" size="15"> szorozva 
b = <input type="text" name="y" value="" size="15"> értékkel.<br /><br />
	<input type="button" value="Szorzás indítása!" onClick="munkamenet(matek.x.value , matek.y.value)">
	<input type="button" value="Munka törlése!" onClick="munkamenetTorlese()">
	<input type="reset" name="reset" value="Beírt adat törlése">
</form>

Vissza a lap elejére