Ecrire dans une liste deroulante (javascript)

[Résolu/Fermé]
Signaler
-
 florian -
Bonjour

je poste ce message car je rencontre un problème, j'essaye de faire un formulaire qui soit un peu sophistiqué mais étant donné que je commence tout juste le java-script ce n'est pas très facile.


je récupère une liste de ville, lorsqu'un utilisateurs entre un code postal dans mon formulaire, cette liste de ville est stocké dans un array et j'aimerais me servir de cet array pour remplir une liste déroulante.

voici la partie de formulaire concerné :

<form action="inscriptions_record.php" method="post" name="formulaire"> 

<label for="cp">cp : </label> 
<input type="text" name="cp" onkeyup="verifCp(this)" onblur="retrieve_town(this.value)"  /><span id="condition_cp"><br /> 
          
<select name="ville" size="1"></select> 
          
<input type="submit" /> 
</form> 



Voici les fonction javascript dont je me sert :

function file(fichier) 
     { 
     if(window.XMLHttpRequest) // FIREFOX 
          xhr_object = new XMLHttpRequest(); 
     else if(window.ActiveXObject) // IE 
          xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); 
     else 
          return(false); 
     xhr_object.open("GET", fichier, false); 
     xhr_object.send(null); 
     if(xhr_object.readyState == 4) return(xhr_object.responseText); 
     else return(false); 
     } 

function verifCp(cp) 
{ 
  var regex=/^[0-9]/ ; 
  if(cp.length < 1 || cp.length > 5 || !regex.test(cp.value)) 
  { 
   surligne(cp, true); 
   if(cp.length < 1) 
   { 
    document.getElementById('condition_cp').innerHTML="Ce champ est vide"; 
   } 
   else if(!regex.test(cp.value)) 
   { 
    document.getElementById('condition_cp').innerHTML="Ce champ doit contenir que des chiffre"; 
   }  
   else if(cp.value.length != 5) 
   { 
    document.getElementById('condition_cp').innerHTML="Ce champ doit contenir cinq chiffres"; 
   } 
   } 
   else 
   { 
  surligne(cp, false); 
  document.getElementById('condition_cp').innerHTML=""; 
   } 
} 

function retrieve_town(cp) 
{ 
  
 if(cp.length == 5) 
 { 
   
  texte=file('./retrieve_town.php?cp='+escape(cp)); 
   
  var tableau=texte.split(";"); 
  document.getElementById('condition_cp').innerHTML='pipiu' 
  var l=document.getElementById("ville"); 
   
  for ( var n=0;n<tableau.length;n++ ) 
        {    l.length++; 
            l.options[l.length-1].text=tableau[n]; 
        } 
 } 
} 


Merci beaucoup par avance pour vôtre aide!!!!

3 réponses

Messages postés
251
Date d'inscription
vendredi 15 mai 2009
Statut
Contributeur
Dernière intervention
2 mars 2015
52
Bonjour,

une remarque préliminaire :
Ta déclaration
 l=document.getElementById("ville"); 

ne renverra pas le résultat voulu car tu as spécifié name="ville" et non pas id="ville" dans
<select name="ville" size="1"></select>
.
Ensuite en partant du principe que ton script php renvoie une chaîne de la forme
ville1;ville2;ville3

ton code devrait fonctionner comme tu le souhaites (testé chez moi).

Si ton problème est de savoir comme obtenir une chaîne de ce type (ville1;ville2;etc) à partir d'un array php, il suffit de t'y prendre comme suit
$tonarray = array('ville1', "ville2", "ville3");
$tachaine = implode($tonarray, ';');  // création de ta chaîn
echo $tachaine; // affichage de la chaine comme réponse du script
Bonjour giorgiolino

tout d'abord merci de m'avoir répondu et ensuite merci, mon problème venait juste du fait, que le <select> est un name à la place de l'id.


J'ai un autre problème je me permet de vous solliciter encore, comment vider cette liste entre deux requêtes ?

Dans le sens ou si l' utilisateur entre un code postal, les villes s' affichés mais si il efface le premier et en entre un deuxième, les villes qui était inscrite avant reste affichées et les autres apparaissent en dessous.

merci d'avance
Messages postés
251
Date d'inscription
vendredi 15 mai 2009
Statut
Contributeur
Dernière intervention
2 mars 2015
52
[...] comment vider cette liste entre deux requêtes ?

Il suffit pour cela de vider la liste des options entre deux appels.
En utilisant par exemple cette fonction :

function clearOptions (element) { 
   element.options.length = 0; 
}


Il suffira alors d'appeler cette fonction avant de rajouter les nouvelles options :
...
document.getElementById('condition_cp').innerHTML='pipiu'; 
var l=document.getElementById("ville");  
   
clearOptions(l);  // Suppression des éventuelles options déjà présentes 

for ( var n=0;n<tableau.length;n++ ) 
...
Merci beaucoup tout simplement génial, je n'avais pas penser, à modifier le nombre d'élément du select à 0 pour nettoyer la liste.


genial