Afhængige valgmuligheder
Jeg ønsker at lave en adresseformular, hvor valgmulighederne under gadenavn skal være afhængige af, hvad der indtastes i postnummer feltet.Scriptet til søgning af vejnavnene har jeg fået på Geoservicen, men jeg kan ikke få søgefunktionen til at søge på det indtastede postnr.
I koden nedenunder er det variablen argumenter.postnr i linie 11, som nu står til 6000, som i stedet for skal antage den valgte værdi fra select boksen, lige så snart værdien er valgt.
Jeg har prøvet at indsætte document.adr.postnr.selectedIndex i stedet for 6000, samt at indsætte forskellige parametre i linie 9 ( $(function() ) men lige lidt hjælper det.
Undskyld, hvis det er et simpelt spørgsmål, men det er mit niveau.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="http://geo.oiorest.dk/jquery/css/ui-lightness/jquery-ui-1.8.7.custom.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="http://geo.oiorest.dk/jquery/js/jquery-ui-1.8.7.custom.min.js" ></script>
<script type="text/javascript">
$(function () {
var argumenter = {};
argumenter.postnr = 6000;
$.ajax({
url: 'http://geo.oiorest.dk/vejnavne.json',
data: argumenter,
dataType: "jsonp",
error: fejlikommunikation,
jsonpCallback: 'getveje'
});
});
function getveje(veje) {
var data = [];
$.each(veje, function (i, vej) {
data[i] = vej.navn;
});
$('#vejnavn').autocomplete({
source: data,
minLength: 1
});
};
function fejlikommunikation(xhr, status, errorThrown) {
alert("status: " + status + ", errorThrown: " + errorThrown);
};
</script>
</head>
<body>
<form name="adr" action="kontakt_kopi.php" method="post">
Vælg din by:
<select name="postnr">
<option value="6000">6000 Kolding</option>
<option value="6051">6051 Almind</option>
<option value="6052">6052 Viuf</option>
<option value="6091">6091 Bjert</option>
<option value="6092">6092 Sdr. Bjert</option>
</select>
<br><br>
<label for="vejnavn">
Vælg din vej:
</label>
<input type="search" id="vejnavn" name="v_navn"><br>
<br>
<input type="submit" name="knap" value="Send">
</form>
</body>
</html>
