redirection page grace aux listes déroulantes

Eléphant du PHP | 388 Messages

05 mai 2010, 17:12

bonjour a tous,

J'utilise 3 liste déroulante liées entre eux, je souhaiterai suivant le choix de l'utilisateur celui ci soit redirigé vers la page désirés.

Exemple :
Dans la liste déroulante 1 je choisie Pays de la loire.
dans la liste 2 je choisi véhicules
et dans la liste 3 je choisi voiture.

Je souhaiterai que sa redirige vers la page voiture des pays de la Loire est ce possible ?
Comment doit-je procéder ?.

car j'avait essayer le javascript pour un seul menu déroulant qui redirivers vers une page cela marche.
Mais avec trois menu suivant le choix 8-|

Ou faire une sorte de filtre j'ajouterai un bouton et si
liste 1 = valeur
liste 2 = valeur
liste 3 = valeur alors redirection vers page

Eléphant du PHP | 428 Messages

05 mai 2010, 22:15

En fait, le truc c'est que tes listes en réalité ne sont pas liées entre elles*. Du moins, tu n'as pas besoin de les lier*.
Pour faciliter les choses et éviter un lourd code pour l'affichage dynamique lié*, remplis plutôt tes listes normalement (une par une). Ensuite, mets les listes 2 et 3 en "disabled" et actives les au fur et à mesure avec javascript.

Une autre solution évitant le "disabled" existe en se basant sur le css mais je laisse le soins aux autres de répondre à ce sujet avec un exemple. Voir : javascript-ajax/tester-les-champs-activ ... ml#p322368


*Affichage dynamique lié : Une liste charge le contenu de l'autre en fonction de l'élément choisi.
Exemple : Liste 1 , je choisi la ville de Paris => Liste 2 , affiche le code ou les codes postaux correspondants à la ville.


-----------------------------------------------------------------------------------------------------------

Principe de base en 6 points :

1. Créer un formulaire : <form ...></form> contenant les 3 listes déroulantes avec leurs données respectives.
==> <form...>liste1 | liste2 | liste3</form>

2. Mettre la liste déroulante 2 et 3 en "disabled" => <select name="xxxxx" disabled=true>

3. Créer une fonction javascript.
La fonction se chargera via Javascript OnChange (dans la liste 1) ce qui aura pour but d'activer la liste 2 lors de la sélection d'un élément.

4. Normalement si tu fais correctement ta fonction javascript, tu réutilises la première fonction avec un autre paramètre.
La fonction se chargera via Javascript OnChange (dans la liste 2) ce qui aura pour but d'activer la liste 3 lors de la sélection d'un élément.

EXEMPLES :
==> OnChange sur liste 1 (activera liste 2) : <SELECT name="xx" id="yy" onchange="MaFonction_activation_liste(id_liste2);">
==> OnChange sur liste 2 (activera liste 3) : <SELECT name="xx" id="yy" onchange="MaFonction_activation_liste(id_liste3);">
Bien sûr, il faudra que tu n'oublies pas de mettre l'id au niveau de tes <select>
Comme ci-dessus, mais avec d'autres valeurs différentes par select => donc des valeurs unique par liste déroulante au niveau de ID=...

EXEMPLE FONCTION JAVASCRIPT (à modifier et à corriger avec l'aide des "spécialistes javascript" de ce forum) :
==> javascript-ajax/tester-les-champs-activ ... 52684.html
==> document.getElementById("mySELECTlist").disabled = true; (ou false)

5. Une fois que l'utilisateur à choisi l'élément dans la liste 3.
On utilisera le javascript OnChange pour envoyer le formulaire contenant les 3 choix.

==> <select name="xxxxxxxxxxxxxx" id="yyyyyyyyyyy" onChange='javascript:this.form.submit();'>


6. On récupère les valeurs via $_POST et on les traites en fonction des choix dans les listes ...



Essaye de pondre une base et on t'aidera dès lors où tu rencontre un problème ...

a+ ;) :D