Programování

Pomocí JavaScriptu a formulářů

Javascript nosí mnoho klobouků. K vytváření speciálních efektů můžete použít JavaScript. Můžete použít JavaScript, aby vaše stránky HTML byly „chytřejší“ využíváním jejich rozhodovacích schopností. A můžete použít JavaScript k vylepšení formulářů HTML. Tato poslední aplikace má zvláštní význam. Ze všech klobouků, které JavaScript může nosit, patří jeho funkce zpracování formulářů mezi nejvyhledávanější a nejpoužívanější.

V srdci webového vydavatele nezasáhne nic většího strachu než tato tři písmena: C-G-I. CGI (zkratka pro common gateway interface) je mechanismus pro bezpečný přenos dat z klienta (prohlížeče) na server. Obvykle se používá k přenosu dat z formuláře HTML na server.

Díky JavaScriptu na své straně můžete zpracovávat jednoduché formuláře bez vyvolání serveru. A když je nutné odeslat formulář do programu CGI, můžete nechat JavaScript postarat se o všechny předběžné požadavky, jako je ověřování vstupu, aby bylo zajištěno, že uživatel tečkou každé i. V tomto sloupci se podrobně podíváme na spojení formuláře a JavaScriptu, včetně toho, jak používat objekt formuláře JavaScriptu, jak číst a nastavovat obsah formuláře a jak spouštět události JavaScriptu manipulací s ovládacími prvky formuláře. Rovněž se budeme zabývat tím, jak pomocí JavaScriptu ověřit vstup formuláře a summit formuláře do programu CGI.

Učení JavaScriptu

Tento článek je součástí archivu technického obsahu JavaWorld. O programování v JavaScriptu se můžete dozvědět mnoho článků v článku Řada JavaScriptMějte na paměti, že některé informace budou pravděpodobně zastaralé. Další informace o programování pomocí JavaScriptu najdete v částech „Použití vestavěných objektů JavaScriptu“ a „Ladění programů JavaScript“.

Vytváření formuláře

Existuje několik rozdílů mezi přímým formulářem HTML a formulářem vylepšeným JavaScriptem. Hlavní je, že formulář JavaScriptu spoléhá na jednu nebo více obslužných rutin událostí, například onClick nebo onSubmit. Tito vyvolají akci JavaScriptu, když uživatel provede něco ve formuláři, například klikne na tlačítko. Obslužné rutiny událostí, které jsou umístěny se zbytkem atributů ve značkách formuláře HTML, jsou neviditelné pro prohlížeč, který nepodporuje JavaScript. Z tohoto důvodu můžete často použít jeden formulář pro prohlížeče JavaScript i jiné než JavaScript.

Typické ovládací prvky formulářů - nazývané také „widgety“ - zahrnují následující:

  • Textové pole pro zadání řádku textu
  • Tlačítko pro výběr akce
  • Přepínače pro jeden výběr ze skupiny možností
  • Zaškrtávací políčka pro výběr nebo zrušení výběru jedné nezávislé možnosti

Nebudu se obtěžovat výčtem všech atributů těchto ovládacích prvků (widgetů) a tím, jak je používat v HTML. Podrobnosti vám poskytne většina odkazů na HTML. Pro použití s ​​JavaScriptem byste měli vždy pamatovat na zadání názvu samotného formuláře a každého použitého ovládacího prvku. Názvy vám umožňují odkazovat na objekt na stránce vylepšené JavaScriptem.

Typická forma vypadá takto. Všimněte si, že jsem zadal atributy NAME = pro všechny ovládací prvky formuláře, včetně samotného formuláře:

 Zadejte něco do pole:

  • FORMÁLNÍ JMÉNO = "myform" definuje a pojmenuje formulář. Jinde v JavaScriptu můžete odkazovat na tento formulář jménem myform. Jméno, které zadáte do formuláře, je jen na vás, ale mělo by vyhovovat standardním pravidlům pojmenování proměnných / funkcí JavaScriptu (bez mezer, zvláštních znaků kromě podtržítka atd.).
  • AKCE = "" definuje, jak chcete, aby prohlížeč zpracoval formulář, když je odeslán do programu CGI spuštěného na serveru. Vzhledem k tomu, že tento příklad není navržen tak, aby odesílal cokoli, je URL pro program CGI vynechána.
  • METHOD = "ZÍSKAT" definuje, že data metody jsou předána serveru při odeslání formuláře. V tomto případě je Atttibute Puffer, protože vzorový formulář nic nezasílá.
  • INPUT TYPE = "text" definuje objekt textového pole. Toto je standardní značka HTML.
  • INPUT TYPE = "tlačítko" definuje objekt tlačítka. Toto je standardní značení HTML s výjimkou obslužné rutiny onClick.
  • onClick = "testResults (this.form)" je obsluha události - zpracovává událost, v tomto případě kliknutím na tlačítko. Po kliknutí na tlačítko provede JavaScript výraz v uvozovkách. Výraz říká, že zavolá funkci testResults kdekoli na stránce a předá jí aktuální objekt formuláře.

Získání hodnoty z objektu formuláře

Pojďme experimentovat se získáváním hodnot z formulářových objektů. Načtěte stránku a do textového pole zadejte něco. Klikněte na tlačítko a to, co jste napsali, se zobrazí v poli upozornění.

Výpis 1. testform.html

  Test Vstupní funkce testResults (formulář) {var TestVar = form.inputbox.value; alert ("Zadali jste:" + TestVar); } Zadejte něco do pole:

Takto funguje skript. JavaScript volá funkci testResults, když kliknete na tlačítko ve formuláři. Funkce testResults je předána objektu formuláře pomocí syntaxe this.form (klíčové slovo this odkazuje na ovládací prvek tlačítka; formulář je vlastnost ovládacího prvku tlačítko a představuje objekt formuláře). Pojmenoval jsem objekt formuláře formulář uvnitř funkce testResult, ale můžete libovolné jméno, které se vám líbí.

Funkce testResults je jednoduchá - pouze zkopíruje obsah textového pole do proměnné s názvem TestVar. Všimněte si, jak byl odkazován na obsah textového pole. Definoval jsem objekt formuláře, který jsem chtěl použít (tzv formulář), objekt ve formuláři, který jsem chtěl (nazvaný vstupní schránka) a vlastnost tohoto objektu, který jsem chtěl (dále jen hodnota vlastnictví).

Více od JavaWorld

Chcete další programovací výukové programy a novinky? Nechte si doručit do své doručené pošty zpravodaje JavaWorld Enterprise Java.

Nastavení hodnoty v objektu formuláře

Vlastnost value vstupního pole, zobrazená ve výše uvedeném příkladu, je čitelná i zapisovatelná. To znamená, že si můžete přečíst vše, co je napsáno do pole, a můžete do něj zapisovat data zpět. Proces nastavování hodnoty ve formovém objektu je opakem jeho čtení. Tady je krátký příklad, který ukazuje nastavení hodnoty v textovém poli formuláře. Proces je podobný předchozímu příkladu, kromě toho, že tentokrát existují dvě tlačítka. Klikněte na tlačítko „Číst“ a skript přečte, co jste zadali do textového pole. Klikněte na tlačítko „Napsat“ a skript zapíše do textového pole obzvláště odpornou frázi.

Výpis 2. set_formval.html

Testovací vstupní funkce readText (formulář) {TestVar = form.inputbox.value; alert ("Zadali jste:" + TestVar); }

funkce writeText (formulář) {form.inputbox.value = "Přeji hezký den!" } Zadejte něco do pole:

  • Když kliknete na tlačítko „Číst“, JavaScript zavolá funkci readText, která přečte a zobrazí hodnotu, kterou jste zadali do textového pole.
  • Když kliknete na tlačítko „Zapsat“, zavolá JavaScript funkci writeText, která zapíše „Hezký den!“ do textového pole.

Čtení dalších hodnot objektů formuláře

Textové pole je možná nejběžnějším objektem formuláře, který čtete (nebo píšete) pomocí JavaScriptu. Můžete však použít JavaScript ke čtení a zápisu hodnot z většiny ostatních objektů (všimněte si, že JavaScript nelze aktuálně použít ke čtení nebo zápisu dat pomocí textového pole hesla). Kromě textových polí lze JavaScript použít pro:

  • Skryté textové pole (TYPE = "skryté").
  • Přepínač (TYPE = "radio")
  • Zaškrtávací políčko (TYPE = "zaškrtávací políčko")
  • Textová oblast ()
  • Seznamy ()

Používání skrytých textových polí

Z hlediska JavaScriptu se skrytá textová pole chovají stejně jako běžná textová pole a sdílejí stejné vlastnosti a metody. Z uživatelského hlediska skrytá textová pole „neexistují“, protože se ve formuláři neobjevují. Skrytá textová pole jsou spíše prostředky, kterými lze mezi serverem a klientem předávat speciální informace. Lze je také použít k uložení dočasných dat, která budete chtít použít později. Protože se skrytá textová pole používají jako standardní textová pole, nebude zde uveden samostatný příklad.

Používání rádiových tlačítek

Přepínače slouží k tomu, aby uživatel mohl vybrat jednu a pouze jednu položku ze skupiny možností. Přepínače se vždy používají v násobcích; nemá žádný logický smysl mít pouze jeden přepínač na formuláři, protože jakmile na něj kliknete, nelze jej zrušit. Pokud chcete jednoduchou volbu kliknutí / zrušení kliknutí, použijte místo toho zaškrtávací políčko (viz níže).

Chcete-li definovat přepínače pro JavaScript, poskytněte každému objektu stejný název. JavaScript vytvoří pole pomocí názvu, který jste zadali; pak odkazujete na tlačítka pomocí indexů pole. První tlačítko v řadě má číslo 0, druhé číslo 1 a tak dále. Atribut VALUE je pro formuláře pouze pro JavaScript volitelný. Pokud však odešlete formulář do programu CGI běžícího na serveru, budete chtít zadat hodnotu.

Následuje příklad testování, které tlačítko je vybráno. Smyčka for ve funkci testButton cykluje všemi tlačítky ve skupině „rad“. Když najde vybrané tlačítko, vylomí se ze smyčky a zobrazí číslo tlačítka (pamatujte: od 0).

LIsting 3. form_radio.html

  Funkce testovacího tlačítka testButton (formulář) {for (Count = 0; Count <3; Count ++) {if (form.rad [Count] .checked) break; } upozornění (je vybráno „Tlačítko“ + Počet + “); }

Nastavení výběru přepínače na trhu HTML je jednoduché. Pokud chcete, aby se formulář původně zobrazil s vybraným daným přepínačem, přidejte atribut CHECKED do značky HTML pro toto tlačítko:

Výběr tlačítka můžete také nastavit programově pomocí JavaScriptu pomocí zaškrtnuté vlastnosti. Zadejte index pole přepínacího tlačítka, které chcete zkontrolovat.

form.rad [0] .checked = true; // nastaví první tlačítko ve skupině rad

Pomocí zaškrtávacích políček

Zaškrtávací políčka jsou samostatné prvky; to znamená, že neinteragují se sousedními prvky, jako to dělají přepínače. Proto jsou o něco jednodušší. Pomocí JavaScriptu můžete otestovat, zda je zaškrtnuto políčko pomocí zaškrtnuté vlastnosti, jak je znázorněno zde. Podobně můžete nastavit zaškrtnutou vlastnost tak, aby přidala nebo odstranila zaškrtnutí ze zaškrtávacího políčka. V tomto příkladu vás výstražná zpráva informuje, zda je zaškrtnuto první políčko. Hodnota je true, pokud je políčko zaškrtnuto; false, pokud tomu tak není.

Výpis 4. form_check.html

  Zaškrtávací políčko Testovací funkce testButton (formulář) {alert (form.check1.checked); }

Zaškrtávací políčko 1

Zaškrtávací políčko 2

Zaškrtávací políčko 3

Stejně jako u objektu přepínače, přidejte atribut CHECKED do značky HTML pro toto zaškrtávací políčko, které chcete nejprve zkontrolovat při prvním načtení formuláře.

Zaškrtávací políčko 1>

Výběr tlačítka můžete také nastavit programově pomocí JavaScriptu pomocí zaškrtnuté vlastnosti. Zadejte název zaškrtávacího políčka, které chcete zaškrtnout, jako v

form.check1.checked = true;

Používání textových oblastí

Pro zadávání víceřádkového textu se používají textové oblasti. Výchozí velikost textového pole je 1 řádek o 20 znacích. Velikost můžete změnit pomocí atributů COLS a ROWS. Tady je typický příklad textové oblasti s textovým polem o šířce 40 znaků a 7 řádcích:

Ke čtení obsahu pole textové oblasti můžete použít JavaScript. To se provádí pomocí vlastnosti value. Zde je příklad: