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

Navigace