formulaire GET SELECT NAME

Version imprimable

bonjour à tous je suis plutot débutant donc je tenterai d'être clair:
sur la meme page j'ai :
- un menu déroulant
- des liens sur des images vers des pages différentes.

ce que je charche à faire : en fonction de la valeur sélectionnée dans le menu déroulant et l'image sur laquelle je clique, afficher la page requise et ajoutr à l'URL la valeur sélectionnée dans le menu déroulant

donc si je clique sur la premiere image et que j'ai sélectionné la première valeur du menu déroulant, je serai dirigé vers le liens suivant :
ecart.php?rayon=1

voici les parties de mon code
merci d'avance pour votre aide!!
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <div id="corps"> <form action="menu.php" method="get"> <label for="rayon"><strong>Sélectionne ton rayon : </strong></label> <select name="rayon" id="rayon"> <option value="1">MATERIAUX</option> <option value="2">MENUISERIE</option> <option value="3">ELECTRICITE-PLOMBERIE</option> <option value="4" selected="selected">OUTILLAGE</option> <option value="5">RANGEMENT-CUISINE</option> <option value="6">SOL ET CARRELAGE MURAL</option> <option value="7">SANITAIRE</option> <option value="8">CONFORT ET ENERGIES RENOUVELABLES</option> <option value="9">JARDIN</option> <option value="10">QUINCAILLERIE</option> <option value="11">PEINTURE</option> <option value="12">DECORATION</option> <option value="13">ECLAIRAGE</option> </select> </form> <a href="ecart.php"><img src="images/ECART.png" /></a><a href="2080.php"><img src="images/2080.png" /></a><a href="plusgrossesvaleurs.php"><img src="images/20PLUSGROS.png" /></a>

29/04/2009, 11h45
fab76000

Salut, tout d'abord il y a des règles de forum, dont les balises code font partie (lorsque l'on colle son code)
Ensuite, tel que tu as commencé c'est impossible, il faut nécessairement que toutes les informations que tu veux récupérer soient dans un formulaire.
Je pense que ta logique de conception est à revoir.
29/04/2009, 11h47
ThomasR
Citation:

Envoyé par fab76000

Salut, tout d'abord il y a des règles de forum, dont les balises code font partie (lorsque l'on colle son code)
Ensuite, tel que tu as commencé c'est impossible, il faut nécessairement que toutes les informations que tu veux récupérer soient dans un formulaire.
Je pense que ta logique de conception est à revoir.

Au contraire c'est tout a fait possible :
Code:

1 2 3 4 if(isset($_POST['rayon'])){ header('location: ecart.php?rayon='.$_POST['rayon']); }
Sinon tu peux poster ton formulaire par méthode GET sur la page ecart.php.
29/04/2009, 11h56
fab76000

Permet moi d'en douter ThomasR, parce que ce que tu propose ne correspond pas à son besoin (d'après ma compréhension).
il souhaite selectionner uen valeur dans la liste (OK) sauf qu'il ne parle pas de validation de formulaire...
Je crois qu'il veut que l'on puisse selectionner un choix dans la liste (sans valiser quoique se soit) puis qu'il clik sur une image (en voulant que le choix soir répercuté dans l'url de l'image!!!!!!!!!) Tel que je l'ai compris, et si je me suis bien exprimé :? c'est très mal conçu non??
29/04/2009, 12h02
docteurdorian

tout d'abord merci pour votre rapidité
en effet fab je pense que tu as bien résumé mais il me semblait qu'il était possible de mettre une propriété "on change" sur le menu déroulant qui m'évitait de devoir valider le formulaire.
sinon que me proposes tu pour revoir la conception?

merci
29/04/2009, 12h05
fab76000

Ah peut être qu'avec le javascript mais je suis pas un expert en JS, a voir dans ce cas.
Sinon au niveau de la conception cela dépent de tes besoins, à toi de voir comment tu peux organiser l'ergonomie pour l'utilisateur.
Sinon tu peux mettre tes images dans le form, avec une case a cocher a coté ou un truk dans le genre..

C'est aussi tout à fait faisable si il souhaite que la redirection se fasse par un script client JavaScript :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
 <select name="rayon" id="rayon" onchange="redirect(this.options[this.selectedIndex].value)">
           <option value="1">MATERIAUX</option>
           <option value="2">MENUISERIE</option>
           <option value="3">ELECTRICITE-PLOMBERIE</option>
           <option value="4" selected="selected">OUTILLAGE</option>
           <option value="5">RANGEMENT-CUISINE</option>
           <option value="6">SOL ET CARRELAGE MURAL</option>
           <option value="7">SANITAIRE</option>
           <option value="8">CONFORT ET ENERGIES RENOUVELABLES</option>
           <option value="9">JARDIN</option>
           <option value="10">QUINCAILLERIE</option>
           <option value="11">PEINTURE</option>
           <option value="12">DECORATION</option>
           <option value="13">ECLAIRAGE</option>
       </select>
 
<img src="image1.jpeg" onclick="setSelectedImage(this.src)" />

JavaScript :

Code:

1
2
3
4
5
6
7
8
9
 
var selectedImage = '';
function redirect(selectedValue){
    window.location.href = 'ecart.php?rayon='+selectedValue+'&img_src='+selectedImage;
}
 
function setSelectedImage(src){
    selectedImage = src;
}

Bonne journée,

29/04/2009, 13h48
docteurdorian

salut thomas
merci beaucoup pour ta réponse et désolé de revenir vers toi encore une fois
en fait j'ai appliqué ton code et voila le resultat que j'obtient : quand je change de selection dans le menu déroulant, il m'ouvre directement la page ecart.php avec la selection du rayon. (j'ai placé le script java directement dans la page ou se trouve le menu déroulant, dans le block head).

ce que je cherche à obtenir c'est à ouvrir la page ecart quand je clique sur l'image ecart. en fait j'ai six images en tout qui amène vers 6 pages php differentes et la valeur du rayon dont j'ai besoin dans l'url me permet en fait de mettre à jour dans chaque page un tableau réalisé en php.

j'espère que j'ai été assez clair
merci d'avance

Il te suffit de reprendre un peu le script de ThomasR, mais ca sort complètement du PHP à ce niveau la.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
 <select name="rayon" id="rayon" onchange="setSelectedOption(this.options[this.selectedIndex].value)">
           <option value="1">MATERIAUX</option>
           <option value="2">MENUISERIE</option>
           <option value="3">ELECTRICITE-PLOMBERIE</option>
           <option value="4" selected="selected">OUTILLAGE</option>
           <option value="5">RANGEMENT-CUISINE</option>
           <option value="6">SOL ET CARRELAGE MURAL</option>
           <option value="7">SANITAIRE</option>
           <option value="8">CONFORT ET ENERGIES RENOUVELABLES</option>
           <option value="9">JARDIN</option>
           <option value="10">QUINCAILLERIE</option>
           <option value="11">PEINTURE</option>
           <option value="12">DECORATION</option>
           <option value="13">ECLAIRAGE</option>
       </select>
 
<img src="image1.jpeg" onclick="redirect(this.src)" />

Et en Javascript

Code:

1
2
3
4
5
6
7
8
9
 
var selectedOption = '';
function redirect(src){
    window.location.href = 'ecart.php?rayon='+selectedOption +'&img_src='+src; 
}
 
function setSelectedOption(selectedValue){
    selectedOption = selectedValue;
}

Je pense que ThomasR me corrigera si j'ai fais une erreur.

29/04/2009, 15h52
docteurdorian

merci beaucoup arnaud
je viens de tester et en effet cela marche parfaitement à part deux choses:
la première pas très importante: lors du survol de l'image je n'ai plus mon curseur qui change pour m'indiquer qu'il existe un lien

la seconde plus problématique (je pense que ca ne doit pas être très difficile à résoudre mais je n'ai commencé le php que depuis deux semaines): je veux etre redirigé vers une page différente en fonction de l'image sur laquelle je click:
image ecart me renvoie vers ecart.php l'image 2080 me renvoie vers 2080.php etc.......

comment ajouter cette variable??

merci beaucoup
29/04/2009, 15h59
ThomasR
Bonjour,

Citation:

lors du survol de l'image je n'ai plus mon curseur qui change pour m'indiquer qu'il existe un lien
Code:

1 2 img:hover {cursor:pointer;} /* .ImgSelectable {cursor:pointer;} */
Il est préférable de mettre une classe à tes images pour ne pas pourrir le reste de ton CSS.
29/04/2009, 16h03
Arnaud13
Citation:

lors du survol de l'image je n'ai plus mon curseur qui change pour m'indiquer qu'il existe un lien

La j'ai deux idées qui me viennent à l'esprit.
Soit à l'aide du css :
Code:

1 2 <img src="image1.jpeg" onclick="redirect(this.src)" class="identifiant"/>
Et la partie css
Code:

1 2 3 4 .identifiant{ cursor : pointer; }
Soit en mettant ton image entre des balises <a> et </a> :
Code:

1 2 <a href="#" title="image1" onclick="redirect(this.src)" ><img src="image1.jpeg"/></a>
Mais je ne sais pas vraiment ce qui est le plus "correct" comme façon de faire; à première vu je dirai avec le css mais si quelqu'un pouvait préciser.

Citation:

je veux etre redirigé vers une page différente en fonction de l'image sur laquelle je click:
image ecart me renvoie vers ecart.php l'image 2080 me renvoie vers 2080.php etc.......

En modifiant la fonction Javascript :
Code:

1 2 3 4 function redirect(src){ window.location.href = src+'.php?rayon='+selectedOption; }
Il y'a peut être un traitement à faire sur la variable "src" pour récupérer le nom de l'image sans son extension, je ne sais plus trop sur ce coup et je ne peux pas tester de la ou je suis :aie:
29/04/2009, 16h09
docteurdorian

merci beaucoup thomasR j'ai fait la modification
et pour ma deuxième question concernant la variable du nom de la feuille vers laquelle etre redirigé?
je pense qu'après cette réponse je devrais avoir compris le principe et que je pourrai m'en tirer par la suite
en tout cas merci bcp pour votre patience à tous
30/04/2009, 10h38
docteurdorian

salut à tous
je me permet de revenir vers vosu de bon matin parce que je n'ai pas pu solutionner mon dernier probleme concernant la récupération du nom de l'image pour afficher la page correspondante

la solution proposée par toi arnaud récupère en effet l'extension de l'image ce qui ne convient pas

merci d'avance!

Citation:
Envoyé par Arnaud13
Code:

1 2 <a href="#" title="image1" onclick="redirect(this.src)" ><img src="image1.jpeg"/></a>
Attention this.src renverra null, un lien ne possède pas d'attribut "src". Tu peux faire redirect(this.childNodes[0].src) (prendre en compte la différence entre navigateurs avec childNodes).
Citation:
Envoyé par Arnaud13
Code:

1 2 3 4 function redirect(src){ window.location.href = src+'.php?rayon='+selectedOption; }
Je ne pense pas que la source du script PHP possède le nom de l'image. Il y a en effet un traitement à faire sur la variable src, sans oublier de valoriser selectedValue

Personnellement je te conseillerais de faire comme ceci :
Code:

1 2 <img src="ecart.jpeg" style="cursor:pointer;" onclick="redirect(this.src)" />
Code:

1 2 3 4 5 6 function redirect(src){ var filename= src.substring(0, src.lastIndexOf('.')); var selectedValue = document.getElementById('rayon').options[document.getElementById('rayon').selectedIndex].value; window.location.href = filename + '.php?rayon='+selectedValue; }
Citation:

concernant la variable du nom de la feuille vers laquelle etre redirigé?

Qu'appelles-tu une "feuille" ?

30/04/2009, 11h53
Arnaud13
Effectivement pour le onclick dans la balise <a> :aie:
Par contre dans le code que j'avais donné, je n'ai surement pas étais clair, mais il fallait garder la fonction :
Code:

1 2 3 4 function setSelectedOption(selectedValue){ selectedOption = selectedValue; }
que j'avais donné dans mon post avant :oops:

Enfin maintenant avec le code de ThomasR ça devrait rouler et moi j'essayerai d'être plus précis dans mes réponses :king:
30/04/2009, 12h11
docteurdorian

merci beaucoup thomasR pour toutes tes infos et merci aussi à arnaud et fab
j'ai résolu mon pb grace à ta dernière intervention thomas et maintenant je vais me plonger un peu plus dans java parce que je pense que ca me resservira beaucoup

a bientot sur le forum

Fuseau horaire GMT +2. Il est actuellement 03h19.