Checked, Select, Radio
Už jsme si ukázali, jak ověřit data formulářových prvků input
, nyní se podíváme na kontrolu komplikovanějších prvků checked
, select
a radio
-
Checked - zaškrtávací pole
JavaScriptem lze zjistit, zda je zaškrtávací pole (checked) zaškrtnuto následovně:
<form name="form"> <input type="checkbox" name="form2"> <input type="button" value="ověřit" onClick="over();"> </form> <script> function over(){ if (document.form.form2.checked==true) window.alert("pole bylo zaškrtnuto"); else window.alert("pole nebylo zaškrtnuto"); } </script>
Funkce over()
určí zda je pravda, že pole bylo zaškrtnuto. Tak jako document.form.prvek.value
vrátí popis prvku, tak document.form.prvek.checked
vrátí hodnotu true
(1, pravda) nebo false
(0, nepravda), podle toho, zda je pole zaškrtnuté.
Select a option - rolovací nabídka
Rovněž rolovací menu lze ověřit a zjistit, co návštěvník vybral:
<select name="sel" onchange="window.alert(this.options[this.selectedIndex].value);"> <option value="JavaScript">JavaScript</option> <option value="PHP">PHP</option> <option value="HTML">HTML</option> <option value="CSS">CSS</option> </select>
Událost onchange
reaguje na změnu výběru, pokud změna nastane, dialogové okno vypíše hodnotu vybrané položky pomocí this.options[this.selectedIndex].value
. Klíčové slovo this
se odkazuje na daný prvek, u kterého se nachází. Identický zápis by mohl vypadat:
<select name="sel" onchange="window.alert(sel.options[sel.selectedIndex].value);">
Nebo:
<select name="sel" onchange="window.alert(form0.sel.options[form0.sel.selectedIndex].value);">
Radio
A ještě jeden formulářový prvek ke kontrole:
<form name="form6"> <label>ano</label><input type="radio" name="a" checked> <label>ne</label><input type="radio" name="a"> <input type="button" onClick="over()" value="Co jsem zašktl?"> <script> function over(){ if (document.form6.a[0].checked) window.alert("ano"); else window.alert("ne") } </script> </form>
Kontrola probíhá podobně jako u zaškrtávacího pole.
Další hodnoty
O prvcích formuláře můžete zjistit opravdu skoro všechno. Vlastnost document.form.prvek.value
vrací hodnotu atributu value
.
I na ostatní atributy se lze dotazovat pomocí vlastnosti document.form.prvek.value|size|name|rows|cols atd.
.
<form name="form"> <input type="text" size="4" name="pole_textu" value="1234"> <textarea cols="3" rows="2" name="blok_textu" ></textarea> <script> document.write("<br>textové pole"); document.write("<br>jméno: "+document.form.pole_textu.name); document.write("<br>velikost: "+document.form.pole_textu.size); document.write("<br>typ prvku: "+document.form.pole_textu.type); document.write("<br>popisek: "+document.form.pole_textu.value); document.write("<br><br>Blok textu"); document.write("<br>jméno: "+document.form.blok_textu.name); document.write("<br>počet řádek: "+document.form.blok_textu.rows); document.write("<br>počet sloupců: "+document.form.blok_textu.cols); </script> </form>
Další: Obrázky a práce s nimi
Trochu jinak: XHTML formuláře
Vyhledávání
Základy
Zajímavosti
DOM
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.