Zrušení odesílání formuláře
javascriptem
Nejjednodušší příklad - Někdy odeslat, někdy ne - Kontrola dat - Celý funkční příklad
Serverové skripty přijímají data z formulářů. Velký objem vstupních dat bývá nějakým způsobem chybný. Chybu může odhalit až server, ale v tom případě se zbytečně přenášejí data a čeká se na chybovou stránku. Lepší je odchytávat chyby už na klientovi a špatně vyplněný formulář prostě nenechat odeslat.
Pokud si chcete prostudovat hotový příklad, je na konci. Tento text vykládá teorii krok za krokem.
Nejjednodušší příklad
<form action="nejaky_serverovy_skript"
onsubmit="return false">
<input type="submit" value="odeslat">
</form>
Takhle to vypadá v dokumentu:
Formulář nejde odeslat, protože je před odesláním odesílání zrušeno.
Každý formulář při odesílání vyvolá událost onsubmit. Ta se provede ještě před tím, než se data odešlou na server (aneb než se provede action).
Událost onsubmit může:
- být navázána na skript, např. onsubmit="alert('odesílám data')" (to je jenom taková blbůstka)
- nebo na funkci např. onsubmit="udelejNeco()", kde udelejNeco() je normální předem deklarovaná javascriptová funkce,
- může také dostat návratovou hodnotu, např. onsubmit="return false" nebo onsubmit="return true", tím se odesílání může zrušit
- a může se to kombinovat, to popíšu níže
Někdy zrušit, někdy ne
Výše uvedený příklad, ve kterém je onsubmit="return false", je k ničemu, protože se to neodešle nikdy. Je potřeba umět to nějak rozlišit. Dejme tomu, ze v proměnné vseVPoradku budu mít uloženu informaci o tom, jestli se to má odeslat nebo ne (zatím je jedno jak ji získám) a bude dosahovat hodnot true a false. Symbolicky se to dá zapsat:
<form ... onsubmit="return vseVPoradku">
To ale není nejčastější situace. Nejčastěji totiž informace není uložená v proměnné, ale je to funkce. Nazvu ji kontrolaDat(). Nejjednodušší deklarace funkce kontrolaDat():
function kontrolaDat(){
if (podminka)
return true else return
false
}
K formulaci podmínky se ještě vrátím. Důležité je všimnout si, že funkce má návratové hodnoty (return něco). Jinak řečeno funkce plive pravdu nebo nepravdu. Zrušení formuláře se potom provede provázáním:
<form onsubmit="return kontrolaDat()">
Kontrola dat
V dalším výkladu budu pracovat s tímto příkladem formuláře, kontrolovat se bude email:
<form action="nejaky_serverovy_skript" onsubmit="return kontrolaDat()">
Zadejte email: <input type="text" name="email"
value="">
<input type="submit" value="odeslat">
</form>
Všimněte si prosím, že pole s emailem má identifikaci name="email" a je prázdné (to je ta value=""). Oboje se použije ve skriptu. Takhle to vypadá:
Teď jde jen o to napsat správně funkci kontrolaDat().
Identifikace hodnoty
Aby se data mohla zkontrolovat, je potřeba je napřed nějak poznat, zpřístupnit. Jsou dva způsoby:
- přes objekt document
- přes objekt this
Pokud není jasné, na základě jakých dat se bude rozlišovat o odeslání nebo neodeslání, je potřeba použít objekt document. V něm identifikovat formulář a jeho pole. Píšu o tom v kapitole o adresování prvků dokumentu.
To je v tomto případě asi zbytečně komplikované. Jestli se formulář odešle nebo ne, závisí zpravidla na datech zadaných do toho formuláře. Takže si lze v praxi vystačit s objektem this. To je ten objekt, který vyvolal událost. V případě události onsubmit je this formulář. Když se zapíše
<form onsubmit="kontrolaDat(this)">...
ví javascript, že funkce kontrolaDat dostala v hodnotě parametru vstup celý formulář. Z toho si funkce další věci už vysosá.
Konstrukce funkce
Budu kontrolovat zatím pouze to, zda se v zadaném emailu vyskytuje zavináč @.
function kontrolaDat(vstup){
zadanaHodnota = vstup.email.value;
// načtena hodnota (value) z políčka s name=email
if( zadanaHodnota.indexOf("@")
== -1)
// zavináč se nevyskytuje
return false
else return true;
}
Napřed jsem si do proměnné zadanaHodnota vytáhnul hodnotu (value) zadanou do pole email (name=email) daného formuláře. Tam je to, co před odesláním zadal uživatel jako svůj email.
Potom jsem pomocí metody idexOf() zjistil, jakou pozici má v řetězci zadanaHodnota znak zavináče (indexOf("@")). Pokud tam zavináč vůbec není, indexOf() vrací mínus jedničku (ne nulu, to by znamenalo, že @ je na začátku, počítá se to samozřejmě od nuly).
Pokud tedy vyšlo, že pozice zavináče je mínus první, zavináč tam není, není to správný email a funkce plive false (nepravdu). V opačném případě (else) plive pro pořádek true (pravdu). Celá podmínka za if ( by se mohla napsat mnohem složitěji ), ale to už není třeba rozvádět zde.
Celý funkční příklad
Takhle by to mohlo fungovat. Související věci jsou vyznačeny stejnou barvou.
<script>
function kontrolaDat(vstup){
zadanaHodnota = vstup.email.value;
// načtena hodnota (value) z políčka s name=email
if( zadanaHodnota.indexOf("@") == -1)
// zavináč se nevyskytuje
{alert("neni zavináč"); return
false;}
else return true;
}
</script>
<form action="nejaky_serverovy_skript"
onsubmit="return kontrolaDat(this)">
Zadejte
email: <input type="text" name="email"
value="">
<input type="submit" value="odeslat">
</form>
Račte vyzkoušet:
Poznámka o metodě submit()
V javascriptu má formulář (objekt form) metodu submit(), která dovoluje odeslání formuláře bez toho, aby uživatel stisknul potvrzovací tlačítko. Pozor, v takovém případě neproběhne událost onSubmit.
Reklama
