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
| <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Listes liées en JQuery</title>
<link rel="shortcut icon" href="../../../images/site/favicon.ico" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.chained.js"></script>
<!-- Actualiser liste départements -->
<script type="text/javascript">
$(function(){
$("#departement").chained("#region");
});
</script>
</head>
<body>
<?php
// Connexion a la BDD
$bddname = 'france';
$hostname = 'localhost';
$username = 'root';
$password = 'kahless';
$db = mysqli_connect ($hostname, $username, $password, $bddname);
$db -> set_charset("utf8");
?>
<form method="post">
<select name="region" id="region">
<option value="">Sélectionner une région</option>
<?php
// Appel des regions
$req = "SELECT RegionId, NomRegion FROM regions ORDER BY NomRegion";
$rep = mysqli_query($db, $req);
while ($row = mysqli_fetch_array($rep)) {
echo "<option value=".$row['RegionId'].">".$row['NomRegion']."</option>";
}
?>
</select>
<select name="departement" id="departement">
<option value="">Sélectionner un département</option>
<?php
// Appel des departements
$req = "SELECT DepartementId, RegionId, NomDepartement FROM departements ORDER BY NomDepartement";
$rep = mysqli_query($db, $req);
while ($row = mysqli_fetch_array($rep)) {
echo "<option value=".$row['DepartementId']." class=".$row['RegionId'].">".$row['NomDepartement']."</option>";
}
?>
</select>
<!-- Entrée code postal -->
<input type="text" name="codepostal" id="codepostal" pattern="[0-9]*" maxlength="5">
<script>
$(document).ready(function(){
$("#codepostal").blur(function(){
var cp = $(this).val();
$.ajax({
type: 'post',
data: {codePostal:cp},
dataType: 'json',
success:function(response){
var len = response.length;
$("#commune").empty();
for( var i = 0; i<len; i++){
var id = response[i]['id'];
var name = response[i]['name'];
$("#commune").append("<option value='"+id+"'>"+name+"</option>");
}
}
});
});
});
</script>
<?php
// Handle AJAX request (start)
$codepostal = 0;
if( isset($_POST['codePostal']) ){
$codepostal = $_POST['codePostal'];
}
$comm_arr = array();
if($codepostal > 0){
// Appel des communes
$req = " SELECT CommuneId, NomCommune FROM communes
LEFT JOIN communeCP
ON communeCP.CommuneId = communes.CommuneId
LEFT JOIN codesPostaux
ON codesPostaux.CodePostalId = communeCP.CodePostalId
WHERE codesPostaux.CodePostal = '$codepostal' ORDER BY NomCommune";
$rep = mysqli_query($db, $req);
while ($row = mysqli_fetch_array($rep)) {
$commId = $row['CommuneId'];
$commune = $row['NomCommune'];
$comm_arr[] = array("id" => $commId, "name" => $commune);
}
}
// encoding array to json format
echo json_encode($comm_arr);
?>
<select name="commune" id="commune">
<option value="">Sélectionner une commune</option>
</select>
</form>
</body>
</html> |
Lier un champ de texte à ma liste déroulante
Répondre avec citation
Partager