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

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

Ominaisuus / metodi	button, reset,submit	checkbox	hidden	password
name	x	x	x	x
value	x	x	x	x
defaultChecked		x
checked		x
defaultValue				x
index
length
options
selectedIndex
defaultSelected
selected
text
click()	x	x
blur()				x
focus()				x
select()				x

Ominaisuus / metodi	radiobutton	select	options	text, textarea
name	x			x
value	x			x
defaultChecked	x
checked	x
defaultValue				x
index	x		x
length	x
options		x
selectedIndex		x
defaultSelected			x
selected			x
text			x
click()	x		x
blur()				x
focus()				x
select()				x

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;
	}
}

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!