JavaScriptové opakování: formuláře

Formuláře jsou legitimní součásti obou podob webu, jak informační tak
i té aplikační. Klientské skriptování(JavaScript, JScript) nabízí možnosti
jak zpříjemnit a usnadnit uživateli práci s formuláři. Pomocí šikovného klientského
skriptu můžeme zkontrolovat vyplněná formulářová data před jejich odesláním,
můžeme dosadit předvybraná data nebo provázat závislé rozbalovací nabídky.

Tento článek je prvním ze série článků o práci s formuláři. Cílem celého seriálu 
 je přiblížit práci s formuláři pomocí klienstkého skriptování především pro nováčky. 
 Jdeme na to.

Základní struktura formulářů

Všechny formuláře jsou pro dokument združeny v poli forms, které
bývá označováno za kolekci forms. Indexem tohoto pole(od nuly) je 
vždy název formuláře prezentovaný obsahem atributu name daného elementu form. Vše bude
lépe vidět na následujícím příkladu.

V tomto případě obsahuje pole forms dva formuláře. Výběr formuláře,
se kterým chceme v klientském skriptu pracovat, lze realizovat přes forms
třemi způsoby.

Výběr formuláře

• document.forms["jméno formuláře"]
• document.forms[pořadový index]
• document.jméno_formuláře

V našem příkladě bychom první formulář vybrali

• document.forms["foo"]
• document.forms[0]
• document.foo

Čemu se vyhnout

Občas můžeme najít další dva způsoby, které zavedl jako vlastní rozšíření
prohlížeč Internet Explorer. První způsob využívá pole all
např. document.all.foo nebo document.all["foo"].
V současnosti neni potřeba využívat all

Druhý způsob vychází z toho, že Internet Explorer umožňuje zápis indexu pole
s kulatými závorkami. Můžeme se tak setkat s kódem document.forms("foo"),
který bude si funkční v Internet Exploreru, ale v Mozille nám přidělá
spoustu práce při dohledávání chyby.

Vřele doporučuji se oběma konstrukcím vyhnout. Předcházet chybám v kompatibilitě
klientských skriptů při psaní kódu je mnohem levnější, než jejich dohledávání a
opravy v běžném provozu.

Formulářové prvky

Každý formulář je tvořen skupinou formulářových prvků(button, checkbox, fileupload,
hidden, password, radio, reset, select, submit, text, textarea), která je združena
v poli elements. Pole je opět indexováno hodnotou atributu name daného
fornulářového prvku.

Výběr formulářového prvku

Výběr konkrétního formulářového prvku je analogický k výběru formuláře
s tím rozdílem, že pracujeme s polem elements. Existují opět tři
způsoby jak vybrat konkrétní prvek.

• document.forms["jméno formuláře"].elements["jméno prvku"]
• document.forms[pořadový index].elements[pořadový index]
• document.jméno_formuláře.jméno_prvku

Pro výběr formuláře a konkrétního fomulářového prvku můžete využít kombinací 
 předešlých způsobů. Formulář můžeme vybrat indexem a formulářový prvek jménem 
 document.forms[pořadový index].elements["jméno prvku"]. Způsoby, 
 kterým bychom se měli vyhnout jsou stejné jako 
 v případě formulářů.

Procházení formulářových prvků

Součástí mnoha řešení je průchod skupinou formulářových prvků například za 
 účelem jejich kontroly. Průchod si demonstrujeme na předešlém příkladě 
 resp. fomuláři

elm = document.forms["regudaje"]. elements;
    for(foo = 0; foo < elm.length;foo++){
      elm[foo];//konkrétní element
    }

Formulářové prvky se stejným jménem

Někdy máme takovou strukturu formuláře, že jsou jména formulářových prvků stejná. 
 Klasickým případem je výběr realizovaný pomocí radio prvku, jako v následujícím
 příkladu.

Muž:
 Žena:

Pokud budeme prvky vybírat pomocí jejich indexu bude vše odpovídat předchozímu chování, 
 které jsem si popsali. Na indexu 0 bude první radio a na indexu 1 bude druhé radio. 
 Pokud se rozhodneme pro změnu výběru formulářových prvků a zvolíme indexaci jménem, 
 pak musíme počítat s tím, že prvky se stejným jménem(shoda hodnoty atributu name) budou
 dále indexovány číslem v rámci jména viz. následující příklad

/*
     * elm1 indexem
     * elm2 jmenem 
     */ 
    elm1 = document.forms["regudaje"].elements[0];
    elm2 = document.forms["regudaje"].elements["pohlavi"];
    alert(elm1 == elm2);// false - neukazuje na stejný prvek
    
    elm2 = document.forms["regudaje"].elements["pohlavi"][0];
    alert(elm1 == elm2);// true - ukazuje jiz na stejný prvek

Stejně pojmenované formulářové prvky mohou občas způsobovat problémy, pokud si 
 neuvědomíme, že jsou indexovány ještě v  rámci jména. Tímto bych první opakování 
 z formulářů zakončil, příště si ukážeme práci s atributy formuláře, přenos 
 formulářových dat mezi okny a další užitečné rady při práci s formuláři.