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:

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

Zadejte email:

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:

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:

Zadejte email:

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

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB

o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

Základy, objekty Příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.