Javascript dovoluje kontrolovat vložená data do formulářů. Pokud jste si kladli otázku, jak můžete například zkontrolovat, jestli zadaný email má správný tvar, vězte, že k tomu právě slouží javascript.
Nejlepší bude, když rovnou přejdeme k příkladu. Ukážeme si jak, ověřit, že návštěvník stránek vyplnil všechny požadované kolonky.
<form name="formular" onSubmit="overeni();">
<input type="text" name="text1" />
<input type="text" name="text2" />
<input type="submit" value="odeslat" />
</form>
<script language="JavaScript" type="text/javascript">
function overeni(){
if(document.formular.text1.value=="" || document.formular.text2.value=="")
{
window.alert('Nezadal/a jste minimálně jednu z požadovaných informací.');
}
}
</script>
Předcházející příklad sice funguje, ale né každý by mohl chápat, jak to všechno funguje. Základem je formulář. Jednotlivé jeho části musí být pojmenované (name="něco"), aby s němi uměl javascript pracovat.
Pokud chceme zkontrolovat hodnotu, která byla vyplněna do formuláře, je nutné se k ní prokousat přes objekty. Abychom se dostali k vyplněným datům, musíme se přejít přes dokument a formulář k input polím, u kterých se poté můžeme podívat na vyplněný text.
document.jmeno_formulare.jmeno_input_pole.value
| document | objekt dokumentu |
| jméno_formuláře | objekt daného formuláře v dokumentu |
| jméno_input_pole | nemusí jít jen o input, zde to reprezentuje prvek formuláře |
| value | hodnota v daného prvku, hodnota atributu |
| metoda | popis |
|---|---|
| document.form.prvek.blur() | deaktivuje pohled na prvek |
| document.form.prvek.focus() | aktivuje pohled na prvek |
| document.form.prvek.select() | vybere obsah prvku |
| document.form.reset() | smaže formulář |
| document.form.submit() | odešle formulář |
Rolovací menu lze také zkontrolovat, například, pokud změníte výběr, vyskočí na Vás alert s hláškou.
<select name="select" onchange="window.alert(this.options[this.selectedIndex].value);"> <option value="Nymburk">Nymburk <option value="Praha">Praha <option value="Sadská">Sadská <option value="Poděbrady">Poděbrady </select>
Zaškrtávací pole se dá kontrolovat pomocí document.formulář.prvek.checked.
<form name="formular1" onSubmit="overit();">
<input type="checkbox" name="boxik" />
<input type="submit" name="button" value="odeslat" />
</form>
<script language="JavaScript" type="text/javascript">
function overit(){
if(document.formular1.boxik.checked==true)
window.alert("zaškrtnul/a jste checkbox");
else
window.alert("nezaškrtnul/a jste checkbox");
}
</script>
Pokud budete chtít, nebo potřebovat zkontrolovat, jestli návštěvník stránek zaškrtnul alespoň jeden radio button, podívejte se na příklad níže, který tento problém řeší.
<form name="formular2">
<input type="radio" name="volba" ><label>ano</label> <br />
<input type="radio" name="volba"><label>ne</label> <br />
<input type="radio" name="volba"><label>nevím</label> <br />
<input type="button" onClick="overit2()" value="Bylo zaškrtnuto...">
</form>
<script>
function overit2(){
if (document.formular2.volba[0].checked) window.alert("ano");
else if(document.formular2.volba[1].checked) window.alert("ne");
else window.alert("nevim");
}
</script>
U formulářévého prvku textarea se dá testovat mnoho věcí, například počet řádků, počet sloupců, jméno, typ atd.
<form name="formular3">
<textarea rows="3" cols="30" name="text_area">
</form>
<script>
document.write("<br />jméno: "+document.formular3.text_area.name);
document.write("<br />typ prvku: "+document.formular3.text_area.type);
document.write("<br />počet řádek: "+document.formular3.text_area.rows);
document.write("<br />počet sloupců: "+document.formular3.text_area.cols);
</script>
| document.form.input_pole.value | hodnota uložená v input poli |
| document.form.input_pole.size | velikost input pole |