site logo

Odeslání formuláře

Po zkontrolování validity formuláře můžeme provést další akce spojené s odesláním formuláře. Popíšeme jak zabránit vícenásobnému odeslání formuláře, jak zabránit odeslání formuláře pomocí klávesy Enter, jak přesměrovat formulář na jiný serverový skript, jak odeslat formulář JavaScriptem a použití více odesílacích tlačítek.

Ovládání formuláře závisí se zapnutém JavaScriptu v browseru. Vypnutý JavaScript znemožní kontrolu nad formulářem a některé metody jsou použitelné jen na intranetu, kde máme jistotu, že skriptování je zapnuto. Webové aplikace bez JavaScriptu sice nefungují, ale nic neohrožují. Formulář bez JavaScriptu je přece jen poněkud riziko pro databázi.

Vícenásobné odeslání formuláře

Dvojklik na odesílací tlačitko, nebo také opakované kliknutí z nedočkavosti způsobí vícenásobné odeslání formuláře. Když formulář zakládá nový záznam v databázi, výsledkem jsou dva stejné nové záznamy.

Tomu musíme předejít blokováním v JavaScriptu buď pomocnou proměnnou send, nebo disablováním odesílacího tlačítka. Blokování musí být až na konci validačního skriptu, až po kladném ověření všech prvků formuláře.

Je potřeba si uvědomit, že prvky formuláře se stavem disabled nejsou odeslány na server ke zpracování. Problémy mohou nastat ve formuláři s více odesílacími tlačítky, kdy na serveru potřebujeme rozlišit kterým tlačítkem byl formulář odeslán.


<script type="text/javascript">
var send=1;                  // priznak odeslani formulare
function checkForm(myForm) { // funkce validace formulare
  if(send==0) return false;  // jiz bylo odeslano
  ...                        // kód validace formuláře
  send = 0;                  // zablokuje dalsi odesilani
  document.getElementById("subm").disabled = true;
  ...                        // přesměrování formuláře
  return true;
}
</script>

Klávesa Enter a odeslání formuláře

Starší specifikace doporučovala možnost použití klávesy Enter pro jednoduchý formulář s jedním textovým polem, jaký je používán na vyhledávacích formulářích. Taková možnost je jistě vítána. V současné době je možné použít klávesu Enter k odeslání formuláře prakticky ve všech formulářích. Rozlišíme si dva způsoby použití klávesy Enter.

  1. pomocí klávesy TAB traverzujete přes prvky formuláře až dojedete na odesílací tlačítko, to má nyní fokus (je aktivní), pak zmáčnutí klávesy Enter správně a podle předpokladů vyvolá odeslání formuláře.
  2. vyplňujete některé textové pole a uprostřed vyplňování formuláře zmáčknete omylem klávesu Enter, pak odeslání formuláře je nepatřičné a nečekané. Většinou takovou situaci zachrání validační skript, ale jen když je JavaScript zapnutý.

Zabránit odesílání formuláře klávesou Enter je možné jen pomocí JavaScriptu. Snad nejčastěji je citované vypnutí klávesy Enter ve formuláři. Funguje spolehlivě, ale opět jen když je zapnuto skriptování.

Když je vynechán odesílací prvek formuláře (bez ohledu na to zda je zapnut JavaScript) IE a FireFox formulář neodešle ani klávesou Enter. Opera a Safari bohužel ano. Takovou situaci bychom mohli teoreticky využít. Přidáním odesílacího tlačítka button type="button", který nezpůsobí přímo odeslání formuláře, ale spustí validační skript a ten po úspěšné validaci formulář odešle. Takový formulář lze odeslat jen když je zapnuto skriptování a aktivováno odesílací tlačítko, bohužel jen v IE a FF.

Někdy chceme odeslat formulář pomocí JavaScriptu, nebo změnit některé atributy formuláře. Následující ukázka kódu nejdříve získá referenci na formulář, následně změní cílový serverový skript a pak provede odeslání formuláře. Tyto příkazy mohou být součástí validačního skriptu, který je spouštěn např. událostí onclick, nikoli onsubmit.  V případě odeslání formuláře skriptem, událost onsubmit již není aktivována.


var myForm = document.forms[0];
myForm.action = "script3.asp";
myForm.submit();

Více odeslílacích tlačítek

Při editování záznamů z databáze často potřebujeme možnost výběru z několika možných akcí. Typicky jsou to akce ukončit editování, uložit změny a smazat záznam. V takovém případě musí serverový skript dostat informaci o tom kterým tlačítkem byl formulář odeslán aby mohl provést odpovídající akci.

Při použití více tlačítek <input type="submit" ... />  všechny tlačítka mohou mít stejné jméno name, ale musí mít různou hodnotu value. Serever dostane informaci o tlačítku standardním způsobem name=value.

Při použití více tlačítek <input type="image" ... />  musí každé tlačítko mít unikátní jméno name. To je proto, že se odesílá jméno tlačítka a souřadnice kliknutí. Atribut value má význam jen ve FireFoxu a Safari, kde je odeslán navíc i standardní formulářový řetězec name=value.

Serverový skript

Kromě základního úkolu práce s databází a generování HTML kódu by měl serverový skript provést některé další činnosti.

Důležitá část návrhu aplikace je tok stránek, tedy co bude zobrazeno po odeslání formuláře. Například po odeslání formuláře nového požadavku v aplikaci Údržba je uživatel přesměrován na domovskou stránku této aplikace, kde v seznamu požadavků uvidí svůj požadavek na prvním řádku. Takto získá zpětnou vazbu že jeho požadavek byl úspěšně zpracován.

Jindy je potřeba zadávat celou řadu záznamů. Tak je to například v aplikaci Prostoje. Po odeslání formuláře prostoje, aplikace vrátí stejný (prázdný) formulář pro vkládání dalších dat. V takovém případě zpětná vazba o úspěšném zpracování formuláře chybí. Proto byla vložena pomocná stránka s oznámením o úspěšném záznamu. Teprve po 2 vteřinách je uživatel automaticky přesměrován na prázdný formulář.

Programátor přemýšlí jinak. Když chybí chybová hláška je to zpětná vazba, že záznam byl úspěšný. Uživatel potřebuje mít svoji jistotu, že dělá všechno správně. Malé umělé zpomalení skriptu zvýší důvěru v aplikaci.

updated 09.12.2007