JavaScript-opas

JAVASCRIPTIIN LIITTYVÄÄ KOULUTUSTA v.2008

Kurssit saatavilla kautta Suomen. Tule ja varaa oma koulutustapahtumasi jo tänään. IT-koulutuksen asiantuntijasi, Koulutus- ja konsultointipalvelu KK Mediat

JavaScriptin Form-olio ja lomakedatan käsittely

Form-olion avulla hallitaan lomakkeita ja niiden sisältämää dataa. Jokaista HTML/XHTML-dokumentin sisältämää lomaketta käsitellään erilisenä oliona, johon voidaan viitata joko lomake-elementin nimen, id-arvon tai indeksin perusteella. Esimerkiksi:


document.forms[0];			//indeksin mukaan
document.getElementById('lomake1');	// id-arvon mukaan
document.getElementByName('lomake1');	 //nimen mukaan

Kun sivu ladataan, JavaScript tekee siitä taulukkomuotoisen muuttujan, johon se tallentaa kaiken kyseiseen lomakeolioon liittyvän tiedon. Jokaisella lomakkeella on toinenkin taulukkomuuttuja, johon tallennetaan lomake-olion elementit, kuten input, select ja textarea. Form-olion elementteihin voidaan osoittaa muuttujalla taulukkomuuttujalla elements:


document.forms[0].elements[0];  // ensimmäisen lomakkeen ensimmäinen elementti

Yleisenä syntaksina on:


document.forms[indexi].elements[indeksi];

Form-oliolla on iso nippu muuttujia, näistä jo elements tuli äsken esille. Muita tärkeitä muuttujia ovat:


Form.action 	// lomakeolion toiminta
Form.encoding	// lomakeolion koodaus
Form.method	// lomakeolion postitusmetodi
Form.name		// lomakeolion nimi
Form.target	// lomakeolion kohde

Metodeinä ovat:


Form.submit()	// lähettää lomakkeen määrättyyn kohteeseen
Form.reset()	// resetoi lomakkeen

Ja seuraavaksi sama esimerkien avulla. Ensimmäisellää esimerkillä lähetään lomake automaattisesti käyttäen submit()-metodia, toisella rivillä resetoidaan se, kolmannella rivillä muokataan lomakkeen käsittelijää lennosta:


document.forms[0].submit();
document.forms[0].reset();
document.forms[0].action = 'kasittelija2.pl';

Onneksi JavaScript sisältää indeksejä viisaamman tavan viitata lomakkeeseen: voimme antaa lomakkeelle ja sen elementeile yksilöllisen nimen tai id-arvon. Tämä tapahtuu HTML/XHTML:n attribuutilla id tai tai name.


<form name="lomake1" method="get" action="jotain.asp">
<input type="text" name="nimi">
</form>

Tämän jälkeen voimme viitata olioon sen nimellä. Esimerkiksi:


document.lomake1.nimi;

Tutustu artikkelin muihin osiin:
»»» JavaScript »»»Form-olion hyödyntäminen pt.1
»»» JavaScript »»»Form-olion hyödyntäminen pt.2
»»» JavaScript »»»Form-olion hyödyntäminen pt.3

JavaScript-opas

JavaScriptin Form-olio ja lomakedatan käsittely

Tallenna tämä sivu kirjanmerkkeihin!