JavaScript - Formuláře

JavaScript umí pracovat s formuláři. Pomocí JavaScriptu je možné ověřovat vyplněná data, rozhodovat o odeslání formuláře atd.

Prvky formuláře

Na prvek formuláře (input, textarea atd.) je možné se odkazovat pomocí jejich pořadí v rámci formuláře (form), nebo efektivněji pomocí jejich jmen (atribut name):

<form name="form">
<input type="text" name="form2">
<input type="text" name="form3">
<a href="javascript:form();">OK</a>
</form>
<script>
function form(){
if(document.form.form2.value=="") window.alert("nevyplnil jste první pole!");
else if(document.form.form3.value=="") window.alert("nevyplnil jste druhé pole!");
else if(document.form.form3.value=="" && document.form.form2.value=="") window.alert("nic jste nevyplnil!");
else
window.alert("1.pole obsahuje: "+document.form.form2.value+" a 2.pole obsahuje: "+document.forms[0].elements[1].value);
}
</script>

Vytvořili jsme jednoduchý formulář, který ověřuje, zda jsou vyplněné obě položky (pokud ne, oznámí to dialogovým oknem), pokud jsou vyplněné, vypíše je prostřednictvím dialogového okna. První vlastnost, kterou k formulářovému prvku přistupujeme, je document.forms[pořadí].elements[pořadí].value. První formulář na stránce má pořadové číslo 0, další 1 atd. Stejně tak prvky v rámci formuláře jsou postupně číslovány 0, 1, 2 atd. Přes tato čísla lze JavaScriptem získávat obsah polí. Je to metoda poměrně komplikovaná, nepřehledná a nepružná (při zavedení nového prvku do formuláře musíte přečíslovat skript).

Druhá metoda je závislá na pojmenování (hodnoty atributů name) formuláře a jeho prvků. Hodnotu získáme pomocí vlastnosti document.jméno_formuláře.jméno_prvku.value, v uvedeném skriptu např. document.form.form2.value.

Metody pro práci s formuláři

S formuláři pracují tyto metody:

MetodaPopis
document.form.reset()Smaže obsah formuláře; ekvivalentní s tlačítkem [reset]
document.form.submit()Odešle formulář; ekvivalentní s tlačítkem [submit]
document.form.prvek.blur()Deaktivace pohledu na prvek
document.form.prvek.focus()Aktivace pohledu na prvek
document.form.prvek.select()Vybere obsah prvku

Místo "form" je třeba zadávat jméno formuláře, místo "prvek" název prvku formuláře. Ukázka:

<form>
<input type="text" name="form2">
<input type="button" value="vybrat" onClick="form2.select();">
<input type="button" value="deaktivuj" onClick="form2.blur();">
</form>

Pokud se formulářové metody nachází uvnitř formuláře, není nutné zapisovat ve funkci jméno formuláře.

Další: Kontrola formulářových prvků (checked a radio)



Doporučuji
Pro své weby používám *Webhosting C4: 20 GB prostoru, PHP, MySQL, e-maily, subdomény za 1200 Kč (zdarma 2 GB navíc každý rok). Více WebhostingC4.cz.
Potřebujete poradit?


Vyhledávání


Poradna

Pokud si nevíte rady, chcete kontakt na spolehlivého tvůrce webu, či vás zajímá cizí názor, ozvěte se.

Reklama