Automatické přepočítávání cen ve formuláři

Nemusíme být zrovna vlastníky internetového obchodu k tomu, abychom přes naše internetové stránky prodali nějaké zboží. Mnohdy nám stačí jednoduchý objednávkový formulář s výpisem sortimentu a políčky „Objednávám ks“ u každého druhu zboží. Protože patří k dobrému vychování sdělit zákazníkovi, kolik peněz tak u nás vlastně utrácí, ukážeme si v tomto článku skript, který v objednávkovém formuláři vysčítává celkovou peněžní hodnotu objednávky. Skript je to opravdu jednoduchý, určený spíše pro začátečníky.

Zde je ukázka. Do políčka „Celková cena“ ve spodním modrém řádku tabulky se sčítá celková hodnota (k přepočtu dojde po každém přechodu mezi políčky formuláře):

Nyní ke způsobu, jakým je sčítání zabezpečeno. Základem je vhodně napsaný HTML kód formuláře – nebudeme si jej zde pro jeho délku uvádět celý, ale pouze jeho nejdůležitější části.

Každý řádek formuláře – jinými slovy druh zboží – je v HTML formuláři reprezentován dvěma formulářovými poli. První z nich vidíte na obrazovce – jedná se o políčko s počtem objednaných kusů. Protože pro každý druh zboží potřebujeme jedinečné pojmenování tohoto pole, využijeme nejjednodušší způsob a políčka pojmenujeme ks1, ks2 a tak dál až třeba ks55. Zde je HTML kód pro formulářové pole v prvním řádku tabulky, tedy pole ks1:

Vidíme, že při události onBlur, tedy při opuštění políčka, je volána JavaScriptová fukce Recount – to je právě hlavní funkce příkladu, která zabezpečuje výpočet celkové ceny. Než se k ní dostaneme, musíme se zmínit ještě o druhém formulářovém políčku, svázaném s každým řádkem tabulky. Tentokrát se jedná o pole skryté (využíváme atributu hidden), s názvem tvaru cena1, cena2 atd., které, jak už název napovídá, obsahuje cenu příslušného zboží. Ukážeme si opět kód pro první řádek tabulky z našeho příkladu:

Proč to děláme tak (pomocí dvojice formulářových polí) a ne jinak? Inu, důvody jsou dva. Prvním je značná pohodlnost získávání takto uložených hodnot v obslužném skriptu, tedy funkci Recount (nevyužíváme žádné neobvyklé způsoby získávání ceny např. z HTML kódu tabulky, ale pracujeme s – ve velkých uvozovkách – „čistým“ JavaScriptem), druhý důvod je pak výhodný při vyřizování objednávky: v praxi nejčastější metodou odeslání objednávky bude, že obsah celého formuláře odešleme nějakým skriptem nebo komponentou na naši e-mailovou adresu. Tyto komponenty většinou odešlou všechna pole, co ve formuláři najdou, a to včetně skrytých polí, v našem případě s názvy cena1 až cenaXX. Protože ceny se časem mění, je mnohdy výhodné mít v každé takto došlé objednávce archivováno nejen, kolik kusů si zákazník objednal, ale i kolik tehdy objednané zboží stálo.

V našem příkladu nám zbývá nejdůležitější práce: napsat samotnou počítací funkci Recount. Zde je její kód, který umístíme nejlépe v hlavičce stránky:

Funkce prochází vzestupně všechna pole formuláře s názvem ve tvaru ks1 až ksXX (můžeme tedy bez zásahu do funkce Recount přidávat nebo ubírat položky zboží). Ve chvíli, kdy funkce nenajde další pole s názvem v uvedeném tvaru, funkce končí. Ke každému nalezenému poli je hledáno pole s cenou ve tvaru cena1 atp.; pole s počtem kusů je kontrolováno na správné zadání celočíselné hodnoty (skript má tedy i tuto kontrolní funkci), ceny se násobí s počty kusů a vše je sčítáno do proměnné celkcena. Na závěr funkce je hodnota této proměnné přepsána do formulářového pole s názvem celkem.

Co říci závěrem? Uvedeme si ještě kód formulářového pole celkem, do nějž je vypisována celková hodnota objednávky. Všimněte si, že při opuštění tohoto políčka je rovněž volána funkce Recount – je to proto, abychom zabránili vychytralému návštěvníkovi změnit spočtenou cenu objednávky (stejného výsledku bychom ale docílili i prostým zablokováním tohoto políčka, např. pomocí inline stylu):

Uvedená technika samozřejmě není omezena jen na jednoduché formuláře, naopak – velmi vhodné je její spojení s ASP či PHP skripty, které nám diskutované dvojice polí cena a ks přičinlivě vygenerují – to je ale už nad rámec tohoto článku.

Přeji vám příjemný den.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.