Discussion :

[Rem5962]

Bonjour,

Sur mon formulaire, j'ai un menu déroulant comme ceci :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
	<SELECT name="category" size=1><?php echo "$category";?>
	<OPTION value="0"></OPTION>
	<OPTION value="trail">Trail</OPTION>
	<OPTION value="randovtt">Rando VTT</OPTION>
	<OPTION value="raid">Raid</OPTION>
	<OPTION value="Autre">Autre</OPTION>
	</SELECT>

Je souhaiterais que quand l'utilisateur sélectionne par exemple la valeur "Trail", la valeur "puce_noir.png" soit récupérée par la variable $puce.

Voir http://chti.sportif.free.fr/formulaire/ajout.php

Comment faire ?
Merci

[NoSmoking]

Bonjour,
je ne comprends pas la construction de ton SELECT et notamment

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<?php echo "$category";?>

Sinon sur le onchange du SELECT tu modifies le champ puce avec la valeur qui va bien, et à la soumission tu aura le bon paramètre ????

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<select name="category" size=1><?php echo "$category";?>
<option value="0"></option>
<option value="trail">Trail</option>
<option value="randovtt">Rando VTT</option>
<option value="raid">Raid</option>
<option value="Autre">Autre</option>
</select>
<input name="puce" type="hidden" value="">

[Rem5962]

Il y a peut-être une erreur de codage. Je n'y connais pratiquement en javascript. J'ai juste essayé d'adapter un code fourni. En tout cas ma variable est bien récupéré dans ma table SQL.

Peux tu me corriger le "SELECT" ?

[NoSmoking]

il n'y a que du grand classique, disponible en masse sur la toile, par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
  <fieldset>
    <legend><?php echo "$category";?></legend>
    <select name="category" size=1 onchange="fnChange(this);">
      <option value="0"></option>
      <option value="trail">Trail</option>
      <option value="randovtt">Rando VTT</option>
      <option value="raid">Raid</option>
      <option value="Autre">Autre</option>
    </select>
    <br><input name="puce" id="puce" type="hidden" value="">
  </fieldset>

[Rem5962]

Merci.

Mais quelque soit la valeur du Select (trail, rando...) la valeur de puce sera tjrs la même avec ton exemple non ?

J'aimerais que quand
trail ---> puce_noir.png ($puce)
rando vtt --> puce_vert.png ($puce)
autre ---> puce_autre.png ($puce) .....

A priori je dois utiliser un "array"

[NoSmoking]

Il y a peut-être une erreur de codage. Je n'y connais pratiquement en javascript. J'ai juste essayé d'adapter un code fourni. En tout cas ma variable est bien récupéré dans ma table SQL.

Peux tu me corriger le "SELECT" ?

j'ai traduis que cela marchait et qu'il fallait juste corriger le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<select name="category" size=1><?php echo "$category";?>

Donc reprenons
sur l'événement onchange du SELECT il faut mettre une fonction qui initialisera le champ puce, comme dit précédemment.

Dans cette fonction
- on récupère l'OPTION sélectionnée et
- on affecte la valeur qui va bien au champ puce.

La récupération du numéro de l'option sélectionnée se fait en lisant le selectedIndex du SELECT, sachant que la numérotation se fait en partant du 0, correspondant à la première ligne

Il nous faut également un champ puce, par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input name="puce" id="puce" type="hidden" value="">

on lui met une ID pour pouvoir le récupérer avec la méthode getElementById()

Il faut également connaître les différentes images à affecter suivant le choix, pour ce faire on va utiliser les ID des OPTIONS pour stocker cette information, cet attribut n'est en pratique pas ou peu utilisé sur les OPTIONS.

Le code du SELECT devient donc

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
  <fieldset>
    <legend>categorie</legend>
    <select name="category" size=1 onchange="fnChange(this);">
      <option value="0"></option>
      <option id="image_trail.jpg" value="trail">Trail</option>
      <option id="image_rando.jpg" value="randovtt">Rando VTT</option>
      <option id="image_raid.jpg"  value="raid">Raid</option>
      <option id="image_autre.jpg" value="Autre">Autre</option>
    </select>
    <br><input name="puce" id="puce" type="hidden" value="">
  </fieldset>

Maintenant il reste à faire la fonction d'affectation, je te la mets ci dessous sans vraiment l'expliquer, les commentaires me semblant suffisant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function fnChange( obj){
  // recup numero option selectionnee
  var index = obj.selectedIndex;
  // recup element champ puce
  var oDest = document.getElementById('puce');
  // affectation de la valeur recupere dans l'ID de l'option
  oDest.value = obj.options[index].id;
}

on notera juste que l'on passe en paramètre de la fonction la référence au SELECT pour pouvoir l'exploiter.

A toi de finaliser...

[Rem5962]

Merci bcp. Tout est ok