e-gradiva     HTML CSS JavaScript Načrtovanje    
  logotip  
SERŠ Maribor Iskanje Primeri

Potrditveni kvadratki

Koda:
<script type="text/javascript">
function check()
{
kava=document.forms[0].kava
zacetek="Naro\010Dil si kavo"
narocilo=""
for (i = 0; i<kava.length; ++ i)
{
if (kava[i].checked)
  {
  narocilo=narocilo + " " + kava[i].value + " in"
  }
}
narocilo=narocilo.substring(0,narocilo.length-3)
document.getElementById("odgovor").firstChild.nodeValue= zacetek + narocilo +"."
}
</script>

<p id="odgovor">Kakšno kavo želite?</p>
<form action="akcija.html">
<input type="checkbox" name="kava" value="s smetano">s smetano<br />

<input type="checkbox" name="kava" value="s sladkorjem">s sladkorjem<br />

<input type="button" name="naroci" onclick="check()" value="Naročam"><br />
</form>
Izgled v
brskalniku:

Kakšno kavo želite?

s smetano
s sladkorjem


Razlaga:

V obrazcu imamo dve izbirni polji in gumb. Glede na izbiro izbirnih polj lahko "naročimo" kavo s sladkorjem in/ali smetano, ali pa brez vsega. Ko spremenimo izbiro in kliknemo na gumb, se zažene funkcija check(). Spremenljivka kava, ki predstavlja polje document.forms[0].kava (torej elemente z atributom "kava", znotraj prvega obrazca, ta pa spet znotraj dokumenta), spremenljivko zacetek, ki je niz "Naročil si kavo" in zaenkrat še prazen niz narocilo. Zanka for, ki gre od 0 pa do vrednosti, ki je manjša od dolžine polja, ki vsebuje vse elemente, ki imajo name="kava". Ta for zanka pa s združevanjem nizov v niz narocilo vstavi vrednosti izbirnih polj ("s sladkorjem" ali "s smetano"), zraven pa še vedno da besedo " in". Ko se for zanka konča, se s postopkom substring() odrežejo zadnji trije znaki iz objekta narocilo, zato, ker je to niz " in", ki pa ne spada na konec stavka. Na koncu pa se vsebina notranjega teksta elementa z id="odgovor" (document.getElementById("odgovor").firstChild.nodeValue) nastavi na združitev nizov zacetek, narocilo in niza ..

SERŠ Maribor : Strokovna gimnazija : 2004 : Rok Arnuš