<select> vraagje
Ik heb het volgende probleempje. Zie onderstaande option-list. Als je voor "Anders, namelijk" kiest moet er een ander veld (tekstveld) verschijnen.
<div id="contactright" style="width: 150px;">
<select id="profielkleur" name="profielkleur" size=1 STYLE="width: 150px">
<option selected value = "Blanc geanodiseerd">Blanc geanodiseerd</option>
<option value = "Anders, namelijk">Anders, namelijk</option>
</select>
</div>
Dit veld moet er dan verschijnen:
<div id="contactleft" style="width: 120px;"> </div>
<div id="contactright" style="width: 150px;"><input type='text' name='profielkleuranders' size="1" STYLE="width: 150px;"></div>
Is het mogelijk om, afhankelijk van de keuze, het formulier te laten veranderen. Ik heb zo'n vermoeden dat javascript hier nodig is, maar daar weet ik helaas niks van.
Gr,
RObert
Gewijzigd op 01/01/1970 01:00:00 door Robert Hamers
maar zoiets zal de code moeten zijn (ken het document.write niet echt goed, maar dat zou met een divje wel te fixen moeten zijn..
<script type="text/javascript">
function check() {
var e = document.getelementbyid('test');
if e.value == "iets" {
document.write('andere code');
}
}
</script>
<select onchange="javascript:check()">
<option value="iets">iets
<option value="anders">anders
</select>
eerst eens nette code maken, excuses!
edit: got it,
moet je alleen nog de code beetje aanpassen, maar dit is getest met firefox en werkt:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
<head>
<script type="text/javascript">
function check()
{
var x=document.getElementById("test")
if (x.options[x.selectedIndex].text == "iets") {
var x=document.getElementById("myHeader");
x.innerHTML = "bladieblabla";
}
else {
var x=document.getElementById("myHeader");
x.innerHTML = "niets";
}
}
</script>
</head>
<body>
<select id="test" onchange="javascript:check()">
<option value="">
<option value="anders">anders
<option value="iets">iets
</select>
<div id="myHeader"></div>
</body>
</html>
<head>
<script type="text/javascript">
function check()
{
var x=document.getElementById("test")
if (x.options[x.selectedIndex].text == "iets") {
var x=document.getElementById("myHeader");
x.innerHTML = "bladieblabla";
}
else {
var x=document.getElementById("myHeader");
x.innerHTML = "niets";
}
}
</script>
</head>
<body>
<select id="test" onchange="javascript:check()">
<option value="">
<option value="anders">anders
<option value="iets">iets
</select>
<div id="myHeader"></div>
</body>
</html>
Gewijzigd op 01/01/1970 01:00:00 door leroy
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript" language="javascript">
<!--
function controleerAnders(objDiv) {
if (objDiv.value == "Anders, namelijk") {
document.getElementById("leeg").innerHTML = "<div id='contactleft' style='width: 120px;'> </div>\n<div id='contactright' style='width: 150px;'><input type='text' name='profielkleuranders' size='1' STYLE='width: 150px;'></div>';
}
}
}
//-->
</script>
<div id="contactright" style="width: 150px;">
<select id="profielkleur" name="profielkleur" size=1 STYLE="width: 150px" onchange="controleerAnders(this)">
<option selected value = "Blanc geanodiseerd">Blanc geanodiseerd</option>
<option value = "Anders, namelijk">Anders, namelijk</option>
</select>
<!-- een lege div waar de andere code in geplaatst wordt -->
<div id="leeg"></div>
</div>
<!--
function controleerAnders(objDiv) {
if (objDiv.value == "Anders, namelijk") {
document.getElementById("leeg").innerHTML = "<div id='contactleft' style='width: 120px;'> </div>\n<div id='contactright' style='width: 150px;'><input type='text' name='profielkleuranders' size='1' STYLE='width: 150px;'></div>';
}
}
}
//-->
</script>
<div id="contactright" style="width: 150px;">
<select id="profielkleur" name="profielkleur" size=1 STYLE="width: 150px" onchange="controleerAnders(this)">
<option selected value = "Blanc geanodiseerd">Blanc geanodiseerd</option>
<option value = "Anders, namelijk">Anders, namelijk</option>
</select>
<!-- een lege div waar de andere code in geplaatst wordt -->
<div id="leeg"></div>
</div>
Is dat wat je bedoelde?
Edit: aanhalingstekens veranderd..
Gewijzigd op 01/01/1970 01:00:00 door Daan
@Leroy: Jouw script heb ik wel werkend gekregen. Ik heb hem zodanig aangepast dat hij perfect geintegreerd kan worden in mijn website.
Bedankt voor de hulp
<select id="test" onchange="javascript:check()">
zijn bij grote sites lastig onderhoudbaar. Doe op zijn minst:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<script type="text/javascript">
window.onload = init;
function init () {
document.getElementById ('test').onchange = check;
}
function check () {
// bladiebla
}
</script>
window.onload = init;
function init () {
document.getElementById ('test').onchange = check;
}
function check () {
// bladiebla
}
</script>
Nog netter is het om met event registering te werken, maar dan heb je een generieke add_event functie nodig. Mocht je je daarin willen verdiepen, lees dan dit artikel op de site van PPK.
Kan ik op 1 of andere manier ook iets doen met de defaultwaarde zonder dat ik eerst een andere optie aanvink.
Jan Koehoorn schreef op 17.08.2007 10:29:
Dan moet je even een online voorbeeld laten zien, dat praat gemakkelijker.
Hier dan een simpel voorbeeld:
<script type="text/javascript">
function check()
{
var x=document.getElementById("profielkleur")
if (x.options[x.selectedIndex].text == "wit") {
var x=document.getElementById("myHeader");
x.innerHTML = "wit";
}
else {
var x=document.getElementById("myHeader");
x.innerHTML = "zwart";
}
}
</script>
<div id="contactright" style="width: 150px;">
<select id="profielkleur" size=1 STYLE="width: 150px;" onchange="javascript:check()">
<option value = "wit">wit</option>
<option value = "zwart">zwart</option>
</select>
</div>
<div id="myHeader"></div>
Als de pagina geladen worden zak de lege div geen wit tonen, terwijl dit wel default is geselecteerd. Als je zwart aanklikt zal de lege header zwart tonen. Ga je dan weer terug naar wit dan zal de lege div uiteraard wel wit tonen.
Ik zou graag willen dat de lege div bij het laden van de pagina al wit toont.
Jan, kun je iets met mijn voorbeeld?