Formuláře v Javascriptu - Builder.cz - Informacni server o programovani

Rubriky
Odběr fotomagazínu

Fotografický magazín "iZIN IDIF" každý týden ve Vašem e-mailu.
Co nového ve světě fotografie!

 

Zadejte Vaši e-mailovou adresu:

Kamarád fotí rád?

Přihlas ho k odběru fotomagazínu!

 

Zadejte e-mailovou adresu kamaráda:



JavaScript

Formuláře v Javascriptu

7. listopadu 2001, 00.00 | Pomocí Javascriptu lze velmi efektivně pracovat s formuláři a odlehčit serveru při kontrole dat vložených uživatelem. Dnes se podíváme, jak se pojmenovávají položky, jak provést jednoduchou kontrolu vstupních dat a jaké funkce lze volat nad formulářem.

Asi by bylo zbytečné vám vyprávět, co to formuláře jsou. Setkáváme se s nimi téměř na každé stránce, kde jsou po nás požadována nějaká data.

Možná se ptáte, proč se v době PHP/ASP vůbec zabývat používání JS pro práci s formuláři. Hlavní důvodem použití JS však není zpracování zaslaných informací, ale kontrola, zda jsou zaslány správné informace. Přece není nic hezkého, když vyplníte formulář, ten vyvolá například PHP skript a teprve ten vám řekne, že jste nevyplnili svou e-mailovou adresu. Nehledě na to, že uživatel není donucen čekat na načtení stránky a server není zbytečně zatěžován.

JS můžete však použít i na další věci, třeba počítání znaků ve formuláři (RS, SMS brány), či úpravu obsahu (odstranění nevhodných znaků, například českých znaků).

Číslování formulářů

Každému formuláři, který se na stránce zobrazí přidělí prohlížeč pořadové číslo, číslování začíná od 0. K formuláři potom JS přistupuje pomocí:

document.forms[pořadové_číslo]

Aby to nebylo zbytečně jednoduché, tak stejně jako formulářům, tak i formulářovým prvkům jsou přiřazena pořadová čísla, číslování opět začíná od 0. K jednotlivým prvkům formuláře se tedy přistupuje pomocí:

document.forms[pořadové_číslo].elements[pořadové_číslo]

Jméno každému formuláři a jeho prvku

Nevím jak vám, ale mně se zdá být odkazování na formulář pomocí pole hrozně nepřehledné, ale hlavně může být zdrojem různých překlepů a pak je vývoj takové stránky zbytečně delší.

Proto si ukážeme, jak formuláře a jejich prvky pojmenovat (vy co programujete v PHP/ASP to děláte stále :-). Pojmenováním jasně určíme identifikátor formuláře a ve skriptu se pak můžeme odkazovat na jméno.

<HTML>
<HEAD>
<TITLE>Formulare uz maji jmena</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function vypis()
 {
  window.alert("Jmenujete se: "+document.uzivatel.jmeno.value);
 }
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="uzivatel">
<INPUT TYPE="text" NAME="jmeno">
<INPUT TYPE="button" VALUE="Vlož" onClick="vypis();">
</FORM>
</BODY>
</HTML>

Tak jsme si vysvětlili nezbytné základy, ale asi sotva použijete JS, aby jste uživateli řekli, jak se jmenuje či jakou má e-mailovou adresu..

V následujícím příkladu si ukážeme klasický případ, kdy potřebujeme zajistit, aby uživatel vložil e-mailovou adresu ve správném tvaru (však efektivnější by bylo zjistit pomocí PHP, zda adresa skutečně existuje..

<HTML>
<HEAD>
<TITLE>Overujeme e-mail</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function over(adresa)
{
  if (adresa.indexOf("@")==-1)
   { 
    window.alert("Zadal jste nesprávnou adresu");
    return false;
   }
else return true;
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="uzivatel" ACTION="" onSubmit="return
over(email.value);">
<INPUT TYPE="button" VALUE="Vlož">
</FORM>
</BODY>
</HTML>

Asi vůbec nebude na škodu si příklad vysvětlit. Jistě nemusím vysvětlovat jak jsem formulář pojmenoval, co je to VALUE, atd... Zajímavější je však již ovladač událostí onSubmit, který se aktivuje při odeslání formuláře pomocí tlačítka Vlož. Funkce, která je volána po odeslání formuláře vrátí hodnotu true tehdy, pokud zjistí přítomnost znaku @ v řetězci, který tvoří e-mailovou adresu (pokud řetězec znak obsahuje, metoda indexOf vrátí číslo, které určuje polohu výskytu znaku v řetězci, počítá se od nuly, proto -1, to nemůže metoda nikdy vráti, když řetězec obsahuje požadovaný znak).

Pokud funkce vrátí hodnotu true, formulář se okamžitě odešle na server a máme zajištěnou kontrolu obsahu, v opačném případě samozřejmě k odeslání na server nedochází.

Pozn: K ověření e-mailu je však lepší použít regulární výraz, ale nechtěl jsem zbytečně stěžovat pochopení příkladu pro začátečníky.

Formulářové funkce

To hlavní co jsem vám chtěl vysvětli jsem snad již udělal, ještě vám však musím říci něco o formulářových funkcí, které nám mohou zpříjemnit práci s formulářem. Přehled některých formulářových funkcí:

document.form.reset() - inicializace formuláře
document.form.submit() - odeslání formuláře
document.form.prvek.focus() - aktivace pohledu na prvek
document.form.prvek.blur() - deaktivace pohledu na prvek
document.form.prvek.select() - označení obsahu prvku

Použití všech formulářových funkcí je stejné, proto si ukážeme jeden příklad, který byl (možná ještě je) využíván na www.javascript.com.

V našem příkladu je zdrojový kód nahrán do TEXTAREA a pomocí tlačítka může být celý označen (on výpis zdrojových kódů do TEXTAREA je rozumný, protože při použití elementu PRE může dojít ke zničení designu stránky, pokud je řádek kódu příliš dlouhý, než aby se vešel například do tabulky).

<HTML>
<HEAD>
<TITLE>Formulare uz maji jmena</TITLE>
</HEAD>
<BODY>
<TEXTAREA name="skript">Tak tady je kod skriptu</TEXTAREA>
<INPUT TYPE="button" VALUE="Označit" onClick="skript.select();">
</BODY>
</HTML>

Tak tím bychom dnes skončili a příště se podíváme na cookies, to je již na mnohem delší povídání.

Obsah seriálu (více o seriálu):

Tématické zařazení:

 » Rubriky  » JavaScript  

 » Rubriky  » Web  

Poslat článek Diskuse (0) Tisk Přečteno: 9233x

www.builder.cz/rubriky/javascript/formulare-v-javascriptu-155937cz

 

 

 

Nejčtenější články
Nejlépe hodnocené články
Krátké zprávy

 

Přihlášení k mému účtu

Uživatelské jméno:

Heslo: