|
VI. Formuláre a práca s nimi V súčasnosti sa objavuje v Internete čoraz viac stránok, ktoré s návštevníkom komunikujú prostredníctvom prvkov formulára. Formulárové prvky sprostredkúvajú výmenu informácií medzi nami a webovským serverom, ktorý ich spracováva a vyhodnocuje. Ako príklad možno uviesť objednávkové formuláre vyskytujúce sa napr. vo virtuálnych obchodných domoch alebo registračné formuláre slúžiace na overenie identity návštevníka... Medzi formulárové prvky patrí: vstupný riadok, výberová lišta (pull-down), textové pole (text area), kruhový volič (radio button), zaškrtávací volič (checkbox) a klasické tlačítko (button). Prepojenie formulára s JavaScriptom PRÍKLAD 6.1 - Práca s formulárom <HTML>
<HEAD>
<TITLE>Praca s formularom</TITLE>
</HEAD>
<BODY>
<CENTER>
<FORM>
Napis svoje meno: <INPUT TYPE="text" NAME="meno" SIZE="25">
<P><INPUT TYPE="button" VALUE="Klikni sem!"
onClick="alert('Ahoj '+meno.value+'!');">
</FORM>
</CENTER>
</BODY>
</HTML>
Po napísaní mena do vstupného riadku
a potvrdení tlačítka sa objaví na obrazovke informačné okno, ktoré pozdraví
návštevníka stránky jeho vlastným menom. Ako to celé funguje? Kontrola zadanej e-mail adresy Kontrola formulárových údajov s využitím JavaScriptu skrýva v sebe niekoľko výhod. Po vyplnení formulára dochádza ku kontrole vložených údajov na strane návštevníka a nie na strane webovského servera, čím sa šetrí čas, nezaťažuje sa našou požiadavkou server a šetrí sa prenosová kapacita Internetu. PRÍKLAD 6.2 - Kontrola zadanej e-mail adresy <HTML>
<HEAD>
<TITLE>Kontrola zadanej e-mail adresy</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function kontrola(adresa)
{
if (adresa.indexOf("@")<1)
{
alert("Zadal si nespravnu e-mail adresu!");
pokracuj=false;
}
else pokracuj=true;
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<FORM ACTION="/">
Tvoj email:
<INPUT TYPE="text" NAME="email" SIZE="25" VALUE=""><P>
<INPUT TYPE="submit" VALUE="Klikni sem!"
onClick="kontrola(email.value);return pokracuj;">
</FORM>
</CENTER>
</BODY>
</HTML>
V tomto skripte sa vyskytuje nová funkcia - indexOf. Táto funkcia vracia pozíciu znaku v reťazci. Teda prehľadávame reťazec adresa na výskyt zavináča (@) a ak jeho pozícia je >1 odovzdáme činnosť formuláru. Ak je jeho pozícia -1, znamená to, že zadaná e-mail adresa neobsahuje @, tzn. že je zlá. V tomto prípade informujeme návštevníka, že zadal nesprávnu e-mail adresu. Po zadaní správnej adresy, činnosť prevezme formulár a vykoná sa operácia zadefinovaná v parametri ACTION. Inteligentný formulár - prihláška na koncert Na záver si naprogramujeme inteligentný formulár. Jeho inteligencia bude spočívať v tom, že bude dôslednejšie kontrolovať e-mail adresu (okrem kontroly prítomnosti zavináča, skontroluje, či je adresa z domény .cz resp. .sk a že či neobsahuje medzeru). Navyše ak začneme zadávať údaje do niektorého z prvkov formulára, v stavovom riadku sa nám zobrazí detailný popis prvku. Po kliknutí na tlačítko Odoslanie udajov, dochádza ku kontrole údajov a na obrazovke sa zjaví potvrdzovacie okno obsahujúce všetky nami vložené údaje. Ak potvrdíme OK, činnosť prevezme formulár a vykoná akciu definovanú v parametri ACTION. PRÍKLAD 6.3 - Inteligentný formulár - prihláška na koncert <HTML>
<HEAD>
<TITLE>Inteligentny formular - prihlaska na koncert</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function kontrola(adresa)
{
if ( adresa.indexOf("@")<1 || adresa.indexOf(" ")>-1 ||
adresa.indexOf(".sk")<3 && adresa.indexOf(".cz")<3 )
{
alert("Zadal si nespravnu slovensku/cesku e-mail adresu!");
document.formular.email.focus();
}
else
{
obsah="Budu odoslane tieto udaje: \n\n";
for (i=0; i<document.formular.elements.length-2;i++)
obsah=obsah+document.formular.elements[i].value+"\n";
if (confirm(obsah+"\nAk suhlasis s odoslanim udajov, klikni na OK"))
document.formular.submit();
}
}
function wrt(text)
{
window.status=text;
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FONT SIZE="5"><U>Prihlaska na koncert</U><BR></FONT>
<FONT SIZE="3">(zucastnit sa mozu iba slovaci/cesi!)</FONT>
<FORM NAME="formular" ACTION="/">
<B>Meno: </B>
<INPUT TYPE="text" SIZE="25" VALUE="" NAME="meno"
onFocus="wrt('Napis svoje meno a priezvisko (napr. Jan Novak)');">
<BR><B>Zamestnanie: </B>
<INPUT TYPE="text" SIZE="25" VALUE="" NAME="praca"
onFocus="wrt('Napis, ake mas zamestnanie (napr. ucitel)');">
<BR><B>Tvoj email: </B>
<INPUT TYPE="text" SIZE="25" VALUE="" NAME="email"
onFocus="wrt('Napis svoju e-mail adresu (napr. Jan@Novak.sk)');">
<FONT COLOR="RED">* povinny udaj</FONT><P>
<INPUT TYPE="button" VALUE="Odoslanie udajov"
onClick="kontrola(email.value);">
<INPUT TYPE="reset" VALUE="Reset">
</FORM>
</BODY>
</HTML>
Opäť tu máme niekoľko nových prvkov a noviniek. Po zadaní nesprávnej e-mail adresy dochádza k vyvolaniu výstražného okna a následne sa vyvolá funkcia focus(), ktorá nastaví kurzor do políčka s e-mail adresou. Pri zadávaní údajov do formulára, sa v stavovom riadku objavujú krátke popisy a tipy. To sa realizuje definovaním udalosti onFocus v jednotlivých prvkoch formulára. Po správnom vyplnení formulára, sa na obrazovke zjaví informačné okno s údajmi, ktoré sme práve zadali. Týmto máme poslednú možnosť potvrdiť/stornovať vyslanie údajov na server. Samotný výpis vložených údajov do okna funguje týmto spôsobom: zistí sa počet formulárových prvkov, spustí sa funkcia cyklu for od 0 až po počet prvkov-2 (aj tlačítka Odoslanie udajov a Reset sa zaraďujú medzi prvky, preto ich musíme vynechať). Do premennej obsah sa postupne vložia hodnoty jednotlivých prvkov formulára. Na koniec vyvoláme funkciu submit(), ktorá odošle údaje. Záverom... S formulármi v JavaScripte vieme robiť rôzne divy. Od kontroly vložených údajov, až po rôzne počítadlá (používané pri SMS bránach) a prezentačné prvky (hodiny, posun textu...). V tejto časti sme sa hlavne zamerali na kontrolu vložených údajov, pretože je to najčastejšia formulárová aplikácia JavaScriptu. Veľa úspechov s JavaScriptom vám želá, Rastislav Škultéty
NAHORU
|