Kirjoittaja: MikaBug (2007).
⚠ Huomio! Tämä opas on vanhentunut. Oppaan sisältöön ei voi enää luottaa. Opas on säilytetty vain sen historiallisen arvon vuoksi. ⚠
Lomakkeiden tietojen käsittely ja tarkistaminen lienee JavaScriptin yleisimpiä käyttökohteita. Tässä oppaassa kerrotaan, miten lomakkeesta voidaan lukea tietoa JavaScriptin muuttujiin jatkokäsittelyä varten ja kuinka lomakekenttien sisältöä muutetaan.
Lomakkeet ovat JavaScriptille olioita, joihin voidaan viitata useammalla tavalla. Tässä käytetään kuitenkin helppoa tapaa, jossa lomakkeeseen ja sen eri kenttiin viitataan niiden nimillä. Syntaksi on muotoa document.lomakkeen_nimi.kentan_nimi.value. Seuraavana on yksinkertainen esimerkki, jossa käyttäjä kirjoittaa tekstikenttään ja nappia klikkaamalla tämä teksti näytetään viesti-ikkunassa.
<html>
<head>
<title>Lomakekäsittelyä</title>
<script type="text/javascript">
function Nayta()
{
var teksti = document.lomake.teksti.value;
alert("Lomakekentän teksti on " + teksti);
}
</script>
</head>
<body>
<form name="lomake">
<input type="text" name="teksti">
<input type="button" value="Klik" onclick="Nayta()">
</form>
</body>
</html>Lomakkeelle on annettu nimi "lomake" name-attribuutilla. Tähän voi käyttää myös id-attribuuttia. JavaScriptille kelpaa kumpikin tapa, mutta vanhemmat selaimet eivät välttämättä ymmärrä uudemman standardin mukaista id-attribuuttia. name-attribuutti toimii varmemmin kaikissa selaimissa. Samoin tekstikentälle on annettu nimi "teksti". Näiden nimien avulla skriptissä viitataan kentässä olevaan arvoon document.lomake.teksti.value; ja tallennetaan kentän sisältö teksti-muuttujaan.
Jos puolestaan haluamme tulostaa jotain lomakkeen tekstikenttään, tapahtuu se näin:
document.lomake.teksti.value = "Tekstiä";
Eli sijoitamme lomakkeen "lomake" kenttään "teksti" arvoksi (value) merkkijonon "Tekstiä". Yhtä hyvin merkkijonon paikalla voi olla luku tai muuttuja.
Alla on skripti, jossa käyttäjän kirjoittama teksti siirtyy toiseen tekstikenttään isoiksi kirjaimiksi muutettuna.
<script type="text/javascript">
function Tulosta()
{
var syote = document.lomake2.syote.value;
syote = syote.toUpperCase();
document.lomake2.tuloste.value = syote;
}
</script>
<form name="lomake2">
<input type="text" name="syote" size="40" onkeyup="Tulosta()">
<input type="text" name="tuloste" size="40">
</form>Tulosta-funktiota kutsutaan onkeyup-tapahtumankäsittelijän kautta, koska funktio on suoritettava aina, kun tekstikenttään kirjoitetaan uusi merkki. Ensin tekstikentän sisältö otetaan talteen syote-muuttujaan. syote-muuttujan arvo on String-tyyppinen olio, jonka metodilla toUpperCase kirjaimet saadaan muutettua isoiksi. Tämä tapahtuu koodissa siis näin: syote.toUpperCase();. Teksti, joka on nyt muuttunut kokonaan isoiksi kirjaimiksi, sijoitetaan takaisin muuttujaan syote. Lopulta tämän muuttujan sisältö tulostetaan toiseen tekstikenttään: document.lomake2.tuloste.value = syote;.
Kirjainten muuttaminen pieniksi tapahtuu toLowerCase-funktiolla. Merkkijonojen (String) käsittelystä on tulossa vielä kokonaan oma opas.
Tekstikentässä olevan merkkijonon pituuden voi selvittää seuraavanlaisella tavalla:
var pituus = document.lomakkeen_nimi.kentan_nimi.value.length;
Edellä opetetut asiat toimivat kenttien text, textarea, hidden ja password yhteydessä. Samoin esimerkiksi painikkeen teksti on mahdollista muuttaa edellä kerrotulla tavalla:
document.lomakkeen_nimi.painikkeen_nimi.value = "Lähetä tiedot";
Tällä hetkellä pitäisi hallinnassa olla tekstikenttien ja -laatikoiden sisällön lukeminen muuttujaan sekä tekstin tulostaminen lomakkeen tekstikenttiin. Seuraavaksi käsitellään valintaruutujen ja valintapainikkeiden sekä alasvetovalikoiden arvojen tutkimista.
Alasvetovalikosta voi valita haluamansa vaihtoehdon useiden vaihtoehtojen joukosta. Jokaisella vaihtoehdolla on oma indeksinumero nollasta alkaen. Listassa ensimmäisenä olevalla vaihtoehdolla se on 0, toisella 1 jne. Indeksejä tarvitaan, jotta saadaan selville, minkä vaihtoehdon käyttäjä on valikosta valinnut.
<script type="text/javascript">
function TarkistaValinta()
{
// Ensin selvitetään minkä vaihtoehdon käyttäjä on valinnut:
var indeksi = document.lomake.valinta.selectedIndex;
// Sitten sijoitetaan kyseisen vaihtoehdon arvo muuttujaan "arvo":
var arvo = document.lomake.valinta.options[indeksi].value;
alert("Valitsit valikosta vaihtoehdon " + arvo);
}
</script>
...
<form name="lomake">
<select name="valinta">
<option value = "Kamera">Kamera</option>
<option value = "Tietokone">Tietokone</option>
<option value = "Digiboksi">Digiboksi</option>
</select>
<input type="button" value="Tarkista valinta" onclick="TarkistaValinta()">
</form>Ensimmäisenä funktiossa selvitetään, minkä vaihtoehdon käyttäjä on valinnut alasvetovalikosta. Esimerkiksi Tietokone-valinnan indeksinumero on 1. Käyttäjän valinta saadaan siis selville selvittämällä indeksinumero. Se tapahtuu lauseella:
var indeksi = document.lomake.valinta.selectedIndex;
Eli lomake-nimisen lomakkeen valinta-nimisen alasvetovalikon valittuna olevan vaihtoehdon indeksinumero sijoitetaan indeksi-muuttujaan. Toivottavasti ei ollut epäselvää. Kun tiedetään valitun vaihtoehdon indeksi, voidaan varsinainen arvo (lomakkeen option-tagin value-arvo) hakea muuttujaan lauseella:
var arvo = document.lomake.valinta.options[indeksi].value;
Ja lopuksi vaikkapa näyttää se viesti-ikkunassa.
Halutessasi voit muuttaa alasvetovalikon valittuna olevaa vaihtoehtoa JavaScriptistä käsin seuraavanlaisesti:
document.lomake.valinta.selectedIndex = 2; // Digiboksi
Valintaruutujen tapauksessa tarkistetaan, onko valintaruutu valittuna vai ei. Tämä tapahtuu checked-ominaisuudella, jonka arvo on tosi (true), mikäli valintaruutu on valittu, ja epätosi (false), jos ruutua ei ole valittu.
var tila = document.lomake.ruutu.checked;
Jos "ruutu"-niminen valintaruutu on valittu, tulee muuttujan tila arvoksi true, muutoin false. Paluuarvoa voi hyödyntää vaikkapa if-lauseessa, joka suorittaa arvon perusteella tarvittavat toimenpiteet. Alla olevassa esimerkissä funktio kertoo viesti-ikkunassa, onko valintaa tehty vai ei.
<script type="text/javascript">
function Tarkista()
{
if(document.lomake.java.checked)
alert("Valitsit " + document.lomake.java.name + ":n.");
else
alert("Et valinnut ruutua.");
}
</script>
...
<form name="lomake">
<input type="checkbox" name="java">
<input type="button" value="Tarkista" onclick="Tarkista()">
</form>Lause document.lomake.java.name palauttaa valintaruudun nimen (tässä tapauksessa java). Huomaa, että if-lauseen ehtona ei ole vertailulauseketta. Riittää että ehtona on lause, jonka arvo on tosi tai epätosi.
Valintapainikkeet koostuvat ryhmästä painikkeita, joista vain yksi voi olla kerrallaan valittuna. JavaScriptissä valintapainikkeiden tutkiminen tapahtuu käymällä kaikki ryhmään kuuluvat painikkeet läpi ja tarkistamalla jokaisen kohdalla, onko se valittu. Valitun painikkeen value-arvo sijoitetaan muuttujaan. Seuraavaksi sama koodina.
for(a = 0; a < document.lomake.nappulat.length; a++)
{
if(document.lomake.nappulat[a].checked)
{
var arvo = document.lomake.nappulat[a].value;
}
}for-silmukalla käydään läpi kaikki samaan ryhmään kuuluvat painikkeet. Tässä tapauksessa ryhmän nimi on "nappulat". length-ominaisuus kertoo painikkeiden määrän ryhmässä. Toisin sanoen for-silmukkaa toistetaan niin kauan, kuin painikkeita on jäljellä.
Jokaisen painikkeen kohdalla tehdään tarkistus, onko se valittu. Tämä tapahtuu if-lauseella. Ryhmän nimen perässä on hakasulut, joissa oleva indeksi viittaa jokaisella silmukan kierroksella eri painikkeeseen. Esimerkiksi silmukan ensimmäisellä kierroksella a on 0, jolloin tarkistetaan, onko ensimmäinen ryhmään kuuluva painike valittu. Ensimmäisen painikkeen indeksi on 0, toisen 1 jne.
Kun valittu painike löytyy, ehto muuttuu todeksi, ja if-lohko suoritetaan, eli kyseisen painikkeen value-arvo sijoitetaan muuttujaan arvo. Tämän jälkeen sitä voi jatkokäsitellä halutulla tavalla, esimerkiksi tulostaa painikkeen arvo viesti-ikkunaan.
Alla vielä koodi lomakeosuuden kanssa.
<script type="text/javascript">
function Tarkista()
{
for(a = 0; a < document.lomake.nappulat.length; a++)
{
if(document.lomake.nappulat[a].checked)
{
var arvo = document.lomake.nappulat[a].value;
alert("Valitsemasi levy on " + arvo + "-levy.");
}
}
}
</script>
...
<form name="lomake">
DVD-levy
<input type="radio" name="nappulat" value="DVD">
CD-levy
<input type="radio" name="nappulat" value="CD">
LP-levy
<input type="radio" name="nappulat" value="LP">
<input type="button" value="Tarkista" onclick="Tarkista()">
</form>Edellä esiteltiin helppo tapa viitata lomakkeen eri kenttiin niiden nimien perusteella. Lomakkeisiin ja kenttiin on mahdollista viitata myös indeksien avulla, koska JavaScript tallentaa lomakkeet ja niiden kentät sivun latautuessa taulukoihin. Syntaksi näyttää tältä:
document.forms[indeksi_lomake].elements[indeksi_kentta];
Indeksillä indeksi_lomake valitaan haluttu lomake (sivullahan voi olla useita lomake-elementtejä) ja indeksi_kentta-indeksillä haluttu kenttä kyseisestä lomakkeesta. Seuraavassa esimerkissä haetaan arvo sivun ensimmäisen lomakkeen kolmannesta kentästä.
var arvo = document.forms[0].elements[2].value;
Lomakkeen kenttiin voidaan viitata niin ikään kentän id-arvon perusteella:
<script type="text/javascript">
var nimi = document.getElementById('nimi').value;
document.write("Nimeni on " + nimi + ".");
</script>
...
<form>
<input type="text" id="nimi">
</form>Tämän oppaan viimeisenä asiana tehdään yksinkertainen palautelomakkeen tarkistava skripti, joka antaa lähettää lomakkeen tiedot vasta, kun kaikki kentät on täytetty. Lomakkeessa kysytään nimi, sähköpostiosoite, käytössä oleva selain ja palaute. Skripti varmistaa myös, että käyttäjä on syöttänyt kelvollisen sähköpostiosoitteen eli siinä on @-merkki.
<html>
<head>
<title>Lomakkeen tarkistus</title>
<script type="text/javascript">
function TarkistaLomake()
{
var tila = 1;
for(var indeksi = 0; indeksi < 4; indeksi++)
{
var pituus = document.palaute.elements[indeksi].value.length;
if(pituus == 0)
{
alert("Ole hyvä ja täytä myös kenttä " + document.palaute.elements[indeksi].name);
tila = 0;
}
}
var sp_osoite = document.palaute.sahkoposti.value;
if(sp_osoite.indexOf("@") == -1)
{
alert("Antamasi sähköpostiosoite ei ole kelvollinen!");
tila = 0;
}
if(tila) { document.forms[0].submit(); }
}
</script>
</head>
<body>
<form name="palaute" action="palaute.php" method="post">
<b>Nimi:</b><br>
<input type="text" size="30" name="nimi"><br>
<b>Sähköpostiosoite:</b><br>
<input type="text" size="30" name="sahkoposti"><br>
<b>Selain:</b><br>
<input type="text" size="30" name="selain"><br>
<b>Palaute:</b><br>
<textarea cols = "40" rows = "10" name = "palaute"></textarea><br>
<input type="button" value="Lähetä" onclick="TarkistaLomake()">
</form>
</body>
</html>Itse lomakkeessa ei pitäisi olla mitään ihmeellistä. Lomake sisältää neljä kenttää, joista jokaiselle on annettu kuvaava nimi. Lomake on nimetty nimellä "palaute". Lomakkeen tiedot lähetetään post-metodilla palaute.php-nimiselle skriptille, joka jatkokäsittelee tiedot, esimerkiksi lähettää ne ylläpitäjän sähköpostiin. Lomakkeen tarkistus käynnistyy Lähetä-painiketta klikkaamalla, joka kutsuu TarkistaLomake-funktiota.
TarkistaLomake-funktiossa jokainen tekstikenttä käydään läpi for-silmukan avulla. Huomaa muuttujan määrittely suoraan for-lauseen suluissa. Silmukkaa kierretään niin kauan, kuin indeksi on pienempi kuin 4, eli kunnes kaikki kentät on tarkistettu.
pituus-muuttujaan sijoitetaan tekstikentän sisällön pituus eli merkkien määrä. Tähän on käytetty aiemmin opetettua elements-taulukkoa, jonka indeksi indeksi osoittaa vuorollaan jokaiseen lomakkeen kenttään.
Kun kentän sisällön pituus on sijoitettu pituus-muuttujaan, suoritetaan vertailu pituus == 0, eli jos pituus on nolla, lauseke on tosi. Tällöin suoritetaan if-lause, ja tulostetaan viesti-ikkunaan huomautus käyttäjälle tyhjästä kentästä (jos merkkien määrä on nolla, on kenttä jätetty täyttämättä). Lauseella document.palaute.elements[indeksi].name; saadaan tulostettua viesti-ikkunaan tyhjän kentän nimi.
Sähköpostiosoitteen kelvollisuus tarkistetaan sijoittamalla ensin kyseisen kentän sisältö sp_osoite-muuttujaan. Tämän jälkeen tutkitaan, sisältääkö merkkijono @-merkkiä. Tämä tapahtuu lauseella sp_osoite.indexOf("@"). indexOf on eräs String-olion metodi, joka käsitellään tarkemmin seuraavassa oppaassa. Metodi palauttaa parametrina annetun merkin tai merkkijonon indeksin (sijainnin) tutkittavassa merkkijonossa. Mikäli merkkiä ei löydy, palauttaa metodi arvon -1. Tässä esimerkissä sp_osoite-muuttujaan sijoitetusta merkkijonosta etsitään merkkiä "@", ja mikäli merkkiä ei löydy, tulee if-lauseen ehdosta tosi. Tällöin tila-muuttujaan sijoitetaan arvo 0, ja käyttäjälle näytetään virheilmoitus.
Funktion alussa luotu tila-muuttuja on oletuksena 1 eli tosi. Tämä kuvaa tilannetta, jolloin kaikki kentät on täytetty oikein. Jos kuitenkin jokin kenttä on jätetty täyttämättä tai sähköpostiosoite ei ole kelvollinen, suoritetaan edellä mainitut if-lauseet, joissa tila-muuttujan arvoksi tulee 0, epätosi. Tämän perusteella funktion kolmas if-lause tekee päätöksen, lähetetäänkö lomake vai ei. Mikäli tila-muuttuja on tosi, lomake lähetetään lausekkeella:
// submit() on form-olion metodi, jolla lomakkeen tiedot lähetetään:
if(tila) { document.forms[0].submit(); }Muutoin lomake jää lähettämättä, kunnes käyttäjä täyttää kaikki kentät. Tällainen JavaScriptillä toteutettu lomakkeen esitarkistus on aina syytä varmistaa tarkastamalla tiedot uudelleen palvelimella esimerkiksi PHP-skriptillä.
Tällä hetkellä sinulla pitäisi olla melko hyvät tiedot lomakkeista ja tietojen poimimisesta eri kentistä vaikkapa muuttujiin. Seuraavaksi on tulossa merkkijonojen käsittelystä kertova opas, jossa opetettavia asioita hyödyntämällä lomaketietoja voi käsitellä vielä monipuolisemmin.
Jes tämmönen hieno opas enkä oo ennen huomannu!
Alla oleva scripti toimii hyvin Netscapella ja Firefoxilla, muttei IE:llä!
document.lomake.paivat.options[a].value
Tuo ei anna mitään arvoa, missä vika..?
var pvm = getCookie("pvm");
for(a = 0; a < document.lomake.paivat.options.length; a++) {
if(document.lomake.paivat.options[a].value == pvm) {
document.lomake.paivat.selectedIndex = a;
}
}<form name="lomake" action="testi.php" method="post">
<select name="paivat">
<option>valitse</option>
<option>01.12.</option>
<option>02.12.</option>
<option>03.12.</option>
<option>04.12.</option>
...
</select>Huomio! Kommentoi tässä ainoastaan tämän oppaan hyviä ja huonoja puolia. Älä kirjoita muita kysymyksiä tähän. Jos koodisi ei toimi tai tarvitset muuten vain apua ohjelmoinnissa, lähetä viesti keskusteluun.