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.

 

Základy, objekty Příklady