Met deze toepassing wordt een database met Nederlandse gemeenten per provincie geraadpleegd en retourneert bij het selecteren van een provincie een nieuwe keuzemogelijkheid met gemeenten.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link type="text/css" href="gemeenten_per_provincie.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(':input.provincie').change(function() {
if ( $(':input.provincie').val() >= 1 && $(':input.provincie').val() <= 12 ) {
$.get('ajax_gemeenten_per_provincie.php', { provincie_id : $(":input.provincie").val() }, function(xml) {
if (xml.getElementsByTagName("gemeente").length >= 1) {
$("div#ajax_gemeente").show();
var select = '';
$("div.ajax_gemeente_data").html(select);
}
});
} else {
$("div#ajax_gemeente").hide();
}
});
});
</script>
</head>
<body>
<div id="container">
<form method="post" action="gemeenten_per_provincie.php">
<div class="float_left row_1">
<label for="provincie">Provincie</label>
</div>
<div class="float_left row_2">
<select name="provincie" id="provincie" class="provincie">
<option value="">maak een keuze</option>
<option value="1">Drenthe</option>
<option value="2">Flevoland</option>
<option value="3">Friesland</option>
<option value="4">Gelderland</option>
<option value="5">Groningen</option>
<option value="6">Limburg</option>
<option value="7">Noord-Brabant</option>
<option value="8">Noord-Holland</option>
<option value="9">Overijssel</option>
<option value="10">Utrecht</option>
<option value="11">Zeeland</option>
<option value="12">Zuid-Holland</option>
</select>
</div>
<div class="clear_left"></div>
<div id="ajax_gemeente">
<div class="float_left row_1">
<label for="gemeente">Gemeente</label>
</div>
<div class="float_left row_2">
<div class="ajax_gemeente_data"></div>
</div>
<div class="clear_left"></div>
</div>
<div class="float_right">
<input type="submit" />
</div>
<div class="clear_right"></div>
</form>
</div>
</body>
label
{
cursor: pointer;
}
div#ajax_gemeente
{
display: none;
}
div#container
{
width: 500px;
margin-left: auto;
margin-right: auto;
}
div.row_1
{
width: 150px;
padding: 5px;
font-family: "Lucida Grande", "Lucida Sans Unicode";
font-size: 14px;
color: #000000;
}
div.row_2
{
padding: 5px;
}
.float_left { float: left; }
.float_right { float: right; }
.clear_left { clear: left; }
.clear_right { clear: right; }
header("Content-type: text/xml");
mysql_connect("localhost", "root", "root") or die(mysql_error());
mysql_select_db("davidvandertuijn") or die(mysql_error());
mysql_query("SET NAMES 'utf8'");
$provincie_id = (int) $_GET['provincie_id'];
$sql = sprintf("SELECT id, provincie_id, description FROM gemeenten WHERE provincie_id = %d", $provincie_id);
$result = mysql_query($sql) or die(mysql_error());
if ( mysql_num_rows($result) != 0 )
{
$dom = new DOMDocument('1.0','utf-8');
}
if ($_POST)
{
echo '<pre>';
print_r($_POST);
echo '</pre>';
}
