JavaScript – odeslání formuláře

Vážení čtenáři, vítám vás v sedmém díle seriálu o JavaScriptu. V tomto díle se budu věnovat tomu, jak odeslat formulář pomocí JavaScriptu. Protože jsem ale zjistil, že v otázce odesílání formulářů panuje dost velký zmatek,tento díl vše vysvětluje velice detailně od podlahy.

Pokud použijeme ve svých stránkách formuláře s různými editačními prvky, můžeme potom údaje, které čtenář zadal, zpracovávat rozličnými cestami. V minulých dílech jsem uváděl různé příklady zpracování formuláře pomocí JavaScriptu. Všechny příklady v minulých dílech však měly jedno společné. A to fakt, že údaje, které čtenář do formuláře zadal, se nikam neodesílaly, ale zpracovaly se rovnou namístě pomocí JavaScriptu. Ale pro mnoho účelů je naopak potřeba zadané údaje někam poslat. A této akci se říká odesílání formuláře.

Tedy, jednoduše řečeno, odesílání formuláře znamená odesílání údajů uvnitř formuláře. Pro lepší pochopení zopakuji, formulář je z hlediska HTML stránky všechno, co je mezi značkami <form> a </form>. Těchto formulářů může být v jedné HTML stránce klidně několik, potom se každý z nich chová samostatně a nezávisle na ostatních.

Asi nejlépe bude začít přímo příkladem HTML stránky s běžným formulářem (tento příklad odešle údaje z formuláře na e-mailovou adresu):

A takto to dopadne (po kliknutí na tlačítko Odeslat formulář by mělo být to, co zadáte do formuláře odmailováno na nesmyslnou e-mailovou adresu):

Jak vidíte, formuláři z příkladu chybí ještě učesání k lepšímu vzhledu, například pomocí tabulky. Učesání jsem ale neprovedl, abych příklad obsahoval pouze to podstatné. Takže se vrhněme na vysvětlení funkce.

Jak vidíte z příkladu, značka <form> může být doplněna různými atributy, kterými se přidávají další dodatečné údaje. V minulých dílech jsem používal pouze jeden z nich, a to atribut name, který umožňuje formulář pojmenovat, což je důležité pro to, abychom ho mohli ovládat pomocí JavaScriptu. Náš formulář z příkladu má tedy jménu form1.

Dalším atributem je action, jehož samotné jméno naznačuje, že začínáme bojovou akci. A skutečně, u atributu action se rozhoduje, komu naše důvěrná data z formuláře předáme. Za atribut action se tedy píše adresa toho, kdo přijme údaje z formuláře. Teď je potřeba vysvětlit, kdo může přijmout údaje. V zásadě to může být především libovolný program komunikující přes takzvané CGI rozhraní, které bylo navrženo právě pro účely zpracovávání dat z formulářů. Pokud byste chtěli takový CGI program napsat, vrháte se do oblasti internetového programování, které je velice zajímavé, ale bohužel mimo rámec tohoto seriálu. Tak jenom výčet typických nástrojů pro tvorbu CGI: ASP skripty, PHP skripty, jazyk Perl, jazyk C, atd. Bohužel JavaScript vám psát CGI neumožňuje. Závěr je ten, že pomocí JavaScriptu se můžete účastnit odesílání JavaScriptu do CGI programu, ale nemůžete být příjemcem těchto dat. Můžete ale využívat dostupné CGI programy umístěné na internetu jako příjemce dat.

Jako příjemce dat může být i mailovací program. Toho jsem využil ve svém příkladě, a odeslal jsem data na svou e-mailovou adresu. Potom musí být jako adresa příjemce uvedeno mailto: plus e-mailová adresa. Toho můžete ve svých stránkách využít. Problém je ale ten, že vy neodesíláte data přímo na e-mailovou adresu, ale do mailovacího programu. Tedy po kliknutí na tlačítko odeslat se nejdříve spustí mailovací program (podle toho, který máte nainstalovaný), tomu se předají data z formuláře. Vlastní odeslání mailu už provede mailovací program. Pokud tedy nemáte žádný program na mailování nainstalován, tak se prostě nic neodešle.

Dalším atributem je atribut method, který slouží k určení, jakým způsobem se mají data odeslat. Lze říci, že možné metody jsou dvě, a to get a post. Pokud budete posílat data nějakému CGI programu, zeptejte se autora, jakou metodu tam máte napsat. Velké spoustě CGI programů je to jedno (například všem PHP skriptům), takže můžete použít jak get, tak i post. Nemusí to ale být vždycky, takže je lépe se informovat. Pokud už si můžete vybrat, tak metoda post je o něco bezpečnější, nabízí možnost přenášet velké objemy dat. Metoda get je zase efektivnější, pokud přenášíte jenom velice málo dat. A pokud si nejste jisti, doporučuji vám metodu post.

A nyní se vrhněme na to, jak spusti akci odeslání dat. Můj příklad vlastně nepoužívá JavaScript, a odesílání se provádí pomocí značky <input> se zadaným typem submit. Pokud použijete typ submit, zobrazí se tlačítko a po stisknutí tlačítka se formulář odešle. Bohužel, ačkoli je to jednoduché řešení, pro pěkný webdesign je to mnohdy velice málo. Vlastně samotné HTML vám nedává na výběr, prostě vám tam bouchne šedivé tlačítko s textovým nápisem, a víc chtít nemůžete. Pokud chcete dosáhnout lepšího vzhledu, třeba mít obrázkové tlačítko, musíte použít JavaScript.

Takže jak odesílat formuláře pomocí JavaScriptu? Velice jednoduše, použijeme příkaz submit() na příslušný formulář. V našem příkladě je to jednoduché, zápis self.document.forms.form1.submit() odešle formulář. Tento zápis byste už po přečtení minulých dílů měli být schopni rozkódovat. Instance self ovládá okno prohlížeče, self.document vám dává možnost ovládat to, co je zapsáno v HTML stránce zobrazené v okně prohlížeče. Dále následuje forms, který ovládá všechny formuláře. Přes něj se dostáváme na náš formulář, který se jmenuje form1, a konečně na formuláři form1 provede příkaz submit() k odeslání formuláře. Celý příklad by mohl vypadat třeba takto:

A takto by příklad vypadal (po kliknutí na obrázek dopisu se formulář odešle):

Jméno:
Příjmení:
E-mail:

Takže to je pro tento díl vše.

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

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