Ecrire dans une liste deroulante (javascript)

Résolu/Fermé
florian - Modifié par florian le 15/09/2011 à 15:51
 florian - 16 sept. 2011 à 11:23
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!!!!

A voir également:

3 réponses

Giorgiolino Messages postés 253 Date d'inscription vendredi 15 mai 2009 Statut Contributeur Dernière intervention 2 mars 2015 52
15 sept. 2011 à 19:08
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
0
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
0
Giorgiolino Messages postés 253 Date d'inscription vendredi 15 mai 2009 Statut Contributeur Dernière intervention 2 mars 2015 52
Modifié par Giorgiolino le 16/09/2011 à 10:40
[...] 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++ ) 
...
0
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
0