Krmilniki obrazca

V HTML trije tipi predmetov gnezdenih znotraj značke <form action="akcija.html"> postanejo skriptni predmeti v vseh brskalnikih DOM. Večina teh predmetov pripada znački <input> v izvorni kodi HTML. Kako se bodo krmilniki obnašali pa je odvisno od vrednosti, ki je dodeljena lastnosti type v znački <input type="..." />. Če je vrednost text, potem bo besedilno polje; lahko pa je še polje za vnos gesla (type="password"), skrito polje (type="hidden"), gumb (type="button"), potrditveno polje (type="chexbox"), ali radijski gumb (type="radio"). Druga dva tipa krmilnikov sta textarea (okvir za besedilo) in select (izbirni seznam).

Vsi krmilniki obrazca imajo nekaj skupnih lastnosti, nekateri lastnosti pa so unikatne posebnim tipom krmilnikov ali sorodnim tipom. Na primer; samo predmet select ponudi lastnost, ki razkrije kateri predmet na njegovem seznamu je trenutno izbran. Potrditvena polja in radijski gumbi imajo lastnost, da je lahko njun krmilnik nastavljen na on (vklopljeno). Podobno pa vsi besedilno orientirani krmilniki operirajo na enak način za branje in urejanje njihove vsebine.

Vsi elementi obrazca, razen skritih predmetov, se pojavijo na strani in s tem omogočajo uporabnikom, da vstavijo podatke. Ti elementi prav tako prikazujejo tekstovne informacije, ki se spreminjajo med uporabo strani (čeprav dinamični HTML v IE4+ in NN6+ omogočata skriptno spreminjanje telesa besedila in dokumenta).

Da naredimo te predmete skriptne, ne naredimo nič posebnega z njihovimi značkami, z mogočo izjemo dodeljevanja lastnosti name ali id. Za id se dodeljuje unikatna imena za vsak krmilni element, za name pa z izjemo skupine radijskih gumbov tudi.

Za vidne predmete velja, da so dogodki sproženi kot posledica mnogih uporabnikovih dejanj, kot recimo dodeljevanje fokusa polju, spreminjane besedila, izbira v seznamu.

Tektovni predmeti

Tekst je lahko shranjen v štirih zgoraj omenjenih predmetih. Razen skritega polja, so vsi ostali elementi vidni na spletni strani in uporabniku omogočajo vnos podatkov. Pri vseh je informacija shranjena v lastnosti value. Skript lahko v vsakem trenutku prebere:

var vrednost=document.forms.imeObrazca.imePolja.value

ali spremeni to vrednost:

document.forms.imeObrazca.imePolja.value=novaVrednost

Potrditveno polje (checkbox)

Informacije, ki so pomembne za ta premet so shranjene v lastnostih checked in value. Lastnost checked je logičnega tipa. Vrednost je true, če je kvadratek potrjen in false, če ni. Najpripravnejši stavek bi lahko bil torej if (...) ... else .... Lastnost value se lahko uporabi za hranjenje kakšnega podatka (pa tudi name, id):

if (document.forms.imeObrazca.imeKvadratka.cheched)
   ...
else
   ...

Radijski gumbi (radio)

Da se radijski gumbi obnašajo kot skupina, morajo imeti isto vrednost lastnosti name. V spletnem dokumentu je lahko več skupin radijskih gumbov. Lastnost length pove koliko je gumbov v skupini. Informacije, ki so pomembne za ta premet so shranjene v lastnostih checked in value. Lastnost checked je logičnega tipa in samo en element v skupini ima lahko vrednost true (če je kvadratek potrjen). Najpripravnejši stavek bi lahko bil torej for, ki mu izvajanje prekinemo z break, ko naletimo na potrjeno vrednost. Lastnost value se lahko uporabi za hranjenje kakšnega podatka (pa tudi name, id):

for (var i = 0; i < document.forms.imeObrazca.imeSkupine.length; i++)
   {
   if (document.forms.imeObrazca.imeSkupine[i].checked) break
   }
vrednost=document.forms.imeObrazca.imeSkupine[i].value

Izbirni seznam (select/option)

Najzahtevnejša je obdelava izbirnega seznama. Predmet select je sestavljen iz predmetov option. Najpomembnejša lastnost predmeta je selectedIndex, ki določa predmet, ki je trenutno izbran. Pomembne informacije vsake izbire so shranjene v lastnostih text in value. Lastnost text predstavlja napis, ki ga izpiše na ekranu element option.

var izbira=document.forms.imeObrazca.imeSkupine
var vrednost=izbira.options[izbira.selectedIndex].value
var napis=izbira.options[izbira.selectedIndex].text

Prenašanje podatkov funkcijam

Kadar se nek dogodek sklicuje na funkcijo, ki deluje v povezavi z elementi obrazcev, mora biti obrazec in/ali njegovi elementi jasno določeni. Vendar pa obstajajo tudi določene bližnjice za prenos informacij iz obrazca in/ali krmilnika obrazca neposredno do funkcije brez uporabe tipično dolgih ukazov, ki se začnejo z oknom oziroma na ravni predmetnih datotek. JavaScript podpira ključno besedo this, ki vedno kaže na to, kar predmet v skripti v kateri je geslo uporabljeno vsebuje. Z dogodkom onchange za tekstovno polje lahko greš skozi referenco do tekstovnega predmeta skozi funkcijo ob vstavitvi gesla za parameter k tej funkciji.

<input type="text" name="vnos" onchange="velikeCrke(this)" />

Ob prejemu konca funkcija definira spremenljiv parameter, ki obrne referenco v spremenljivko, ki jo lahko uporabi preostali del funkcije:

function velikeCrke(parameter)
{
stavki
}

Ime, ki ga določimo spremenljivki parametra funkcije je popolnoma poljubno, vendar je koristneje, če ji damo takšno ime, ki nam pove kakšna je referenca. Pomembno je, da je referenca nekakšna "živo" povratno povezavo do predmeta. Zaradi tega ukza v skripti lahko dobijo in/ali nastavijo lastne vrednosti predmeta po želji.

Morda bo za kakšno drugo funkcijo potrebna referenca celotnega obrazca, ne pa samo predmeta, ki kliče funkcijo. To je zagotovo takrat, kadar mora funkcija dostopati do ostalih elementov v istem obrazcu in ne do tistega, ki kliče funkcijo. Da se lahko pregleda celoten obrazec, se je potrebno sklicevati na lastnost form, še vedno pa uporabiti ključno besedo this.

<input type="button" value="Klikni" onclick="preveri(this.form)" />

Definicija funkcije bo nato imela parametrsko spremenljivko, ki se je pripravljena pridružiti k referenci predmeta obrazca form. Določi se samo kakršno koli veljavno ime, ki ga bo imela spremenljivka. Priporočljivo je uporabiti takšno ime spremenljivke obrazca, da se kasneje točno hitro ugotovi na kateri predmet se sklicuje.

function preveri(form)
{
stavki
}

Pošiljanje podatkov

Ko so podatki v obrazcu zbrani, jih je potrebno poslati strežniku. To sw lahko naredi s pritiskom na gumb submit ali pa se pokliče postopek, ki stori isto:

document.forms[0].submit()

Pred pošiljanjem podatkov se lahko obrazec preveri. Funkcija za preverjanje mora vrniti vrednost true, da se pošiljanje nadaljuje, v primeru, da funkcija vrne vrednost false se pošiljanje ustavi.

<form onsubmit="return preveriObrazec(this)">
...
</form>

function preveriObrazec(form)
{
stavki ... return true
stavki ... return false
}

Gor e-gradiva JavaScript Obrazci Preverjanje podatkov

SERŠ Maribor : Strokovna gimnazija : 2004 : Rok Teržan

e-gradiva	HTML	CSS	JavaScript	Načrtovanje

			SERŠ Maribor		Iskanje	Primeri