Ako na to  |  Príručka JavaScript  |  Formuláre

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

Na to, aby sme mohli v JavaScripte niečo s formulármi robiť, musíme si ukázať spôsob akým je ich možné adresovať. Je to obdobné ako pri obrázkoch. Každému formuláru, ktorý sa na stránke zobrazí, prehliadač stránok automaticky priradí poradové číslo. Prvému formuláru sa priradí číslo 0, druhému 1, atď... K samotnému formuláru potom pristupujeme pomocou document.forms[cislo_form]...
Podobne ako pri obrázkoch je takéto pristupovanie neprehľadné a málokedy sa používa. Z toho dôvodu je vhodné si každý formulár pomenovať. Dá sa to realizovať pridaním parametra NAME="nazov_form" do formulárového tagu <FORM>. Následne potom v našich skriptoch s formulárom pracujeme už len prostredníctvom document.nazov_form.
Každý formulár pozostáva z formulárových prvkov. K týmto prvkov máme možnosť pristupovať niekoľkými spôsobmi. Prvým spôsobom je pomocou document.nazov_form.elements[cislo_prvku], kde cislo_prvku udáva poradové číslo formulárového prvku daného formulára. Iný - elegantnejší spôsob spočíva vo využití známeho parametra NAME, ktorým je možné priradiť prvkom meno. Prvok potom adresujeme document.nazov_form.nazov_prvku.

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?
Keďze ku formuláru a jeho prvkom pristupujeme iba vo vnútri samotného formulára, nie je potrebné si formulár pomenovať. Pomenovať však musíme vstupný riadok, do ktorého má návštevník napísať svoje meno. Aby tlačítko po stlačení otvorilo informačné okno s pozdravom, je mu nutné zadefinovať udalosť onClick. Ak sa vyskytne táto udalosť, spustí sa funkcia alert, ktorá zobrazí okno a vpíše do neho pozdrav. Pozdrav pozostáva zo slova Ahoj a mena návštevníka (meno.value). Meno návštevníka nie je potrebné adresovať pomocou document.forms[0].meno.value alebo this.form.meno.value, pretože ako sme už spomenuli, pracujeme s prvkami formulára v jeho vnútri.

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.

   








Home | Ako na to | Na stiahnutie | Tipy a triky | Diskusné fórum | Profesionálny webdesign | Kontakt
 
 




ISTUDIO webdesign & programming