Náhled odesílaného formuláře pomocí JavaScriptu

6. srpna 2001

•

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.

<form name="regForm">
Jméno a příjmení: <input onKeyUp=’Update(this.form,nahled)‘ type="text" name="jmeno" size="40" maxlength="50">
E-mail: <input onKeyUp=’Update(this.form,nahled)‘ type="text" name="email" size="40" maxlength="50">
Adresa: <input onKeyUp=’Update(this.form,nahled)‘ type="text" name="adresa" size="40" maxlength="50">
Představení: <select name="predst">
<option value="nevybrano" selected></option>
<option value="Potopa světa,13.10. 2000,16.00">Potopa světa,13.10. 2000,16.00</option>
<option value="Strakonický dudák,14.10. 2000,16.00">Strakonický dudák,14.10. 2000,16.00</option>
<option value="Limonádový Joe,15.10 2000,16.00">Limonádový Joe,15.10 2000,16.00</option>
</select>
<input type="button" name="pridat" value="Přidat" onClick=’pridej(this.form)‘>
</form>

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).

<form name="nahled">
<b>Náhled objednávky :</b>
<textarea name="mail" cols="50" rows="20"></textarea>
<input type="submit" value="Pošli objednávku" action="mailto://xhpohanka@fbi.cz">
<input type="button" value="Smaž objednávku" onclick="smazObjednavku(this.form);">
</form>

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:

var data;
var popr = 0;
var predstaveni = "";
function Update(form,toform){
data+="Jméno: "+form.jmeno.value +"\n"; //prida obsah inputu jmeno
data+="e-mail: "+form.email.value+"\n";//prida obsah inputu email
data+="Adresa: "+form.adresa.value+"\n";//prida obsah inputu adresa
data+= "\nObjednávka: \n";//prida nadpis nad objednavky
toform.mail.value= data + predstaveni; //vypise promenne do textarea v cilovem formulari
}

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í.

function pridej(form){
if (form.predst.value != "nevybrano") { //pokud neni vybrano predstaveni nestane se nic
popr++;
predstaveni += popr + ": " + form.predst.value + "\n" ;
}
form.predst.value = "nevybrano"; //vraci vyber predstaveni zpet na nevybrano
Update(form);
}

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í:

function smazObjednavku(form){
popr = 0;
predstaveni = ""; //smaze obsah promennych
form.mail.value= "";
form.mail.value= data + predstaveni; //a jimi vyplni nahled
}

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ě.