PHP-Cascading-Select/index.php at master · coderwanda/PHP-Cascading-Select · GitHub

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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<?php


include("db.php");


$get_province = mysqli_query($con,"SELECT * FROM provinces");


?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>

<title>Cascading selects</title>


      <script type="text/javascript">

	  //Get districts list
	function showResult(){
		var provincecode=document.getElementById('provincecode').value;
		var params = "&provincecode="+provincecode+"";
		http=new XMLHttpRequest();
		http.open("POST","getdistrict.php",true);
		http.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
		http.send(params);
		http.onreadystatechange = function()
		{//Call a function when the province changes.

		document.getElementById("districtcode").innerHTML=http.responseText;

		if(document.getElementById('districtcode').value!=="No District Available")
		document.post_form.name.disabled=false;

		}
	}


	    //Get sectors list
		function showResult2(){
		var districtcode=document.getElementById('districtcode').value;
		var params = "&districtcode="+districtcode+"";
		http=new XMLHttpRequest();
		http.open("POST","getsector.php",true);
		http.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
		http.send(params);
		http.onreadystatechange = function()
		{//Call a function when the district changes.

		document.getElementById("sectorcode").innerHTML=http.responseText;

		if(document.getElementById('sectorcode').value!=="No Sector Available")
		document.post_form.name.disabled=false;

		}
	}

	//Get cell list
		function showResult3(){
		var sectorcode=document.getElementById('sectorcode').value;
		var params = "&sectorcode="+sectorcode+"";
		http=new XMLHttpRequest();
		http.open("POST","getcell.php",true);
		http.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
		http.send(params);
		http.onreadystatechange = function()
		{//Call a function when the sector changes.

		document.getElementById("codecell").innerHTML=http.responseText;

		if(document.getElementById('codecell').value!=="No Cell Available")
		document.post_form.name.disabled=false;

		}
	}

	//Get Villages list
		function showResult4(){
		var codecell=document.getElementById('codecell').value;
		var params = "&codecell="+codecell+"";
		http=new XMLHttpRequest();
		http.open("POST","getvillage.php",true);
		http.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
		http.send(params);
		http.onreadystatechange = function()
		{//Call a function when the cell changes.

		document.getElementById("CodeVillage").innerHTML=http.responseText;

		if(document.getElementById('CodeVillage').value!=="No village Available")
		document.post_form.name.disabled=false;

		}
	}
</script>


</head>
<body >

<pre>


                                 <h3 align="center"> Cascading select from: Province - Village</h3>


								<form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post" name="form" id="form" >


								Province: <select name="provincecode"  id="provincecode" onchange="showResult();" style="width:150px">
																<option value="">----Select province----</option>
																<?php while($show_province = mysqli_fetch_array($get_province)) { ?>
																<option value="<?php echo $show_province['provincecode'] ?>"><?php echo $show_province['provincename'] ?></option>
																<?php } ?>
															  </select>
															  &nbsp;

								District: <select name="districtcode" id="districtcode" class="entrytext" onchange="showResult2();" style="width:150px">
																			<option ></option>
																		  </select>

								Sector:   <select name="sectorcode" id="sectorcode" class="entrytext" onchange="showResult3();" style="width:150px">
																			<option> </option>
																		  </select>

								Cell:     <select name="codecell" id="codecell" class="entrytext" onchange="showResult4();" style="width:150px">
																			<option> </option>
																		  </select>

								Village:  <select name="CodeVillage" id="CodeVillage" class="entrytext"  style="width:150px">
																			<option> </option>
																		  </select>


								</form/>
								 </pre>


</body></html>