Liste de choix dépendant de plusieurs select

[elmanu13]

Salut vous tous !

Après avoir bien cherché (puisque je sais que cette question est récurrente), je n'ai trouvé nulle part de réponse à mon problème, d'ou mon post.
Je souhaite faire en AJAX une partie d'un formulaire qui pour le moment est en pur PHP (j'ai un niveau inexistant en JS), et fonctionne très bien.

Pour faire simple, j'ai un tableau de machines, de marques et modèles variés, qui sont installées chez plusieurs clients.
Dans mon formulaire, on choisi d'abord le client, ensuite la marque (filtrée avec le choix du client), puis le modèle (filtré avec le client ET la marque) et enfin le nom de la machine, filtré avec les trois paramètres d'avant.

voici mon extrait de code en php :

Code php :

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
 
<div class="bloc">
<label>Customer : </label>
   <select name="Customer" id="Customer" OnChange="this.form.submit()" />
   <option value="-1" <?php if(isset($Customer) && $Customer != -1){echo "selected";} ?> >--Choisir--</option>
<?php 
$res = mysql_query("SELECT COUNT( * ) AS Enregistrements , Customer FROM ToolBase GROUP BY Customer"); // on appelle la table pour extraire la liste des criteres
while( $val = mysql_fetch_array($res)) 
{
?>
   <option value="<?php echo $val['Customer']?>" <?php if ($Customer==$val['Customer']){echo " selected";} 
   ?>
   >
   <?php echo $val['Customer'] ?>
   </option>
 
<?php
}
   ?>
</select>
 
<label>Manufacturer : </label>
<select name="Manufacturer" id="Manufacturer" OnChange="this.form.submit()" />
   <option value="-1" <?php if(isset($Manufacturer) && $Manufacturer != -1){echo "selected";} ?> >--Choisir--</option>
<?php 
 
$res = mysql_query("SELECT COUNT( * ) AS Enregistrements , Manufacturer FROM ToolBase WHERE Customer='$Customer' GROUP BY Manufacturer"); // on appelle la table pour extraire la liste des Constructeurs, sans conditions
while( $val = mysql_fetch_array($res)) 
{
?>
   <option value="<?php echo $val['Manufacturer']?>" <?php if ($Manufacturer==$val['Manufacturer']){echo " selected";} 
   ?>
   >
   <?php echo $val['Manufacturer'] ?>
   </option>
<?php
   }?>
 
</select>
</div>
 
<div class="bloc">
<label>System Type : </label>
   <select name="System_type" id="System_type" OnChange="this.form.submit()" />
   <option value="-1" <?php if(isset($System_type) && $System_type != -1){echo "selected";} ?> >--Choisir--</option>
<?php 
// on appelle la table pour extraire la liste des systemes du constructeur choisi
 
$res = mysql_query("SELECT COUNT( * ) AS Enregistrements , System_type FROM ToolBase WHERE Customer='$Customer' AND Manufacturer='$Manufacturer'  GROUP BY System_type"); 
while( $val = mysql_fetch_array($res)) 
{
?>
   <option value="<?php echo $val['System_type']?>" <?php if ($System_type==$val['System_type']){echo " selected";} 
   ?>
   >
   <?php echo $val['System_type'] ?>
   </option>
<?php
   }?>
 
</select>
 
 
<label>Tool Name : </label>
   <select name="Tool_name" id="Tool_name" OnChange="this.form.submit()" />
   <option value="-1" <?php if(isset($Tool_name) && $Tool_name != -1){echo "selected";} ?> >--Choisir--</option>
<?php 
// on appelle la table pour extraire la liste des tools finale
 
$res = mysql_query("SELECT COUNT( * ) AS Enregistrements , Tool_name FROM ToolBase WHERE Customer='$Customer' AND Manufacturer='$Manufacturer'AND System_type='$System_type' GROUP BY Tool_name"); 
while( $val = mysql_fetch_array($res)) 
{
?>
   <option value="<?php echo $val['Tool_name']?>" <?php if ($Tool_name==$val['Tool_name']){echo " selected";} 
   ?>
   >
   <?php echo $val['Tool_name'] ?>
   </option>
<?php
   }?>
 
</select>
</div>

J'ai essayé d'adapter le très bon Tuto de Loïc Laffont, mais sans succès, puisqu'il ne passe que le choix de la liste N-1, et pas les autres choix...

Comment faire pour récupérer dans mon fichier RetourPHP.php les choix des 2 ou 3 select précédents ??

Merci d'avance pour vos lumières !!

[andry.aime]

Bonsoir,

Je ne vois aucune fonction javascript moi, tu faits un submit à chaque onchange. Je ne vois pas trop le rapport avec AJAX

A+.

[bewidia]

Bonjour,

il faudrait déjà penser à séparer un peu le code, parce que le traitement base de données au beau milieu de la vue html, c'est un peu sale.

Ensuite ton problème n'est pas spécialement difficile à résoudre :
- ton premier <select> dédié aux clients est peuplé au chargement de la page
- tes autres <select> seront présent, mais vides (sans <option>)

sur le onChange de ton <select> dédié aux clients, tu fais un appel Ajax vers une méthode à laquelle tu fournis l'id du client. Le serveur le traite et construit une liste de marques qui sera insérée dans ton second <select>.

sur le onChange du second <select> dédié aux marques, tu fais un autre appel Ajax vers une méthode qui traitement l'id de la marque et du client, tu fais une requete contenant les 2 coté serveurs et tu peuples le 3è <select>

et tu fais de même jusqu'au choix de la machine.

[elmanu13]

Envoyé par andry.aime

Bonsoir,

Je ne vois aucune fonction javascript moi, tu faits un submit à chaque onchange. Je ne vois pas trop le rapport avec AJAX

A+.

J'ai précisé que c'était mon code existant, c'est à dire en pur PHP...que je souhaite améliorer avec de l'Ajax pour éviter de recharger ma page à chaque changement dans un select..

[elmanu13]

Envoyé par bewidia

Bonjour,

il faudrait déjà penser à séparer un peu le code, parce que le traitement base de données au beau milieu de la vue html, c'est un peu sale.

Ensuite ton problème n'est pas spécialement difficile à résoudre :
- ton premier <select> dédié aux clients est peuplé au chargement de la page
- tes autres <select> seront présent, mais vides (sans <option>)

sur le onChange de ton <select> dédié aux clients, tu fais un appel Ajax vers une méthode à laquelle tu fournis l'id du client. Le serveur le traite et construit une liste de marques qui sera insérée dans ton second <select>.

sur le onChange du second <select> dédié aux marques, tu fais un autre appel Ajax vers une méthode qui traitement l'id de la marque et du client, tu fais une requete contenant les 2 coté serveurs et tu peuples le 3è <select>

et tu fais de même jusqu'au choix de la machine.

Merci pour la réponse, mais ça, c'est le principe (que j'avais bien en tête).
Ce qu'il me manque, c'est la manière de le programmer, sachant que j'ai des connaissances quasi-nulles en JS...ma méthode consiste à customiser du code existant pour l'adapter à mon besoin tout en comprenant petit à petit comment ça fonctionne (formation sur le tas, comme on dit ;-))

La vraie question, c'est comment passer 2 id (ou 3, ou 4) en ajax.

[andry.aime]

Envoyé par elmanu13

Ce qu'il me manque, c'est la manière de le programmer, sachant que j'ai des connaissances quasi-nulles en JS...ma méthode consiste à customiser du code existant pour l'adapter à mon besoin tout en comprenant petit à petit comment ça fonctionne (formation sur le tas, comme on dit ;-))

Commence par lire un tutoriel Javascript, puis regarde ce tutoriel AJAX (Tu trouveras comment lier des listes).

A+.

[bewidia]

Tu peux passer autant de paramètres que tu veux en Ajax, c'est comme un formulaire que tu soumets à un script serveur.

Le plus synthétique, c'est de faire pour chaque select une méthode JS et PHP.

Tu dis ne pas bien connaitre le JS donc ce que je te conseille n'est peut-être pas l'idéal pour l'apprendre, mais jQuery permet de franchement simplifier l'accès aux éléments DOM et les requêtes Ajax.

en HTML

Code :

1
2
3
4
 
<select id="clients" onChange="changeClient()">[...]</select>
<select id="marques" on Change="changeMarques()"></select>
<select id="modeles" on Change="changeModeles()"></select>

en JS

Code :

1
2
3
4
5
6
7
8
9
10
11
12
 
function changeClient(){
scriptServeur="/serveur/script/getMarques.php?idClient="+document.getElementById("clients").value
 
//appel serveur et recup reponse
}
 
function changeMarques(){
scriptServeur="/serveur/script/getModeles.php?idClient="+document.getElementById("clients").value+"&idMarque="+document.getElementById("marques").value
 
//appel serveur et recup reponse
}

les appels AJAX sont au choix du POST ou du GET, coté serveur ce sont de simples scripts qui reçoivent les $_POST / $_GET, font le traitement qui va bien et répondent soit en html (dans ton cas) soit en xml (ou mieux de l'xml transformé en html avec xslt :p)

Bon courage

[elmanu13]

Envoyé par andry.aime

Commence par lire un tutoriel Javascript, puis regarde ce tutoriel AJAX (Tu trouveras comment lier des listes).

A+.

J'ai commencé par ça, et j'ai déjà appliqué le tuto que tu me conseilles sur une partie de mon site qui n'avait besoin que de 2 selects, l'un dépendant de l'autre.
A partir de 3 selects, le 3e dépendant des 2 autres, ça se complexifie (un peu pour les pros, beaucoup pour moi !), et la réponse de Bewidia va beaucoup m'aider !!

Je vous tiens au courant quand c'est terminé, merci en tout cas !

[elmanu13]

Bon, forcément, sans formation de base en JS, je galère un peu, mais je progresse.
J'ai compris le principe, mais j'ai une double difficulté à résoudre :
1-une série de 4 SELECT inter-dépendants les un des autres en cascade (le contenu du 4e dépend du choix des 3 autres et pas uniquement du dernier). Je dois donc me bidouiller une fonction qui fait passer plusieurs paramètres, ça me semble faisable avec un minimum de recherche.
Une fois ces 4 select remplis, on envoie le tout vers une Database.

2-l'utilisateur doit pouvoir REVENIR sur ce formulaire, RETROUVER les choix qu'il y a fait (et qui ont donc été sauvés dans une base de données), et pouvoir les MODIFIER.
Il faut donc que ma fonction, en plus de pouvoir passer plusieurs paramètres, puisse récupérer les valeurs de ces paramètres quand on est en mode modif (un flag en $_GET) pour ajouter la balise "selected" au choix extrait de la database.

Avant de me lancer vers une méthode qui va ensuite me bloquer pour le point 2, si vous avez des conseils je suis preneur !!

Merci d'avance (et je vais chercher une formation JS rapidos ;-))

[bewidia]

Si c'est un nouvel enregistrement, tes select seront vides à part le premier.
Si c'est une modification, en fonction de ce qu'il y a de sauvegardé dans ton enregistrement, tu peupleras directement les 4 select avec les valeurs possibles disponibles et un selected=selected sur la valeur de l'enregistrement.

Le fonctionnement du javascript reste le même : il réagit a des onChange sur les select