Création d'une liste d'éléments liés à un id input

Création d'une liste d'éléments liés à un id input - Javascript/Node.js - Programmation

Marsh Posté le 06-01-2015 à 07:05:45    

Bonjour,
Après avoir passé des heures à essayer toutes les solutions que je connais et celles que je trouve sur les forums, je fais appel à tous les spécialistes de Hardware.
Je vous explique mon projet  (en PHP):

 

Je saisis une ville dans un champ input.
Une liste de villes correspondant à ma frappe se déroule en dessous de ce champs input.
Ensuite, quand je clique sur une ville de cette liste, elle doit s'inscrire dans le champ input.
Ca fonctionne, les éléments apparaissent bien comme des liens. Mais quand je clique dessus, mon champ input ne reçoit pas le nom de la ville.

 

Techniquement :
Mon formulaire simplifié  

Code :
  1. <form action="recherche.php" method="POST">
  2.     <th><input type="text" id="id_handler" name="ville" value="'.$oldville.'"  placeholder="entrer la ville'" onkeyup="vachercher();";onblur="this.value=this.value.toLowerCase();" style="text-transform:capitalize;" />';
  3.     echo '</th><tr /><td><div id="div_handler"></div></td>
  4. </form>
 

j'utilise XMLHttpRequest pour lancer la page PREAFF.php qui accède à la base de données et qui renvoit les éléments de la liste.
Dans cette page
- j'utilise un innerHTML qui affiche la liste.

Code :
  1. while ($res = mysql_fetch_row($retselect))
  2.                 {
  3.                 $VIlle = $res[0];
  4.                 $x="id_handler";
  5.                 // transforme chaque élément de la liste en lien pour ensuite transférer le contenu de la variable $VIlle dans le champs input.
  6.                 // $x est le handler défini par l'id de input
  7.                 $text.= '<a href="javascript:putininput('.$x.','.$VIlle.');">'.$VIlle.'</a><br>';    // bloody call qui ne fonctionne pas
  8.                 }
  9.             // affiche correctement les éléments de la liste
  10.             echo "var oDiv = document.getElementById('div_handler').innerHTML='".$text."';";


j'ai essayé d'autres solutions qui ne donnent rien comme :

Code :
  1. $text.= '<a onclick="javascript:putininput('.$x.','.$VIlle.');">'.$VIlle.'</a><br>';

 // ne fonctionne pas non plus
La fonction putininput se trouve dans la page de mon formulaire et se présente comme ça :

Code :
  1. function putininput(id,ville)
  2.     {
  3.     var _id = id;
  4.     var _ville = ville;
  5.     alert(_ville);
  6.     document.getElementById(id).value=_ville;
  7.     }
 

Quand on clique sur un élément lien de la liste, la fonction putininput ne répond pas.
Merci infiniment pour votre aide.

 


Message édité par gmalatet le 07-01-2015 à 02:18:21
Reply

Marsh Posté le 06-01-2015 à 07:05:45   

Reply

Marsh Posté le 07-01-2015 à 11:53:19    

Ca fonctionne maintenant en supprimant la fonction putininput() et en remplaçant l'appel par  

Code :
  1. $text.= '<a onclick=document.getElementById(\"'.$hang_id.'\" ).value="'.$VIlle.'">'.$VIlle.'</a><br>';


Le problème est que ça fonctionne pour les noms de ville simples mais ne fonctionne pas s'il y a des espaces dans le noms de ville composés.
 
Pouvez-vous m'aider ?

Reply

Marsh Posté le 07-01-2015 à 22:13:49    

Bonjour,
 
 
Pour le premier problème, je pense que ça vient du innerHTML, en passant par du createElement ça devrait mieux se passer.
 
Pour le deuxième problème, difficile de répondre avec si peu d'éléments, il faudrait pouvoir voir le code en entier de chaque page. Surtout que là je ne comprends pas tout du côté de la requête ajax. Ce qui est récupéré c'est tout une chaîne javascript générée par la petite partie php qui nous ai proposée?

Reply

Marsh Posté le 08-01-2015 à 10:56:17    

Bonjour,
 
Merci MaybeEijOrNot pour ton attention.
 
Le premier problème est réglé comme indiqué dans mon commentaire avec la solution indiquée.
 
Pour le second, je n'ai pas de solution, alors j'ai contourné le problème en remplaçant les espaces par des underscores. Pas très fun mais ça fonctionne.
 
Ca reste à creuser, néanmoins.
 

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed