Een 'Other' keuze in een list van een formulier?
Ik heb een formulier waarin men kan kiezen uit allemaal dj's, maar ik wil ook dat een andere kan ingeven ...
Hoe kan ik dit doen? Ik zou een lijstje van dj's tonen en daaronder ook de mogelijkheid om OTHER DJ aan te duiden, als men daarop klikt, zou er eigenlijk naast die lijst een vakje moeten komen waarin men die andere dj kan invullen, maar hoe moet ik dit dan doen?
deel van de code: (let me know als je de complete code nodig hebt)
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
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
<tr>
<td width="200"><div align="right">Best DJ:</div></td>
<td width="200"><label><select name="bestdj" size="1" id="bestdj" value="<?=$bestdj;?>">
<option selected></option>
<option>Coone</option>
<option>Ruthless</option>
<option>Darkraver</option>
<option>Lethal Mg</option>
<option>Marcky</option>
<option>Pat B</option>
<option>Dark-E</option>
<option>Q-Ic</option>
<option>Greg C</option>
<option>Chicago Zone</option>
<option>Ronald V</option>
<option>E-Max</option>
<option>Mystery</option>
<option>Binum</option>
<option>Manu Kenton</option>
<option>PedrOh</option>
<option>W4ckO</option>
<option>The Playboyz</option>
<option>Lobotomy.Inc</option>
<option>Furax</option>
<option>Other</option>
</select></label></td>
</tr>
<td width="200"><div align="right">Best DJ:</div></td>
<td width="200"><label><select name="bestdj" size="1" id="bestdj" value="<?=$bestdj;?>">
<option selected></option>
<option>Coone</option>
<option>Ruthless</option>
<option>Darkraver</option>
<option>Lethal Mg</option>
<option>Marcky</option>
<option>Pat B</option>
<option>Dark-E</option>
<option>Q-Ic</option>
<option>Greg C</option>
<option>Chicago Zone</option>
<option>Ronald V</option>
<option>E-Max</option>
<option>Mystery</option>
<option>Binum</option>
<option>Manu Kenton</option>
<option>PedrOh</option>
<option>W4ckO</option>
<option>The Playboyz</option>
<option>Lobotomy.Inc</option>
<option>Furax</option>
<option>Other</option>
</select></label></td>
</tr>
voorbeeldje
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<script language="javascript">
function createRequestObject() {
var req;
if(window.XMLHttpRequest){
req = new XMLHttpRequest();
} else if(window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
} else {
req = NULL;
alert('Probleem met het aanmaken van hetXMLHttpRequest object');
}
return req;
}
var http = createRequestObject();
function sendRequestSearch(iets) {
http.open('get', 'dj.php?id='+iets);
http.onreadystatechange = handleResponseSearch;
http.send(null);
}
function handleResponseSearch() {
if(http.readyState == 4 && http.status == 200){
if(http.responseText) {
document.getElementById("dj").innerHTML = http.responseText;
} else {
document.getElementById("dj").innerHTML = " ";
}
} else {
document.getElementById("dj").innerHTML = " ";
}
}
</script>
<div id="dj" ></div>
<form id="form1" name="form1" method="post" action="">
<label>
<select name="bestdj" id="select" onchange="sendRequestSearch(this.value);">
<option value="dj 1">dj 1</option>
<option value="dj 2">dj 2</option>
<option value="other dj">other dj</option>
</select>
</label>
<div id="dj" ></div>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<script language="javascript">
function createRequestObject() {
var req;
if(window.XMLHttpRequest){
req = new XMLHttpRequest();
} else if(window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
} else {
req = NULL;
alert('Probleem met het aanmaken van hetXMLHttpRequest object');
}
return req;
}
var http = createRequestObject();
function sendRequestSearch(iets) {
http.open('get', 'dj.php?id='+iets);
http.onreadystatechange = handleResponseSearch;
http.send(null);
}
function handleResponseSearch() {
if(http.readyState == 4 && http.status == 200){
if(http.responseText) {
document.getElementById("dj").innerHTML = http.responseText;
} else {
document.getElementById("dj").innerHTML = " ";
}
} else {
document.getElementById("dj").innerHTML = " ";
}
}
</script>
<div id="dj" ></div>
<form id="form1" name="form1" method="post" action="">
<label>
<select name="bestdj" id="select" onchange="sendRequestSearch(this.value);">
<option value="dj 1">dj 1</option>
<option value="dj 2">dj 2</option>
<option value="other dj">other dj</option>
</select>
</label>
<div id="dj" ></div>
</form>
</body>
</html>
dj.php
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
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
<?php
header("Cache-Control: no-cache, must-revalidate");
$dj= $_GET["id"];
if ($dj == "other dj")
{
?>
<form id="form1" name="form1" method="post" action="">
<label>
<input type="text" name="other" id="textfield" />
</label>
<p>
<label>
<input type="submit" name="button" id="button" value="Verzenden" />
</label>
</p>
</form>
<?php
}
else
{
}
?>
header("Cache-Control: no-cache, must-revalidate");
$dj= $_GET["id"];
if ($dj == "other dj")
{
?>
<form id="form1" name="form1" method="post" action="">
<label>
<input type="text" name="other" id="textfield" />
</label>
<p>
<label>
<input type="submit" name="button" id="button" value="Verzenden" />
</label>
</p>
</form>
<?php
}
else
{
}
?>
edit: dit zal zonder refresh als other dj word aangeklikt een invul vakje laten zien
Gewijzigd op 01/01/1970 01:00:00 door wolfje
Een onchange op het selectboxje, check of de selected value 'other' is. Zo ja, maak een veldje aan via createElement() en plaats deze in de div "dj".
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
29
30
31
32
33
34
35
36
37
38
39
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
29
30
31
32
33
34
35
36
37
38
39
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Other-demo</title>
<script type="text/javascript" charset="utf-8">
window.onload = function() {
var artist_other = document.getElementById('artist_other');
artist_other.style.display = 'none';
document.getElementById('artist').onchange = function() {
if(this.options[this.selectedIndex].value == '^other') {
artist_other.style.display = '';
} else {
artist_other.style.display = 'none';
}
}
}
</script>
</head>
<body id="">
<form action="" method="post" accept-charset="utf-8">
<p>
<label for="artist">Artiest</label>
<select id="artist" name="artist">
<option value="Editors">Editors</option>
<option value="Goose">Goose</option>
<option value="The Kooks">The Kooks</option>
<option value="Moke">Moke</option>
<option value="Voicst">Voicst</option>
<option value="The Wombats">The Wombats</option>
<option value="^other">Anders...</option>
</select>
<input type="text" name="artist_other" id="artist_other" />
</p>
<p><input type="submit" value="Continue →"></p>
</form>
</body>
</html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Other-demo</title>
<script type="text/javascript" charset="utf-8">
window.onload = function() {
var artist_other = document.getElementById('artist_other');
artist_other.style.display = 'none';
document.getElementById('artist').onchange = function() {
if(this.options[this.selectedIndex].value == '^other') {
artist_other.style.display = '';
} else {
artist_other.style.display = 'none';
}
}
}
</script>
</head>
<body id="">
<form action="" method="post" accept-charset="utf-8">
<p>
<label for="artist">Artiest</label>
<select id="artist" name="artist">
<option value="Editors">Editors</option>
<option value="Goose">Goose</option>
<option value="The Kooks">The Kooks</option>
<option value="Moke">Moke</option>
<option value="Voicst">Voicst</option>
<option value="The Wombats">The Wombats</option>
<option value="^other">Anders...</option>
</select>
<input type="text" name="artist_other" id="artist_other" />
</p>
<p><input type="submit" value="Continue →"></p>
</form>
</body>
</html>
Gewijzigd op 01/01/1970 01:00:00 door Jelmer -