Ok .. here is the thing which is probably very easy to fix but unfortunatly not for me.
What I try to create is this:
I have 2 dropdown lists. List one consist of data straight from a database table. Nothing fancy about that. I am just pulling them in with a SELECT query etc.
The second list is empty for now, but I would like that dropdown list be automatically filled with data that is related through id's by the selected item from my first dropdown list.
Here is the code:
html page with form:
<!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>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="form.js"></script>
</head>
<body>
<form action="create_account.php" method="post">
<ul style="list-style: none;">
<li>
<label>District:</label>
<select name="district" id="district">
<option id="0"> -- Selecteer District --</option>
<option id="Amsterdam">Amsterdam</option>
<option id="Arnhem">Arnhem</option>
<option id="Assen">Assen</option>
<option id="Groningen">Groningen</option>
<option id="Leeuwarden">Leeuwarden</option>
<option id="Rotterdam">Rotterdam</option>
<option id="Sittard">Sittard</option>
<option id="Tilburg">Tilburg</option>
<option id="Utrecht">Utrecht</option>
<option id="Antillen">Antillen</option>
</select>
</li>
<li>
<label>Gemeente:</label>
<select name="gemeente" id="gemeente">
<option id="0"> -- Selecteer Gemeente --</option>
</select>
</li>
</ul>
</form>
</div>
</body>
</html>
Here is the json page:
<?php
header('Content-Type: application/json');
$response = array();
if (isset($_GET['districtid']))
{
//vul hier je database gebuikersnaam en ww in
mysql_connect("localhost", "root", "") or die("Could not connect: " . mysql_error());
//vul hier je mysql db naam in
mysql_select_db("my_db");
$qry = mysql_real_escape_string("SELECT * FROM gemeente WHERE district_id = " + $_GET['districtid']);
$result = mysql_query($qry);
while ($row = mysql_fetch_array($result, MYSQL_NUM)) {
array_push($response, $row);
}
echo json_encode($response);
} else {
$response[0]['id'] = 0;
$response[0]['gemeente'] = ' -- Selecteer Gemeente --';
echo json_encode($response);
}
?>
And here is the ajax file:
$("#district").change(function() {
$.getJSON("json.php?districtid="+$(this).val(), function(data) {
$("#gemeente").empty();
$.each(data, function(){
$("#gemeente").append('<option value="'+ this.id +'">'+ this.gemeente +'</option>');
});
});
});
I can't seem to get it working.
So if there is somebody out there that can help me out, I realy appreciate it.
Thanks in advance !!!
Here is the working example, please check.
index.php
<!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>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#district").change(function() {
$.getJSON("json.php?districtid="+$(this).val(), function(data) {
$("#gemeente").empty();
$.each(data, function(){
$("#gemeente").append('<option value="'+ this.id +'">'+ this.gemeente +'</option>');
});
});
});
});
</script>
</head>
<body>
<form action="create_account.php" method="post">
<ul style="list-style: none;">
<li>
<label>District:</label>
<select name="district" id="district">
<option id="0"> -- Selecteer District --</option>
<option id="Amsterdam">Amsterdam</option>
<option id="Arnhem">Arnhem</option>
<option id="Assen">Assen</option>
<option id="Groningen">Groningen</option>
<option id="Leeuwarden">Leeuwarden</option>
<option id="Rotterdam">Rotterdam</option>
<option id="Sittard">Sittard</option>
<option id="Tilburg">Tilburg</option>
<option id="Utrecht">Utrecht</option>
<option id="Antillen">Antillen</option>
</select>
</li>
<li>
<label>Gemeente:</label>
<select name="gemeente" id="gemeente">
<option id="0"> -- Selecteer Gemeente --</option>
</select>
</li>
</ul>
</form>
</div>
</body>
</html>
Here is your json.php code:
<?php
header('Content-Type: application/json');
$response = array();
if (isset($_GET['districtid'])){
//vul hier je database gebuikersnaam en ww in
$con=mysqli_connect("localhost","root","","my_db");
// Check connection
if (mysqli_connect_errno()){
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$qry = "SELECT * FROM gemeente WHERE district_id = '".$_GET['districtid']."'";
$result = mysqli_query($con, $qry); //mysql_query($qry);
while ($row = mysqli_fetch_array($result, MYSQL_BOTH)) {
array_push($response, $row);
}
echo json_encode($response);
} else {
$response[0]['id'] = 0;
$response[0]['gemeente'] = ' -- Selecteer Gemeente --';
echo json_encode($response);
}
?>