Javascript: dynamisch HTML form met select field

door: JorisO

Wanneer je een HTML formulier dynamisch wilt wijzigen n.a.v. de keuzes die de bezoeker maakt, biedt javascript veel handige oplossingen. Dmv javascript manipulaties van het HTML formulier is het mogelijk dit aan cliëntkant te wijzigen zonder dat de submit button in het spel komt. Javascript biedt vele verschillende methodes om velden in het HTML form aan te passen, toe te voegen of te verwijderen terwijl het formulier wordt ingevuld.

Voorbeeld javascript select form:

In dit voorbeeld worden Javascript, DOM en CSS gecombineerd om bepaalde elementen in een html formulier zichtbaar/onzichtbaar te maken n.a.v. de keuzes die gemaakt worden in een select field. Handig bijvoorbeeld wanneer bepaalde opties alleen relevant zijn in verband met andere keuzemogelijkheden.

Een 'onChange eventhandler' op het select <select> input veld in het formulier, triggered een javascript functie die eerst bepaald welke option-waarde gekozen is. Vervolgens wordt door een 'conditional' (if) clausule bepaald of naar aanleiding van de gemaakte keuze een bepaald element in het html document zichtbaar of onzichtbaar moet worden. Dit laatste gebeurt door de 'CSS display property' van een div element te manipuleren met de 'getelementbyid()' methode.

Je gebruikt deze javascript code in een formulier door de volgende event handler aan de <select> opening tag toe te voegen:

onChange="latenzien('divnaam',this.name,'trigger-optie')

Hierbij is 'divnaam' de (unieke) id van de div die zichtbaar/ onzichtbaar gemaakt wordt. 'Trigger-optie' de <option> waarde die ervoor zorgt dat de onzichtbare div zichtbaar wordt. De div met de verborgen formulier elementen maak je in eerste instantie onzichtbaar dmv de CSS display property.

Copy/paste voorbeeld html formulier met <select> javascript:

x = document.formulier.elements[veld].selectedIndex;
if (document.formulier.elements[veld].options[x].text == waarde)
{document.getElementById(id).style.display = 'block';}
else
{document.getElementById(id).style.display = 'none';}
}
-->
</script>

</body>
</html>

Commentaar van bezoekers:

van: Wisse van der Zalm

12:28:17, 24th-May-07

Hoe kan je zorgen dat elke keuze weer iets anders laat zien?
Dus, wat moet bij: function latenzien(id,veld,waarde) komen
en wat bij: <select name="selectieveld" onChange="latenzien('toverdiv',this.name,'blablabla')"> ?
Kan je gewoon door gaan met <select name="selectieveld" onChange="latenzien('toverdiv',this.name,'blablabla'); latenzien2(....)">

van: Piereliiepiepielo

08:06:54, 25th-May-07

Dan moet je in het scriptje een javascript switch of if / else structuur aanbrengen die per keuzemogeljkheid een ander blok zichtbaar maakt (dit kan door elke blok een unieke id te geven).

van: Reinder

13:50:22, 28th-Oct-07

Kun je dat eens wat beter uitleggen? :) Ik ben ook zeer benieuwd...
dus if waarde = blabla div = div1
if waarde = blablabla div=div2?
Iets op die manier :P

van: lalsla

15:19:14, 14th-Nov-07

leuk he java en html

van: Robin

21:38:10, 19th-Nov-07

Het is JavaScript, geen Java. ;)

van: RRMSe7eN

13:11:03, 10th-Apr-08

Assembler!

van: Maarten

19:57:13, 12th-Jul-08

Leuke script.

Ik ben ook benieuwd naar script die Wisse van der Zalm beschrijft. Kan iemand uitleggen hoe deze script eruit moet zien?

van: Daniel

12:11:25, 18th-Nov-08

Bij elke keuze iets anders:
function latenzien()
{
x = document.form.elements.project_functie.selectedIndex;
if (document.form.elements.project_functie.options[x].text == \'Bob\')
{document.getElementById(\'toverdiv1\').style.display = \'block\';
document.getElementById(\'toverdiv2\').style.display = \'none\';
document.getElementById(\'toverdiv3\').style.display = \'none\';
}
else if (document.form.elements.project_functie.options[x].text == \'Kees\')
{document.getElementById(\'toverdiv1\').style.display = \'none\';
document.getElementById(\'toverdiv2\').style.display = \'block\';
document.getElementById(\'toverdiv3\').style.display = \'none\';
}
else if (document.form.elements.project_functie.options[x].text == \'Klaas\')
{document.getElementById(\'toverdiv1\').style.display = \'none\';
document.getElementById(\'toverdiv2\').style.display = \'none\';
document.getElementById(\'toverdiv3\').style.display = \'block\';
}
else
{document.getElementById(\'toverdiv1\').style.display = \'none\';
document.getElementById(\'toverdiv2\').style.display = \'none\';
document.getElementById(\'toverdiv3\').style.display = \'none\';
}
}
<select name=\"naam\" onChange=\"latenzien()\">
<option value=\"\"></option>
<option value=\"Bob\">Bob</option>
<option value=\"Kees\">Kees</option>
<option value=\"Klaas\">Klaas</option>
</select>

van: Daniel

12:12:07, 18th-Nov-08

Ok, dit commentaar systeem zet er allemaal backslashes in, die moet je dus nog even weghalen

van: Willem

22:06:25, 2nd-Dec-08

Daniel, zo werkt het niet bij mij. iemand iets duidelijks op deze manier want heb het echt nodig. Alvast bednakt!

van: Gijs Wassenaar

20:24:27, 21st-Mar-09

URL: http://www.gijswassenaar.nl

Hoi Allemaal,

Als eerste fijn dat er een website is met deze goede tuturial, echt iets waar je wat aan hebt. Ik ga het zelf ook zeker gebruiken om alles wat duidelijker te maken.

Ten tweede mooi script. Misschien nog een extra artikel met meer uitbreidingen en er dieper op ingaan. zou handig zijn. Zoals de vraag in het commentaar zou een goede uitbreiding zijn.

Hartstikke bedankt in ieder geval!

Groetjes, Gijs.

van: kya

17:44:54, 31st-Mar-09

weet iemand hoe het gaat, als je radio buttons gebruikt?

van: slimme meneer

13:55:13, 17th-Oct-09

dit is een voorbeeld om voor elke een andere keuze te laten komen
<html>
<title></title>
<head>

<script type="text/javascript">
function lala(veld) {
if(veld.value=='la') {
document.getElementById('la_zooi').style.display = 'block';
document.getElementById('lala_zooi'').style.display = 'none';

} else if(veld.value=='lala') {
document.getElementById('la_zooi'').style.display = 'none';
document.getElementById('lala_zooi'').style.display = 'block';

} else {
document.getElementById('la_zooi'').style.display = 'none';
document.getElementById('lala_zooi'').style.display = 'none';

}
}
</script>
</head>
<body>
<select>
<option onclick="lala(this);" name="lala"></option>
<option id="la" value="la" onclick="lala(this);" name="lala">la</option>
<option id="lala" value="lala" onclick="lala(this);" name="lala">lala</option>
</select>

<div id="la_zooi" style="display:none">
hier komt alle la_zooi
</div>

<div id="lala_zooi'" style="display:none">
hier komt alle lala_zooi
</div>

van: Djunity

12:50:20, 1st-Mar-10

Er zitten een paar \' tekens te veel in boven gepost script

Hier onder de juiste werking:

<html>
<title>Javascript: dynamisch HTML form met select field</title>
<head>

<script type=\"text/javascript\">
function lala(veld) {
if(veld.value==\'la\') {
document.getElementById(\'la_zooi\').style.display = \'block\';
document.getElementById(\'lala_zooi\').style.display = \'none\';

} else if(veld.value==\'lala\') {
document.getElementById(\'la_zooi\').style.display = \'none\';
document.getElementById(\'lala_zooi\').style.display = \'block\';

} else {
document.getElementById(\'la_zooi\').style.display = \'none\';
document.getElementById(\'lala_zooi\').style.display = \'none\';

}
}
</script>
</head>
<body>

<form name=\"thisform\" method=\"post\" action=\"\">

<select>
<option onclick=\"lala(this);\" name=\"lala\"></option>
<option id=\"la\" value=\"la\" onclick=\"lala(this);\" name=\"la\">la</option>
<option id=\"lala\" value=\"lala\" onclick=\"lala(this);\" name=\"lala\">lala</option>
</select>
</form>

<div id=\"la_zooi\" style=\"display:none\">
hier komt alle la_zooi
</div>

<div id=\"lala_zooi\'\" style=\"display:none\">
hier komt alle lala_zooi
</div>

</body>
</html>

van: rens

15:01:17, 6th-Apr-10

URL: http://rensvdberg@gmail.com

Bij mij werkt hij niet.... waar gaat het fout?

van: Wim

23:20:53, 9th-May-10

Bij mij werkt het ook niet... iemand nog tips?

van: sander

23:59:47, 20th-Jul-10

vraagje?
ik heb een script met een door loop keuze allen krijg hem niet werkende als iemand even mijn fout er uit zou willen halen b.v.d.

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">

<script language="Javascript">

</script>

<style type="text/css">
.verborgen
{
display:none;
font-size:11px;
padding:4px;
}
</style>
</head>
<body>
<form name="formulier">
<select name="selectieveld" onChange="latenzien('type systeem',this.name,'Vaste Weegbruggen');latenzien('ijkbaar',this.name,'Draagbare Weegplaten')">
<option>type voertuig of weeg manier</option>
<option>Vaste Weegbruggen</option>
<option>Draagbare Weegplaten</option>
</select>

<select id="type systeem" class="verborgen">
<option>type systeem</option>
<option>Enkelassenweegbrug</option>
<option>Weegbruggen op aanvraag</option>
</select>

<select id="ijkbaar" onChange="latenzien2('capaciteit',this.name,'ja')" class="verborgen" > hier zit mijn fout denk
<option>ijkbaar</option>
<option>ja</option>
<option>nee</option>
</select>

<select id="capaciteit" class="verborgen">
<option>capaciteit</option>
<option>15Ton</option>
<option>20Ton</option>
</select>

</form>

</body>
</html>

Commentaar toevoegen:

Naam:
Link:^{(niet verplicht)}
Commentaar:
^{<-- code:}