AJAX liste déroulante

Résolu
Azraka Messages postés 252 Date d'inscription   Statut Membre Dernière intervention   -  
 christobal -
Bonjour,

J'essaie actuellement de faire la chose suivante : j'ai un input dans lequel le visiteur doit taper son code postal et une liste déroulante dans laquelle apparaissent les villes qui correspondent à ce code postal.
Je voudrais qu'à chaque chiffre tapé la liste déroulante s'adapte.

Les villes et les codes postal correspondant sont stockés dans une bdd mysql. Je pense qu'il me faudrait utiliser AJAX pour faire ça mais comment ?

Merci d'avance.
A voir également:

5 réponses

974_Vin's_974 Messages postés 547 Date d'inscription   Statut Membre Dernière intervention   102
 
Tu ne voudrais pas plutot faire selectionné le code postale oci ???

0
Azraka Messages postés 252 Date d'inscription   Statut Membre Dernière intervention   13
 
J'aurais préféré mais le boss insiste pour faire un truc comme ça, il trouve "plus agréable" (pas à programmer en tous cas)...
0
Psyk974 Messages postés 551 Date d'inscription   Statut Membre Dernière intervention   51
 
Bonjour,

Tu dois utiliser l'évènement "keydown" sur ton input pour appeler ta fonction javascript.

<input type="text" onkeydown="maj_a_jour_ville();"/>


Cette fonction va utiliser de l'AJAX qui se chargera de mettre à jour ton SELECT

Ensuite inspire toi cette page : https://www.creationdesiteinternet.fr
0
Azraka Messages postés 252 Date d'inscription   Statut Membre Dernière intervention   13
 
C'est ce que je faisais en fait (sur onkeyup mais bon on s'en fout) mais c'est au niveau de l'AJAX que je galérais.

Finalement je me suis énervé et dégouté de l'AJAX, donc je vais faire ça d'une autre manière qui devrait donner le même résultat.
Je mettrais mon source dès que j'aurais réussi.
0
974_Vin's_974 Messages postés 547 Date d'inscription   Statut Membre Dernière intervention   102
 
Ok si tu veux.. Sinon si tu veux g un "ptit" code pour lié deux liste déroulante.... En fonction du code postale les ville s'affiche ;)

0
Azraka Messages postés 252 Date d'inscription   Statut Membre Dernière intervention   13
 
C'est gentil mais j'ai quasiment terminé : ça marche très bien sous Firefox mais ça buggue sous IE (normal ^^). Voilà mon code si ça peut aider quelqu'un.
function remplir_liste(nbville)
{
  var _list = document.getElementById("villes");
	for( var i=0; i<=nbville; i++)   //on efface tous les éléments de la liste déroulante
	{
		document.getElementById("villes").options[document.getElementById("villes").length-1] = null;
	}
		
       for ( var i=0; i<=nbville; i++)  // puis on regénère la liste
       {
		var valeur=document.getElementById("ville_"+i).value.split('/');
		// si le code postal correspond à celui entré dans l'input "cp" alors on créé l'option
       if((valeur[1].substr(0,document.getElementById('cp').value.length)==document.getElementById('cp').value))
	{
		var _option=document.createElement("option");
					
		 _option.value=valeur[0];
		 _option.innerHTML=valeur[1]+" "+valeur[2];
		 _list.appendChild(_option);
	}
        }
		
	if (document.getElementById("villes").length == 0)  // la liste ne contient aucun résultat
	{
		var _option=document.createElement("option");
					
		_option.value="erreur";
		 _option.innerHTML="Votre code postal n'est pas valide";
		_list.appendChild(_option);
	}
}

Et si jamais quelqu'un peut me dire ce qui ne va pas avec IE ça m'aiderait pas mal. Il me renvoie l'erreur suivante : "Cet objet ne gère pas cette propriété ou cette méthode"... ça aide pas tellement à avancer mais j'ai pu remarqué que si je commente la ligne
document.getElementById("villes").options[document.getElementById("villes").length-1] = null;
il ne me met plus d'erreur. Vous auriez une idée pour régler ça ?

Voilà, je précise juste que les champs nommés "ville_"+i sont des champs hidden contenant les villes et codes postal des villes (séparés par un "/", d'où le split()).

(désolé pour la mise en forme du code, j'ai fait ce que j'ai pu)
0
Azraka Messages postés 252 Date d'inscription   Statut Membre Dernière intervention   13 > Azraka Messages postés 252 Date d'inscription   Statut Membre Dernière intervention  
 
Résolu, il fallait au final remplacer
document.getElementById("villes").options[document.getElementById("villes").length-1] = null;

par
document.getElementById("villes").options[nbville-i] = null;
0
974_Vin's_974 Messages postés 547 Date d'inscription   Statut Membre Dernière intervention   102
 
Cool alor !! super !!! ^^

;)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
christobal
 
salut 974_Vin's_974,
voila je n'y connais rien en ajax, mais on me demande d'afficher dans un select la ou les villes correspondantes a un cp (affichage en sortant du champ cp).
tout ce que j'ai c'est une db avec les villes et les cp.
aurais tu la gentillesse de me mettre a dispo ton code.
D'avance merci.
0