JavaScript-opas

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; 

JavaScriptin Form-olion ominaisuudet ja menetelmät

Seuraavaksi käymme luettelonomaisesti läpi lomakkeen ominaisudet sekä niihin liittyvät metodit:

Yleisin lomakkeisiin liittyvä tehtävä on kentän arvon tarkistaminen tai muuttaminen. Siispä harjoittelemme sitä. Mikäli haluamme vaihtaa tekstikentän (text,textarea tai hidden) arvoa tapahtuu se seuraavasti:

document.lomake1.nimi.value=''jokin uusi arvo;

Alasvetovalikot ovat hieman pelottavampi tehtävä, sillä meidän on selvitettävä mistä valinnasta on kyse. Vasta sen jälkeen voimme muuttaa sen arvoa ominaisuudella SelectedIndex

//haetaan arvo
a=document.lomake1.select.options[document.lomake1.select.selectedIndex].value;
// ja muokataan sitä
document.lomake1.select.selectedIndex = 2;

Valintaruudut ja radio-painikkeet vaativat hieman erilaisen toteutuksen. Valintaruudut ovat aina oletusarvoisestu "päälla". Sen sijaan meidän tulee tarkistaa ovatko ne valittuja ja tama tapahtuu ominaisuudella checked (joka on boolean tyyppinen eli mahdolliset arvot ovat true tai false):

if (document.lomake1.valinta.checked)
{
	a= document.lomake1.valinta.name
}

Radiopainikkeiden kohdalla tarkistus menee hyvin pitkälti saman kaavan mukaisesti:

for (i=0;i<document.lomake1.radiobuttonit.length;i++)
{
	if (document.lomake1.radiobuttonit[i].checked)
	{
		a = document.lomake1.radiobuttonit[i].value;
	}
}

Esimerkki JavaScriptin Form-olion käytöstä

Nyt voimmekin rakentaa yksinkertaisen ja universaalin lomakkeen tarkistuksen, joka antaa virheilmoituksen jos jokin arvoista puuttuu:

<form name="lomake1" onSubmit="tarkista(); return false">
<label>Nimi<label><br>
<input size="20" name="Nimi"><br>
<label>Osoite<label><br>
<input size="20" name="Osoite"><br>
<label>Kaupunki<label><br>
<input size="20" name="Kaupunki"><br>
<label>E-mail</label>
<input size="20" name="Email"><br>

<input type="submit" VALUE="Lähetä"><br>
</form>


<script type="text/javascript">
function tarkista()
{
for (i=0;i<4;i++) {	{
  	  a = document.lomake1.elements[i];
	     if (!a.value){
		alert('Ole hyvä ja täytä kenttä ' + a.name + '!');
		a.focus();
		return false;
		}
	}
	return true;
}