AJAX liste déroulante
Résolu
Azraka
Messages postés
252
Date d'inscription
Statut
Membre
Dernière intervention
-
christobal -
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.
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:
- AJAX liste déroulante
- Liste déroulante excel - Guide
- Liste déroulante en cascade - Guide
- Liste déroulante google sheet - Accueil - Guide bureautique
- Liste code ascii - Guide
- Site dangereux liste - Guide
5 réponses
Tu ne voudrais pas plutot faire selectionné le code postale oci ???
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)...
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
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
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 ;)
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.
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
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)
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)
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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.
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.