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í:
|
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í:
|
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.
|
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..
|
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í:
|
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).
|
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):
- JavaScript - Seznámení
- JavaScript - Základy
- Javascript - Datové typy proměnných
- Co je to funkce ?
- Rozhodovací struktury
- Cykly
- Objekty v Javascriptu
- Události Javascriptu
- Okna v Javascriptu
- Formuláře v Javascriptu
Poslat článek
Nyní máte možnost poslat odkaz článku svým přátelům:
-
25. listopadu 2012
-
30. srpna 2002
-
10. října 2002
-
4. listopadu 2002
-
12. září 2002
-
25. listopadu 2012
-
28. července 1998
-
31. července 1998
-
28. srpna 1998
-
6. prosince 2000
-
27. prosince 2007
-
4. května 2007