Le code postal met à jour la liste des villes (Ajax/PHP)
Bonjour,
J'ai essayé de m'inspirer de ceci http://siddh.developpez.com/articles/ajax/ pour réaliser un liste déroulante qui se remplit en fonction du code postal saisi dans une zone de texte adjacente.
J'ai testé, le "Saisissez le code postal" est bien remplacé par "Choisissez la ville" sur le onchange(), mais la liste ne se remplit pas :
Code:
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
| <html>
<head>
<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
<script type='text/javascript'>
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest) // Firefox et autres
xhr = new XMLHttpRequest();
else if(window.ActiveXObject){ // Internet Explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
return xhr;
}
/**
* Méthode qui sera appelée sur le click du bouton
*/
function go(){
var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
leselect = xhr.responseText;
// On se sert de innerHTML pour rajouter les options a la liste
document.getElementById('ville').innerHTML = leselect;
}
}
// Ici on va voir comment faire du post
xhr.open("POST","v_inc/ajaxVilles.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
// ici, l'id de l'auteur
sel = document.getElementById('codePostal');
//codePostal = sel.options[sel.selectedIndex].value;
codePostal = document.forms.a.codePostal.value;
xhr.send("codePostal="+codePostal);
}
</script>
</head>
<body>
<form name="a">
<fieldset style="width: 500px">
<legend>Liste liées</legend>
<label>Code Postal</label>
<input type="text" name='codePostal' id='codePostal' onchange='go()'/>
<label>Ville</label>
<div id='ville' style='display:inline'>
<select name='ville'>
<option value='-1'>Saisissez le code postal</option>
</select>
</div>
</fieldset>
</form>
</body>
</html> |
fichier ajaxVilles.php :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
| <?php
echo '<select name="ville">';
if(isset($_POST["codePostal"])){
/*mysql_connect("localhost","root","root");
mysql_select_db("test");*/
$res = mysql_query("SELECT * FROM sg_ville WHERE codePostal=".$_POST["codePostal"]." ORDER BY ville");
echo '<option value="-1">Choisissez la ville</option>';
while($row = mysql_fetch_assoc($res)){
echo '<option value="'.$row["idVille"].'">'.$row["ville"].'</option>';
}
}
echo '</select>';
?> |
Et le contenu de ma table :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| --
-- Structure de la table `sg_ville`
--
CREATE TABLE IF NOT EXISTS `sg_ville` (
`idVille` int(11) NOT NULL AUTO_INCREMENT,
`pays` text NOT NULL,
`codePostal` int(11) NOT NULL,
`ville` text NOT NULL,
PRIMARY KEY (`idVille`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ;
--
-- Contenu de la table `sg_ville`
--
INSERT INTO `sg_ville` (`idVille`, `pays`, `codePostal`, `ville`) VALUES
(1, 'FR', 68440, 'BRUEBACH'),
(2, 'FR', 68440, 'HABSHEIM'),
(3, 'FR', 68000, 'COLMAR'),
(4, 'FR', 68040, 'INGERSHEIM'); |
J'ai annulé la connexion à la bbd car elle est déjà établie dans Joomla.
Pour l'instant je teste dans des pages php vierges le code sera intégré à mes formulaires chronoforms une fois fonctionnel.
J'aimerais aller plus loin...
J'enlève le résolu parce que j'aimerais aller plus loin.
Je souhaiterais que lorsqu'il n'y a pas de ville pour le code postal l'affichage change et que l'utilisateur ait la possibilité de saisir une ville manuellement (lorsque c'est une adresse en Suisse par exemple, ce qui arrive de temps en temps). Je ne vais pas m'amuser à intégrer la liste de toutes les localités du monde dans notre base de données !
Donc en résumé ce que j'aimerais obtenir :
[texte: saisie code postal] --on change()--> 2 cas de figure avec 2 affichages :
1) code postal répertorié dans la base --> [liste déroulante : avec les villes]
2) code postal non répertoiré --> message ["Code postal non répertoiré, vérifiez votre saisie ou saisissez la ville ci-dessous, si étranger"] --> [zone de texte : saisie de la ville]
J'ai essayé de modifier le fichier ajaxVilles en rajoutant un test :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <?php
if(isset($_POST["codePostal"])){
mysql_connect("localhost","root","");
mysql_select_db("joserfages");
$res = mysql_query("SELECT * FROM sg_ville WHERE codePostal=".$_POST["codePostal"]." ORDER BY ville");
if (mysql_num_rows($res)>0) {
echo '<select name="ville">';
echo '<option value="-1">Choisissez la ville</option>';
while($row = mysql_fetch_assoc($res)) {
echo '<option value="'.$row["idVille"].'">'.$row["ville"].'</option>';
}
echo '</select>';
}
else {
//echo 'le code postal n\'est pas répertoiré...';
echo '<input type="text" name="ville" id="txtVille"/>';
}
}
?> |
Bien évidemment ça n'a pas fonctionné, j'en ai déduit que le champ texte en question devrait peut-être exister dans le formulaire de la page codePostal.php ?
En fait je n'ai pas trop compris comment cette partie-là (en vert) :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
| <form name="a">
<fieldset style="width: 500px">
<legend>Liste liées</legend>
<label>Code Postal</label>
<input type="text" name="codePostal" id="codePostal" onChange="go()"/>
<label>Ville</label>
<div id="div_ville" style="display:inline">
<select name="ville" id="ville">
<option value="-1">Saisissez le code postal</option>
</select> </div>
</fieldset>
</form> |
Pouvait être remplacée par celle-ci (j'ai pas saisi la logique d'AJAX je crois bien) :
Code:
1
2
3
4
5
6
7
8
9
10
11
| echo '<select name="ville">';
if(isset($_POST["codePostal"])){
mysql_connect("localhost","root","");
mysql_select_db("joserfages");
$res = mysql_query("SELECT * FROM sg_ville WHERE codePostal=".$_POST["codePostal"]." ORDER BY ville");
echo '<option value="-1">Choisissez la ville</option>';
while($row = mysql_fetch_assoc($res)){
echo '<option value="'.$row["idVille"].'">'.$row["ville"].'</option>';
}
}
echo '</select>'; |
