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

Version imprimable

Voir 40 message(s) de cette discussion en une page

Je n'ai rien modifié au code javascript par rapport à la version que nous avons résolue vendredi.

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
 
<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;
}
 
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, le code postal
sel = document.getElementById('codePostal');
varCodePostal = document.forms['a'].elements['codePostal'].value;	
xhr.send("codePostal="+varCodePostal);
}
</script>

J'aimerais juste comprendre pourquoi ce code fonctionne :

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
code postal.php
<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>
<input type="text" name="verif" id="verif" value="Vérif"/>
</div>
</fieldset>
</form>

ajaxVilles.php
<?php
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>';
echo '<input type="text" name="verif" value="'. mysql_num_rows($res) .'"/>';
?>

et ne fonctionne plus si j'enlève la ligne en vert.
En principe, tout ce qui est entre les balises de div_ville devrait être remplacé par le contenu de ajaxVilles.php non ?
Peu importe si le ce dernier contenu ne contient pas les mêmes éléments de formulaires non ?

Ce serait déjà une première étape ! Après je dois rajouter un test dans ajaxVilles (voir post plus haut).

25/01/2010, 11h40
LadyArwen

Hello,

C'est à n'y rien comprendre, je viens de faire le test avec mon formulaire chronoforms (qui utilise le même ajaxVilles.php) et ça fonctionne.
Mon codePostal.php doit avoir un bug...
Peut-être une erreurs sur les id comme tu le suggères !
25/01/2010, 11h56
SpaceFrog

tu n'aurais pas un nom de ville avec apostrophe ou un truc du genre ...
tu peux recupérer le code html généré avec ffx après l'ajax ?

ça ressemble à une histoire de balises mal formée ...
à mon avis du au contenu des options ou des values ...
26/01/2010, 08h52
LadyArwen

Je ne sais pas, j'ai pas cherché plus loin, l'essentiel c'est que ça marche dans Joomla/Chronoforms !

Je suis passée au niveau suivant maintenant, je galère un peu mais je vais me triturer les méninges un peu plus avant de demander de l'aide maintenant que j'ai à peu près compris comment ça fonctionne !
Cette fois-ci je veux envoyer 3 valeurs le nom, prénom et la date de naissance d'un étudiant pour vérifier s'il n'existe pas déjà avant de l'inscrire.
Et s'il existe (ou s'il y en a plusieurs avec les mêmes données, ça peut arriver) laisser le choix à l'utilisateur (selectionner un des existants ou inscrire un nouveau)...
Ca va être un peu plus coton !!
++ et encore merci
10/06/2010, 00h57
piwozdiwect

LadyArwen merci pour ton script, j'en ai cherché un pendant longtemps, et le tien correspond exactement à ce que je voulais faire.

J'ai réussi à le faire fonctionner en local, et comme toi je veux l'intégrer à ChronoForms. Peux-tu m'indiquer la marche à suivre ?

J'ai bien mis le formulaire dans la case "Form HTML"
J'ai également mis le javascript dans la case "Form JavaScript"

J'ai vérifié le lien vers le fichier ajaxVilles.php

Je ne vois pas pourquoi ça ne marche pas. Quand j'affiche le code source de ma page, le javascript apparaît bien dans le <head>.
Quand je remplis le champ "code postal", la liste déroulante reste sur "Saisissez le code postal"...

Est-ce que j'ai oublié quelque chose ?
Merci pour votre aide.

Voir 40 message(s) de cette discussion en une page