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:

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)

Navigace