Le code postal met à jour la liste des villes (Ajax/PHP)

**LadyArwen** · 21/01/2010, 16h05

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**SpaceFrog** · 21/01/2010, 16h11

Attention !

name != id

ton select a un name
ton javascript attribue un innerHTML à un element avec getElementById()

rajoute un id à ton select

**E.Bzz** · 21/01/2010, 16h27

Bonjour,
en complément (pour IE !), il ne faut pas que l'id du div corresponde au name du select.
Donc quelque chose comme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
	<div id='div_ville' style='display:inline'>
<select name='ville' id='ville'>

Ta fonction Ajax (pour le innerHTML) devra donc faire référence au div_ville ...

A+

**SpaceFrog** · 21/01/2010, 16h29

oui un id doit être unique sur la page ...

**LadyArwen** · 22/01/2010, 13h53

OK j'ai corrigé cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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('div_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="div_ville" style="display:inline">
				<select name="ville" id="ville">
					<option value="-1">Saisissez le code postal</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>

Mais j'ai toujours le même résultat...

**E.Bzz** · 22/01/2010, 13h56

Ton paramètre ne doit pas être passé correctement car tu mélanges 2 syntaxes

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

codePostal = document.forms.a.codePostal.value;

Utilise soit

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

codePostal = document.forms['a'].elements['codePostal'].value;

soit

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

codePostal = document.a.codePostal.value;

La 1° est à privilégier

(de loin !)

A+

Le code postal met à jour la liste des villes (Ajax/PHP)

JavaScript

Vue hybride

Discussions similaires

Partager

Partager