Blog

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.


gemeenten_per_provincie.html
<!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>

gemeenten_per_provincie.css
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; }


ajax_gemeenten_per_provincie.php
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');

}


gemeenten_per_provincie.php
if ($_POST)
{
	echo '<pre>';
	print_r($_POST);
	echo '</pre>';
}

Resultaat

AutoSelecteren


Zie ook : Database van Nederlandse gemeenten per provincie

Zoeken