čtvrtek 13. května 2004

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.


<form name="foo" action="foo.do">
<input type="submit" value="ok" />
</form>
<form name="hoo" action="hoo.do">
<input type="submit" value="ok" />
</form>

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.


<form name="regudaje" action="foo.do">
<input type="text" name="jmeno" />
<input type="text" name="prijmeni" />
<input type="submit" value="Registrovat" />
</form>

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


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

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.


<form name="regudaje" action="foo.do">
 Muž:<input type="radio" name="pohlavi" value="0"/>
 Žena:<input type="radio" name="pohlavi" value="1"/>
<input type="submit" value="Registrovat" />
</form>

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


  <script type="text/javascript">
    /*
     * 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
  </script>

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.