Náhled odesílaného formuláře pomocí JavaScriptu
Několikrát jsem na internetu zahlédl formulář, který se vyplňoval pomocí prvků input (jméno, email) a skutečná podoba odesílaného textu se zobrazovala v připraveném textarea. Nedávno jsem potřeboval vytvořit stránku pro on-line objednávky vstupenek do divadla a použil jsem stejný způsob.
Nejprve se zde podívejte jak to vypadá. Skript je funkční v Internet Exploreru a také v Netscape.
Jelikož tlačítko submit odesílá obsah všech prvků (neplatí v případě odesílání pomocí ASP či PHP), je třeba vytvořit formuláře dva. Jeden, který bude obsahovat vstupní hodnoty a druhý, ve kterém bude samotný náhled, který se později odešle.
Pro zjednodušení neuvádím umístnění formuláře do tabulky.
|
V prvním formuláři jsou tedy tři vstupní prvky input (jméno, e-mail a adresa), které na událost onKeyUp spouští funkci Update() (viz. níže), jedno pole select pro výběr představení a tlačítko "Přidat", které spouští funkci pridej() (viz. níže) pro aktuální formulář.
Druhý formulář je jednodušší. Je v něm pouze textové pole textarea a tlačítka pro odeslání a smazání objednávky. Tlačítko odeslání funguje klasickým způsobem (mailto); tlačítko smazání volá další funkci smazObjednavku() (viz. níže).
|
OnKeyUp je událost, která reprezentuje každý stisk klávesy (popis této události už byl na Intervalu uveden). Tedy pokaždé, když do některého z prvků zadáte nějaký znak, spustí se následující funkce:
|
Na začátku jsou definovány globální proměnné – data (pro uložení osobních údajů), popr (počet objednaných představení) a predstaveni (aktuálně vybraná představení). Funkce má dva parametry – názvy (id) zdrojového a cílového formuláře a plní proměnnou data obsahem vstupních prvků input. Po každém prvku je vložen znak odřádkování (\n). V této proměnné bude také slovo Objednávka: (jako nadpis pro pozdější výpis představení). Posledním příkazem funkce vypíše do prvku mail cílového formuláře proměnnou data (s osobními údaji) a proměnnou predstaveni, které budeme přiřazovat hodnotu další funkcí.
|
Tato funkce zkontroluje, zdali je v select vybráno představení, inkrementuje proměnnou popr a do proměnné predstaveni vloží číslo (popr), představení vybrané v select a znak odřádkování. Pak nastaví select opět na nevbrano a zavolá funkci Update, která představení vypíše do náhledu.
Poslední funkce je třeba pro smazání vybraných představení. Proměnné popr a predstaveni nastaví na výchozí hodnotu a vyprázdní náhled. Do něj ale hned vepíše proměnnou data (osobní údaje) a prázdnou proměnnou predstavení:
|
Jak vidíte je to velice jednoduché a poměrně elegantní řešení problému s objednávkovým formulářem. Skript dále vylepšit třeba počítáním ceny, ukládáním informací do cookies atd.
Nashledanou příště.
Starší komentáře ke článku
Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.
Mohlo by vás také zajímat
-
Responzivní design: Proč by ho neměl ignorovat žádný vývojář?
27. listopadu 2023
Nejnovější
-
Jak se chránit před podvody na internetu – část 2
14. října 2024 -
Doména .io v ohrožení: Co přinese předání Čagoských ostrovů?
10. října 2024 -
Jak se chránit před podvody na internetu – část 1
8. října 2024