In de hoofdstukken DOM en Events heb je geleerd hoe je elementen op een webpagina kan benaderen en kan reageren op acties die worden ondernomen.
In dit hoofdstukken focussen we ons op formulierelementen zoals tekstvakken, keuzelijsten, aankruisvakken en keuzerondjes. Hoe kan je met andere woorden nagaan welke keuzes de gebruiker heeft gemaakt, en hoe kan je de keuzes codematig instellen. Dit hoofdstuk maakt veelvuldig gebruik van de cross-browser functie getObj.
Vanzelfsprekend ben je niet verplicht deze functie te gebruiken en kan werken volgens de oudere manier om formuliervelden aan te spreken:
document.form[0].elementnaam.eigenschap
Tekstvakken
De waarde van een tekstvak, tekstgebied en een verborgen veld manipuleer je via de eigenschap value van het element.
In onderstaand voorbeeld kan je een stukje tekst intikken in het tekstvak. Druk je op 'Toevoegen', dan wordt de tekst toegevoegd aan het tekstgebied.
Toon /verberg
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Cursus HTML - IVO Brugge</TITLE>
<link rel="stylesheet" type="text/css" href="vb.css">
<script type="text/javascript">
//<!--
function toevoegen(){
ingave = new getObj("ingave");
resultaat = new getObj("resultaat");
resultaat.obj.value += ingave.obj.value +"\n";
}
function getObj(name)
{
if (document.getElementById)
{
this.obj = document.getElementById(name);
}
else if (document.all)
{
this.obj = document.all[name];
}
else if (document.layers)
{
this.obj = document.layers[name];
}
}
-->
</script>
</HEAD>
<BODY>
<h2>Formulieren</h2>
<form name="f">
<input id="ingave" name="ingave" type="text" value="">
<br><input type="button" onclick="toevoegen()" value="Toevoegen">
<p>
<textarea id="resultaat" name="resultaat" rows="5" cols="20" >
</textarea>
</form>
</body>
</html>
Keuzelijsten
Waarden uitlezen
Een keuzelijst of SELECT-element heeft een aantal belangrijke eigenschappen:
options: een Array met de opties van de keuzelijst.
De eigenschap length van deze Array levert het aantal elementen in de keuzelijst.
Het aantal elementen vind je ook in de eigenschap length van de keuzelijst (je hoeft in principe de options-Array niet te gebruiken)
selectedIndex: indexcijfer van de geselecteerde optie
Een optie uit een keuzelijst is een element uit de Array options van de keuzelijst, maar heeft op zich ook een aantal eigenschappen:
text: de tekstwaarde van de optie
value: de waarde van het attribuut value voor deze optie
selected: boolean die aangeeft of het element geselecteerd is
Voorbeeldtoepassing: info over de opties
Toon /verberg
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Cursus HTML - IVO Brugge</TITLE>
<link rel="stylesheet" type="text/css" href="vb.css">
<script type="text/javascript">
//<!--
var talen;
var resultaat;
function initieer(){
talen = new getObj("talen");
resultaat = new getObj("resultaat");
}
function toonEerste(){
resultaat.obj.value = talen.obj.options[0].text +
" (" +talen.obj.options[0].value +")";
}
function toonGeselecteerd(){
resultaat.obj.value = talen.obj.options[talen.obj.selectedIndex].text +
" (" +talen.obj.options[talen.obj.selectedIndex].value +")";
}
function toonAantal(){
resultaat.obj.value = talen.obj.options.length;
}
function getObj(name)
{
if (document.getElementById)
{
this.obj = document.getElementById(name);
}
else if (document.all)
{
this.obj = document.all[name];
}
else if (document.layers)
{
this.obj = document.layers[name];
}
}
-->
</script>
</HEAD>
<BODY onload="initieer()">
<h2>Formulieren: keuzelijst</h2>
<form name="f">
<select id="talen" name="talen" size="5">
<option value="Csharp" selected="selected">C#</option>
<option value="J">Java</option>
<option value="JS">Javascript</option>
<option value="VB">VB.net</option>
</select>
</textarea>
<p>
<input type="button" value="Toon eerste taal" onclick="toonEerste()">
<input type="button" value="Toon geselecteerde taal" onclick="toonGeselecteerd()">
<input type="button" value="Toon aantal elementen" onclick="toonAantal()">
<p>
<input id="resultaat" name="resultaat" type="text" value="">
</form>
</body>
</html>
Opties bijmaken en verwijderen
Keuzelijsten en opties kan je bijmaken met de methode createElement(), of door de eigenschap innerHTML (van een select-lijst of overkoepelend element) aan te passen.
Naast deze mogelijkheden kan je ook als volgt werken:
Een optie toevoegen aan een keuzelijst waarnaar wordt verwezen met de variabele lijst kan als volgt:
lijst.options[lijst.options.length]= new Option('tekstwaarde','valuewaarde');
of:
lijst.options[lijst.options.length]= new Option('tekstwaarde');
Een element uit een keuzelijst verwijderen kan door deze optie op null in te stellen:
lijst.options[index] = null;
Voorbeeldtoepassing: dynamische keuzelijst
Een eerste keuzelijst is gevuld met een aantal vast waarden. Wanneer de gebruiker een item in deze lijst selecteert, worden de waarden van een tweede lijst aangepast.
Toon /verberg
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<TITLE>Cursus Javascript - IVO Brugge</TITLE>
<link rel="stylesheet" type="text/css" href="vb.css">
<style type="text/css">
select.hoofd {
width:100px;
background-color:#CCCCFF;
font-weight:bold;
}
select.detail {
width:200px;
background-color:#CCFFCC;
color:red;
}
</style>
<script language= "JavaScript">
<!--
var hoofd;
var detail;
var inhoud = new Array();
inhoud[0] = new Array('Krokus','Roos','Tulp');
inhoud[1] = new Array('Eik','Es','Populier');
inhoud[2] = new Array('Aap','Beer','Hond','Schaap');
function initieer(){
hoofd = new getObj("hoofd");
detail = new getObj("sub");
}
function vulDetail(){
var nr = hoofd.obj.selectedIndex;
detail.obj.options.length = 0;
for (var i=0; i < inhoud[nr].length; i++){
detail.obj.options[i] = new Option(inhoud[nr][i]);
}
detail.obj.options[0].selected = true;
}
function getObj(name)
{
if (document.getElementById)
{
this.obj = document.getElementById(name);
}
else if (document.all)
{
this.obj = document.all[name];
}
else if (document.layers)
{
this.obj = document.layers[name];
}
}
//-->
</script>
</head>
<body onload="initieer()">
<h1>Dynamische lijst</h1>
<form name="f">
<table border="0">
<tr><td>
<select class="hoofd" id="hoofd" name="hoofd" size="10" onchange="vulDetail()">
<option value="0">Bloemen</option>
<option value="1">Bomen</option>
<option value="2">Dieren</option>
</select><br>
</td><td align=center>
<select class="detail" id="sub" name="sub" size="10">
</select><br>
</td></tr></table>
</form>
</body>
</html>
Meervoudige selecties
Door een lus te gebruiken en naar de eigenschap selected van elke optie te kijken kan je lijsten manipuleren waar meerdere selecties mogelijk zijn. Hiervoor is in de select-tag de optie multiple geactiveerd.
Voorbeeldtoepassing: deelnemers aan een studiedag
In een eerste lijst zie je namen van leerkrachten. Wanneer je 1 of meerdere namen selecteert kan je deze overbrengen naar een lijst met deelnemers aan de studiedag.
Toon /verberg
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<TITLE>Cursus Javascript - IVO Brugge</TITLE>
<link rel="stylesheet" type="text/css" href="vb.css">
<style type="text/css">
select.lijst {
width:200px;
}
select.leerkracht {
background-color:#FFFFCC;
}
select.deelnemer {
background-color:#FFCC33;
}
</style>
<script language= "JavaScript">
<!--
var lkr;
var dln;
function initieer(){
lkr = new getObj("leerkrachten");
dln = new getObj("deelnemers");
}
function doorgeef(van, naar) {
vanlen = van.obj.options.length ;
//geselecteerden in 'van' toevoegen aan 'naar'
for ( i=0; i<vanlen ; i++){
if (van.obj.options[i].selected == true ) {
naarlen = naar.obj.options.length;
naar.obj.options[naarlen]= new Option(van.obj.options[i].text,van.obj.options[i].value);
}
}
//geselecteerden in 'van' verwijderen
for ( i = (vanlen -1); i>=0; i--){
if (van.obj.options[i].selected == true ) {
van.obj.options[i] = null;
}
}
}
function getObj(name)
{
if (document.getElementById)
{
this.obj = document.getElementById(name);
}
else if (document.all)
{
this.obj = document.all[name];
}
else if (document.layers)
{
this.obj = document.layers[name];
}
}
//-->
</script>
</head>
<body onload="initieer()">
<h1>Studiedag</h1>
<form name="f">
<table border="1">
<tr><td>
<select class="lijst leerkracht" id="leerkrachten" name="leerkrachten" size="10" multiple="multiple">
<option value="ap">Aarnouts Peter</option>
<option value="bp">Baele Peter</option>
<option value="bi">Bonne Ilse</option>
<option value="jdd">De Deurwaerder Jan</option>
<option value="sw">Schokkelé William</option>
<option value="sk">Somers Karina</option>
</select><br>
<p align=center><input type="button" onClick="doorgeef(lkr,dln)" value=" >> "></p>
</td><td align=center>
<select class="lijst deelnemer" id="deelnemers" name="deelnemers" size="10" multiple="multiple">
</select><br>
<p align=center><input type="button" onClick="doorgeef(dln,lkr)" value=" << " ></p>
</td></tr></table>
</form>
</body>
</html>
Checkbox
Je kan nagaan of een aankruisvakje is aangevinkt door de eigenschap checked te controleren. Je kan ook codematig deze eigenschap instellen.
Voorbeeldtoepassing: leuke sporten
In deze toepassing kan je opvragen welke selecties de gebruiker heeft gemaakt.
Het aantal checkboxen wordt dynamisch gecontroleerd.
Toon /verberg
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<TITLE>Cursus Javascript - IVO Brugge</TITLE>
<link rel="stylesheet" type="text/css" href="vb.css">
<script language= "JavaScript">
<!--
var boxen = new Array();
function initieer(){
//kijken hoeveel checkboxen er zijn die beginnen met 'cb'
var doorgaan = true;
var telbox = 1;
//als het element bestaat telbox ophogen
// -> test met de functie eval
//telbox is uiteindelijk 1 te groot
while(doorgaan){
if(eval("f.cb" +telbox)) telbox++;
else doorgaan = false;
}
//een referentie naar elke checkbox stoppen in de Array boxen
for(var i = 0; i < telbox - 1 ; i++){
boxen[i] = new getObj("cb" +(i+1));
}
}
function toonKeuze(){
var strRes = "U koos voor:\n\n";
for(var i = 0; i < boxen.length ; i++){
if(boxen[i].obj.checked){
strRes += boxen[i].obj.value +"\n";
}
}
alert(strRes);
}
function getObj(name)
{
if (document.getElementById)
{
this.obj = document.getElementById(name);
}
else if (document.all)
{
this.obj = document.all[name];
}
else if (document.layers)
{
this.obj = document.layers[name];
}
}
//-->
</script>
</head>
<body onload="initieer()">
<h1>Leuke sporten</h1>
<form id="f" name="f">
<input type="checkbox" id="cb1" name="cb1" value="badminton">Badminton<br>
<input type="checkbox" id="cb2" name="cb2" value="tennis">Tennis<br>
<input type="checkbox" id="cb3" name="cb3" value="voetbal">Voetbal<br>
<input type="button" value="Toon keuze" onclick="toonKeuze()">
</form>
</body>
</html>
Keuzerondjes: radiobuttons
Radiobuttons vormen een Array van elementen. We kunnen deze Array doorlopen met een lus om te zien welke optie aangeduid is: de eigenschap checked van dit aankruisvakje is true.
Voorbeeldtoepassing: geslacht
Duid aan wat je geslacht is en bekijk je keuze.
Toon /verberg
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<TITLE>Cursus Javascript - IVO Brugge</TITLE>
<link rel="stylesheet" type="text/css" href="vb.css">
<script language= "JavaScript">
<!--
function toonKeuze(){
//eenvoudiger werken via DOM0 ipv de functie getObj
var strRes = "Uw geslacht: ";
for(var i = 0; i < f.geslacht.length ; i++){
if(f.geslacht[i].checked){
strRes += f.geslacht[i].value;
}
}
alert(strRes);
}
//-->
</script>
</head>
<body>
<h1>Wat is uw geslacht ?</h1>
<form id="f" name="f">
<input type="radio" name="geslacht" value="V" checked>Vrouwelijk
<input type="radio" name="geslacht" value="M">Mannelijk
<p><input type="button" value="Toon keuze" onclick="toonKeuze()">
</form>
</body>
</html>
Formulieren versturen
Actie ondernemen voor het formulier wordt verstuurd
Dikwijls wens je programmatorisch nog een aantal acties te ondernemen wanneer een gebruiker een formulier verstuurt. Je wil formuliervelden controleren, verborgen velden aanvullen,...
Hier kan je handig gebruik maken van de onSubmit event-handler van het element FORM.
Hier roepen we de functie controle aan wanneer de gebruiker het formulier wenst te versturen. Wanneer de functie controletrue retourneert wordt het formulier verstuurd. Krijg je false terug uit de functie controle, dan wordt het formulier niet verstuurd.
Voorbeeldtoepassing: controle naam en voornaam
Vooraleer het formulier te versturen controleren we of er iets is ingevuld als naam en voornaam.
Wens je een formulier te versturen vanuit code, onafhankelijk van een eventuele submitbutton, dan kan dit op een eenvoudige manier:
document.forms[0].submit()
Het is echter niet aan te raden, wanneer je een formulier wenst te versturen, een gewone button te gebruiken die het formulier op bovenstaande manier verstuurd in plaats van een submit-button: gebruikers zonder javascript kunnen het formulier nu onmogelijk versturen.
Wanneer je de submit-functie gebruikt wordt de onsubmit event-handler niet uitgevoerd.
Een formulier resetten kan als volgt:
document.forms[0].reset()
Formulierelementen uitschakelen
Bepaalde formuliervelden mogen soms slechts onder specifieke voorwaarden door de gebruiker ingevuld of aangepast worden. Vandaar dat het met Javascript mogelijk is om formulierelementen uit te schakelen en in te schakelen.
Uitschakelen kan je doen door de eigenschap disabled van het formulierelement op true te plaatsen. Door deze eigenschap op false in te stellen wordt het element weer actief.
Voorbeeldtoepassing: aantal huisdieren
De gebruiker kan slechts een aantal huisdieren opgeven wanneer werd aangevinkt dat hij huisdieren heeft.
Toon /verberg
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<TITLE>Cursus Javascript - IVO Brugge</TITLE>
<link rel="stylesheet" type="text/css" href="vb.css">
<script language= "JavaScript">
<!--
function initieer(){
//codematig het textvak disablen
//werken met het attribuut disabled in de input-tag
//zorgt ervoor dat in Firefox het element niet meer enabled wordt
f.aantaldieren.disabled = true;
}
function controle(){
if(f.naam.value == "" || f.voornaam.value == "") {
alert('Vul uw naam en voornaam in aub.');
return false;
}
return true;
}
function CHKhuisdier(){
if(f.huisdier.checked){
f.aantaldieren.disabled = false;
f.aantaldieren.value = "1";
} else {
f.aantaldieren.disabled = true;
f.aantaldieren.value = "";
}
}
//-->
</script>
</head>
<body onload="initieer()">
<h1>Huisdieren</h1>
<form id="f" name="f" action="../../formscript.asp" method="POST" onsubmit="return controle()">
<table>
<tr>
<td>Naam:</td>
<td><input name="naam" type="text" value=""></td>
</tr>
<tr>
<td>Voornaam:</td>
<td><input name="voornaam" type="text" value=""></td>
</tr>
<tr>
<td><input type="checkbox" name="huisdier" value="HDOK" onclick="CHKhuisdier()">Ik heb huisdieren.</td>
<td>
Aantal:
<input style="width:30px;text-align:right" type="text" name="aantaldieren" value="" disabled="disabled">
</td>
</tr>
</table>
<p><input type="submit" value="Toon keuze">
</form>
</body>
</html>
Toon /verberg
© - Cursusweb