Comboboxen vanuit database
Ik heb deze scripts gemaakt maar ik mis hier iets bij. Ik wil graag de informatie opvragen vanuit een database in plaats vanuit de de option value. Ik heb geen idee, waar ik precies moet beginnen in ajax om dit voor elkaar te krijgen. Als iemand me op weg kan helpen ben ik diegene meer dan dankbaar
File1.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
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>Untitled Document</title>
<script language="javascript">
var xmlHttp
function showLanden(str)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="file2.php";
url=url+"?q="+str;
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged()
{
if (xmlHttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
</script>
</head>
<body>
<form action="" method="get" enctype="multipart/form-data" name="frmAjax" id="frmAjax">
<table width="100" border="1">
<tr>
<td>Provincie</td>
<td>
<select name="country" id="country" onchange="showLanden(this.value)">
<option value="1">Flevoland</option>
<option value="2">Noord holland</option>
</select>
</td>
</tr>
<tr>
<td>Stad</td>
<td><p><div id="txtHint">
<select name="state" id="state" style="width:110px; ">
<option value="0">Select</option>
</select>
</div>
</p></td>
</tr>
</table>
</form>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>Untitled Document</title>
<script language="javascript">
var xmlHttp
function showLanden(str)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="file2.php";
url=url+"?q="+str;
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged()
{
if (xmlHttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
</script>
</head>
<body>
<form action="" method="get" enctype="multipart/form-data" name="frmAjax" id="frmAjax">
<table width="100" border="1">
<tr>
<td>Provincie</td>
<td>
<select name="country" id="country" onchange="showLanden(this.value)">
<option value="1">Flevoland</option>
<option value="2">Noord holland</option>
</select>
</td>
</tr>
<tr>
<td>Stad</td>
<td><p><div id="txtHint">
<select name="state" id="state" style="width:110px; ">
<option value="0">Select</option>
</select>
</div>
</p></td>
</tr>
</table>
</form>
</body>
</html>
File2.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
28
29
30
31
32
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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>Untitled Document</title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
<table width="100" border="1">
<tr>
<td>
<select name="state" id="state">
<?php if($_REQUEST['q']=="1") { ?>
<option value="" >Almere</option>
<?php } ?>
<?php if($_REQUEST['q']=="1") { ?>
<option value="" >Lelystad</option>
<?php } ?>
<?php if($_REQUEST['q']=="2") { ?>
<option value="">Amsterdam</option>
<?php } ?>
<?php if($_REQUEST['q']=="2") { ?>
<option value="">Den Helder</option>
<?php } ?>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>Untitled Document</title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
<table width="100" border="1">
<tr>
<td>
<select name="state" id="state">
<?php if($_REQUEST['q']=="1") { ?>
<option value="" >Almere</option>
<?php } ?>
<?php if($_REQUEST['q']=="1") { ?>
<option value="" >Lelystad</option>
<?php } ?>
<?php if($_REQUEST['q']=="2") { ?>
<option value="">Amsterdam</option>
<?php } ?>
<?php if($_REQUEST['q']=="2") { ?>
<option value="">Den Helder</option>
<?php } ?>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
Gewijzigd op 25/08/2010 13:52:41 door Jeffrey boud
Werkt dit script? Ik geloof dat ik naar hetzelfde op zoek ben! :-)
Dit heeft mij geholpen om te begrijpen hoe e.e.a. werkt: w3schools, alleen worstel ik nog met een tweede selectiebox die informatie moet tonen die hoort bij de eerste selectie.
Bij een combobox denk ik aan:
Een text input met daaronder een drop down lijst.
Wanneer je iets invult (terwijl je iets aan het typen bent) in de text input krijg je een aantal suggesties in de lijst. Die suggesties zijn klikbaar.
Is dit wat je nodig hebt?
Nog iets: geen bezwaren tegen jQuery?