[JS-PHP] Liste déroulante générée dynamiquement

Version imprimable

Sur un formulaire, je dispose d'un champ texte, suite à la valeur saisie dans ce champ et suite au déclenchement d'un événement, une liste déroulante doit être généré automatiquement. Je ne sais pas si l'appel que je fait pour entrer dans la fonction est correcte. De plus le paramètre que doit lui passer doit être la valeur contenue dans le champ texte et non pas une valeur en dur comme j'ai fait dans l'exemple.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 echo "<input name='txtcodepostal' type='text' id='txtcodepostal' size='5' maxlength='5' value =$valcodepostal onblur='requetecommune(71570)'>"; //document.getElementById('txtcodepostal').value; function requetecommune($cp) { if ($cp !="") { $requetelistecommune="SELECT * FROM COMMUNE WHERE CPCOMMUNET= '$cp'"; } else { $requetelistecommune="SELECT * FROM COMMUNE"; } echo "<select name='lstcommune'>"; $reqcommune= mysql_query($requetelistecommune); while($data = mysql_fetch_array($reqcommune)) { if ($data['NUMCOMMUNI']==$valnumerocommune) { echo "<option selected value=".$data['NUMCOMMUNI'].">".$data['NOMCOMMUNT']."</option>"; } else { echo "<option value=".$data['NUMCOMMUNI'].">".$data['NOMCOMMUNT']."</option>"; } } echo '</select>'; }

Voici un exemple d'affichage de couleurs associé à un produit.
Tu peux t'en inspirer :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
//On recupère les couleurs et on les stock dans un tableau
$requetecoul=mysql_db_query($base,"select * from ligne_couleur where id_produit='$id'",$db_link);
$numcoul=mysql_num_rows($requetecoul);
$indcoul=0;
while($indcoul<$numcoul)
{
 $couleur[$indcoul] = mysql_result($requetecoul,$indcoul,"nom_couleur");
 $indcoul++;
}
 
// On génère le menu déroulant
echo"<select name=\"couleur\" id=\"couleur\"><option selected value=\"Couleur non choisie\">Couleurs disponibles ...</option>";
$idnomcoul=0;
while($idnomcoul<count($nomcouleur))
{
 echo"<option value=\"$couleur[$idnomcoul]\">> $couleur[$idnomcoul]</option>";
 $idnomcoul++;
}
echo"</select>";

10/09/2007, 14h02
Sytchev3

L'exemple que tu m'as donné ne correspond pas à ce que je souhaites faire puisque je doit récupérer la valeur du champ texte (code en javascript) et uiliser cette valeur dans une requête pour charger la liste déroulante (code en PHP)
10/09/2007, 14h16
calitom
Bah si.
Dans mon exemple $id est une variable php. Donc cette variable peut correspondre à ce que tu veux!

Si tu dis que $id prend la valeur d'un champ d'un formulaire ca marche!
Par exemple:
Code:

1 2 $id=$_GET['txtcodepostal'];
10/09/2007, 14h19
Sytchev3
Oui mais en ce qui me concerne, la valeur saisie dans mon champ doit être récupérée en javascript puisque je ne veux pas poster le formulaire. Je doit donc utiliser cette instruction :
Code:

1 2 document.getElementById('txtcodepostal').value;
Mais je ne sais pas comment affecter cette valeur à une variable php.
10/09/2007, 14h22
calitom

ah oui alors la ca ne marche pas! php est aussi executé coté serveur...
Je n'avais pas compris que tu ne voulais pas poster ton formulaire...

Tu peux donner plus de détail?
Genre quel évenement va déclencher la génération de ta liste déroulante?...
10/09/2007, 14h26
Sytchev3

Sur l'événement ONBLUR (perte du focus) de mon champ texte je souhaites récupérer la valeur saisie avec l'instruction que j'ai donné au dessus puis à l'aide d'une fonction afficher ma liste déroulante en fonction de la valeur que j'ai saisie. Comme je le disais je ne sais pas comment initialiser une variable php avec du code en javascript ou alors ce n'est pas comme cela qu'l faut faire peut être. regarde le code de mon 1er POST tu comprendra surement mieux ce que je souhaite faire.

Tu dois faire une fonction javascript:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
<?
function construisTableauJS($tableauPHP, $nomTableauJS)
{
   echo $nomTableauJS." = new Array();";
   for($i = 0; $i < count($tableauPHP); $i++){
      if(!is_array($tableauPHP[$i])){
         echo $nomTableauJS."[".$i."] = '".$tableauPHP[$i]."';";
      }
      else{
         construisTableauJS($tableauPHP[$i], $nomTableauJS."[".$i."]");
      }
   }
   return;
}
 
//La tu fais une requete qui selectionne toutes les communes et leur code postal
 
SELECT * FROM COMMUNE
 
//Tu recuperes les resultats que tu met dans un tableau associatif
//tu boucles sur tes resultats $cp=code postal et $commune=commune
 
$tableau_commune[$cp]=$commune;
 
//Ensuite tu convertis ton tableau php en javascript avec la fonction au dessus:
 
echo "<script type='text/javascript'>";
construisTableauJS($tableau_commune, "tableau_commune_js");
echo "</script> ";
 
?>
//La tu peux transmettre avec l'évenement onblur le tableau associatif au format js:
 
onBlur="genere_liste(tableau_commune_js);"
 
<script language=JavaScript>
function genere_liste(tableau_cp)
{
 var cp_cherche=document.getElementById('txtcodepostal').value;
 //la tu cherche a l'indice du tableau
 var commune=tableau_cp[cp_cherche];
 //et la variable commune correspond au code postal de txtcodepostal.
 //ensuite si tu veux ajouter dans une liste détoulante, tu utilises new Option
}
</script>

Je te met des exemple de modification de select en javascript
Ici des tailles sont stockées dans un tableau, et je boucle sur le tableau pour créer un menu déroulant avec toutes les tailles:

Code:

1
2
3
4
5
6
 
document.getElementById('select').options[0]=new Option("--Tailles--");
for (i=1; i<taille_produits_js[id_tableau].length+1; i++)
{
 document.getElementById('select').options[i]=new Option(taille_produits_js[id_tableau][i-1]);
}

newOption(valeur affichée entre les balises option, value de l'option)

J'utilise ton code qui me parait très très bien:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
<? 
 
 
              echo "<input name='txtcodepostal' type='text' id='txtcodepostal' size='5' maxlength='5' value =$valcodepostal onblur='genere_liste(tableaucommunejs)'>";
 
?>
              </font></td>
            <td><font face="Verdana, Arial, Helvetica, sans-serif">
 
<?
 
function construisTableauJS($tableauPHP, $nomTableauJS)
{
   echo $nomTableauJS." = new Array();";
   for($i = 0; $i < count($tableauPHP); $i++){
      if(!is_array($tableauPHP[$i])){
         echo $nomTableauJS."[".$i."] = '".$tableauPHP[$i]."';";
      }
      else{
         construisTableauJS($tableauPHP[$i], $nomTableauJS."[".$i."]");
      }
   }
   return;
}
 
$requetecommune=mysql_query("SELECT * FROM COMMUNE");
 
$tableaucommune=array();
 
while($data = mysql_fetch_array($requetecommune))
{
	$cp=$data['CPCOMMUNET'];
	$commune=$data['NOMCOMMUNT'];
	$tableaucommune[$cp]=$commune;
 
}
 
echo "<script language='JavaScript' type='text/JavaScript'>";
construisTableauJS($tableaucommune, "tableaucommunejs");
echo "</script>";
 
?>
 
<script language=JavaScript>
function genere_liste(tableau_cp)
{
 var cp_cherche=document.getElementById('txtcodepostal').value;
 
 var commune=tableau_cp[cp_cherche];
 
}
</script>

Mais je ne vois pas trop comment charger la liste déroulante en fonction du code postal que j'ai saisie peux tu m'aider

Il faut que tu crées ton menu déroulant dans ton code:

Code:

1
2
3
 
<select name='lstcommune' id='lstcommune'>
</select>

Ensuite, dans ta fonction javascript, tu ajoutes au menu déroulant les options correspondant aux communes:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<script language=JavaScript>
function genere_liste(tableau_cp)
{
 //la tu recuperes le code postal saisi dans le champ texte
 var cp_cherche=document.getElementById('txtcodepostal').value;
 
 //la tu recuperes la commune associée à ce code postal
 var commune=tableau_cp[cp_cherche];
 
//ensuite tu ajoute au menu déroulant la commune
document.getElementById('lstcommune').options[0]=new Option(commune);
}
</script>

10/09/2007, 18h30
Sytchev3

Le problème c'est que ce code ne marche pas dans mon cas enfin je crois puisque pour un code postal il peut y avoir plusieurs communes. Comment modifier le code pour qu'il réponde à ce que je souhaite faire. Je te remercie encore pour ton aide.

a ce moment la, tu fais un tableau multidimensionnel avec le code postal :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
$requetecommune=mysql_query("SELECT * FROM COMMUNE");
 
$tableaucommune=array();
 
while($data = mysql_fetch_array($requetecommune))
{
	$cp=$data['CPCOMMUNET'];
	$commune=$data['NOMCOMMUNT'];
 
        //un tableau comme ci dessous va créer un tableau par code postal, et pour chaque code postal il y aura un tableau des communes de ce code postal de 0 à nb_commune_code_postal
	$tableaucommune[$cp][]=$commune;
 
}
 
echo "<script language='JavaScript' type='text/JavaScript'>";
construisTableauJS($tableaucommune, "tableaucommunejs");
echo "</script>";
 
<script language=JavaScript>
function genere_liste(tableau_cp)
{
 //la tu recuperes le code postal saisi dans le champ texte
 var cp_cherche=document.getElementById('txtcodepostal').value;
 
 //la tu recuperes les communes associées à ce code postal
 var i;
 var j=0; 
 for(i=0;i<tableau_cp[cp_cherche].length;i++)
 {
   //tu ajoute au menu déroulant la commune
   document.getElementById('lstcommune').options[i]=new Option(tableau[cp_cherche][i]);
 }
 
}
</script>

Ca devrait être pas trop loin de ce que tu cherches à faire.

Tient moi au courant si ca marche ou pas.

18/09/2007, 17h43
Sytchev3

Pour le moment je n'ai pas encore testé avec ta solution puisque je POST le formulaire si je perd le focus de mon champ texte. Cette solution n'est pas terrible mais pour le moment ça tourne. Je vais essayé avec ta solution dès que possible mais je me disais que j'allais générer un nombre de tableau assez important : le nombre de tableau sera égal au nombre de code postaux différent. Alors j'espère que cela ne va pas trop ralentir le traitement. Qu'en penses tu ???