Listes déroulantes liées

**andre260** · 17/03/2016, 18h34

Bonjour à tous
je suis en rade sur ma dernière liste déroulante qui est figée
J'ai 4 listes déroulantes ( nom rando, date rando, distance et prix)
la date se cale bien sur la 1ere liste (nom rando), la distance se cale bien également sur la 1ere(nom rando)
par contre le prix, grosse difficulté car il est dépendant du nom rando et de distance
ex : Frep distance 140 , 200 prix 7 , 15
flin distance 70, 120 prix 3 , 5
la 4eme liste est figée voila le code

Code :

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

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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<SCRIPT language="JavaScript">
<!--
function Choix(form) 
{
i = form.Rando.selectedIndex;
if (i == 0) 
   {  
 
          for (i=0;i<4;i++)
        {
           form.Dist.options[i].text="";
        }
       return;  
 
          for (i=0;i<4;i++)
        {
            form.DateR.options[i].text="";
        }
       return;
 
         for (i=0;i<4;i++)
        {
            form.prix.options[i].text="";
        }
       return;
   }
     switch (i)
     {
        case 1 : var txt = new Array ('2016-03-13'); break;
        case 2 : var txt = new Array ('2016-03-20'); break;
        case 3 : var txt = new Array ('2016-04-20'); break;
     }
      form.DateR.options[1].text="--- date rando ---";
      for (i=0;i<1;i++)
        {
          form.DateR.options[i+1].text=txt[i];
        }
          form.DateR.selectedIndex = 1;
          i = form.Rando.selectedIndex;
///////////////////////////////////////////////////////////////////
		  if (i == 0) 
        {
          for (i=0;i<4;i++)
           {
             form.Dist.options[i].text="";
           }
         return;  
 
          for (i=0;i<4;i++)
          {
             form.DateR.options[i].text="";
          }
         return;
 
       }
     switch (i)
    {
      case 1 : var txt = new Array ('30','60','90'); break;
      case 2 : var txt = new Array ('70','120'); break;
      case 3 : var txt = new Array ('140','200'); break;
    }
          form.Dist.options[0].text="-choix dist-";	  
          for (i=0;i<3;i++)
          {
             form.Dist.options[i+1].text=txt[i];
          }
             form.Dist.selectedIndex = 0;
//////////////////////////////////////////////////////////////////
         i == 0;
	   if (i == 0) 
        {
          for (i=0;i<3;i++)
        {
          form.prix.options[i].text="";
    }
        return; 
           for (i=0;i<4;i++) 
         {
           form.Rando.options[i].text="";
         }
        return;		
 
          for (i=0;i<4;i++) 
         {
           form.Dist.options[i].text="";
         }
        return;
  }
     switch (i)
      {
        case 1 : var txt = new Array ('3','5'); break;
        case 2 : var txt = new Array ('4','6'); break;
        case 3 : var txt = new Array ('7','15'); break;
      }
         form.prix.options[0].text="-choix prix-";
         for (i=0;i<3;i++)
       {
         form.prix.options[i+1].text=txt[i];
       }
 
          form.prix.selectedIndex = 0;
  }
 
// -->
</SCRIPT>

je ne vois pas l'erreur merci du coup de pouce

**NoSmoking** · 20/03/2016, 11h33

Bonjour,
j'ai un peu de mal à comprendre la logique de ta fonction, pourrait-on avoir le code HTML qui va avec ?

Il est des choses étranges comme

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    if (i == 0) {
        for (i = 0; i < 4; i++) {
            form.Dist.options[i].text = "";
        }
        return;
// on ne viendra JAMAIS ICI    
        for (i = 0; i < 4; i++) {
            form.DateR.options[i].text = "";
        }
        return;
// on ne viendra JAMAIS ICI
        for (i = 0; i < 4; i++) {
            form.prix.options[i].text = "";
        }
        return;
    }

ou encore à quoi sert un SELECT avec une seule valeur

Code :

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

1
2
3
4
    form.DateR.options[1].text = "--- date rando ---";
    for (i = 0; i < 1; i++) {
        form.DateR.options[i + 1].text = txt[i];
    }

**andre260** · 21/03/2016, 09h51

Bonjour je te donne le code complet (enlevé certaines données perso)

Code :

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

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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<form name="coordonnees" id="coordonnees" method="post"  action="engagements.php">
<center>
<p class="titre">	
<fieldset id="coordonnees">
			<legend>Vos coordonn&eacute;es</legend>				
					<label for="nom_prenom"><strong>Nom-Prenom* : </strong></label>
						<!--<input id="nom" type="text" name="nom"   /><br /></p>-->
						<select name="nom" id="nom" size="1" maxlength="55" required>
							<option value="">&nbsp;</option>
 
						</select>
				<p>
<!--<input type="text" name="nom" size="20" value="nom" maxlength="35"><br>-->
<label for="phone"><strong>Telephone* (portable) : </strong></label><input type="tel" name="phone" size="10" value="" maxlength="10" required required pattern="[0]{1}[6-7]{1}[0-9]{8}"  title="telephone portable 06, 07 (10chiffres)"/><br>
 
<br><label><strong>Adresse courriel** : </strong></label><input type="email" name="email" size="35" value="" maxlength="40" required><br>
<br><label for="fede"><strong> federation*: </strong></label>
						<select name="fede" id="fede"size="1" maxlength="6" required>
							<option value="">&nbsp;&nbsp;&nbsp</option>
							<option value="xx">FFC</option>
							<option value="yyy">FFCT</option>
							<option value="zzzT">FSGT</option>
							<option value="vvv">FFTri</option>
							<option value="www">UFOLEP</option>
							<option value="autre">Autre</option>
						</select></br>
 <br><label for="numlicence"><strong>Num.Licence* : </strong></label><input type="text" name="numlicence" size="6" value="" maxlength="6" required required pattern="[5-6-7-8]{1}[0-9]{5}" title="licence 6 chiffres obligatoires"/></br><br>
 <SCRIPT language="JavaScript">
<!--
function Choix(form)
 {
i = form.Rando.selectedIndex;
if (i == 0) 
{
  for (i=0;i<4;i++)
 {
    form.Dist.options[i].text="";
    }
  return;
 
  for (i=0;i<4;i++) 
  {
    form.DateR.options[i].text="";
    }
  return;
  for (i=0;i<4;i++) 
  {
    form.prix.options[i].text="";
    }
  return;
  }
 
switch (i) 
{
//case 1 : var txt = new Array ('2006-03-13'); break;
case 1 : var txt = new Array ('2016-03-20'); break;
case 2 : var txt = new Array ('2016-04-30'); break;
case 3  : var txt =new Array ( '2016-04-09'); break;
case 4 : var txt = new Array ('2016-05-21'); break;
case 5 : var txt = new Array ('2016-06-11'); break;
}
form.DateR.options[1].text="- Date Rando-";
for (i=0;i<3;i++) {
  form.DateR.options[i+1].text=txt[i];
  }
  form.DateR.selectedIndex = 1;
  i = form.Rando.selectedIndex;
  if (i == 0) 
{
  for (i=0;i<4;i++)
 {
    form.Dist.options[i].text="";
    }
  return;
 
  for (i=0;i<4;i++) 
  {
    form.DateR.options[i].text="";
    }
  return;
  }
switch (i) 
{
 
//case 1 : var txt = new Array ('51','73','100','-'); break;
case 1 : var txt = new Array ('30','60','90','115'); break;
case 2 : var txt = new Array ('150','200','-','-'); break;
case 3  : var txt =new Array ( '130'); break;
case 4 : var txt = new Array ('135','215','-','-'); break;
case 5 : var txt = new Array ('150','200','-','-'); break;
}
form.Dist.options[0].text="-Choisissez une Distance-";
for (i=0;i<4;i++) {
  form.Dist.options[i+1].text=txt[i];
  }
  form.Dist.selectedIndex = 0;
} 
// -->
</SCRIPT>
 
<br>
<TABLE>
<TR>
	<TH>Randonnees*&nbsp;:</TH>
	<th>Date de la rando*&nbsp;</th>
	<TH>Distances*&nbsp;:</TH>
	<TH>Prix&nbsp;:</TH>
 
</TR>
<TR>
	<TD><SELECT NAME="Rando" onChange='Choix(this.form)' required>
	   	<OPTION value="">&nbsp;&nbsp;&nbsp;&nbsp</OPTION>
	   	<OPTION value="xxx">F Print.</OPTION>
		<option value="yyyyy">R aux</option>
		<option value="zzzz">La ine</option>
		<option value="vvvvv">Vux</option>
		<option value="wwwww">Lclo</option>
		</SELECT></TD>
	<TD><SELECT NAME="DateR" required>
	   	<OPTION value="">-Date rando-</OPTION>
		<OPTION></OPTION>
	   	<OPTION></OPTION>
	   	<OPTION></OPTION>
		<OPTION></OPTION>
		<OPTION></OPTION>
		<OPTION></OPTION>
		</SELECT></TD>
	<TD><SELECT NAME="Dist" required>
	   	<OPTION value="">-Choix Distance-</OPTION>
		<OPTION></OPTION>
	   	<OPTION></OPTION>
	   	<OPTION></OPTION>
		<OPTION></OPTION>
		<OPTION></OPTION>
		<OPTION></OPTION>
		</SELECT></TD>
		<TD><SELECT NAME="prix" disabled >
	   	<OPTION value="">-Cout rando-</OPTION>
		<OPTION></OPTION>
	   	<OPTION></OPTION>
	   	<OPTION></OPTION>
		<OPTION></OPTION>
		<OPTION></OPTION>
		<OPTION></OPTION>
		</SELECT></TD>
</TR>
</TABLE>
<!--<input type="text" name="titre" size="40" value="titre du site" maxlength="40"><br>
 <input type="text" name="url" size="50" value="url du site" maxlength="50"><br>-->
<input type="submit" value="Envoyer" name="envoyer">
 
<p class="nota">
					Les champs not&eacute;s * sont obligatoires ! Le champ Prix est désactivé</br>** Cette adresse courriel est strictement confidentielle et ne sera utilis&eacute;e que 
					dans le cadre de nos activités.
				</center></p>
				</fieldset>
</form>

mais comme je l'ai écrit plus haut il n'y a que la liste deroulante "prix " qui est figée alors que le code est le même pour les 2 autres
sur le site l'utilisateur choisi une rando la bonne date se cale bien et la 3eme liste donne les bons arguments de distance
on change le type de rando les données se calent bien
voila ce que cherche à réaliser pour le choix "prix" qui depend du choix rando et distance (car les coûts ne sont pas identiques)
ex : si distance = 100 prix 3.5€ si distance = 200 prix = 15€ (pour la même rando)
c'est la que suis planté

Invité · 21/03/2016, 11h38

Bonjour,

il existe de nombreuses incohérences, que ce soit dans le code HTML (des balises <p> dans un autre <p> des <label for="..."> ne se rapportant à rien*,...),
comme dans le code JavaScript.

dans le code JavaScript:

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
i = form.Rando.selectedIndex;
if (i == 0) 
{
  for (i=0;i<4;i++)
 {
    form.Dist.options[i].text="";
    }
  return;
...

Si les variables s'appellent toutes "i", ça ne risque pas de fonctionner !

=> donne des noms de variables plus explicites :

Code :

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

1
2
3
4
5
6
var RandoId = form.Rando.selectedIndex;
if (RandoId == 0) 
{
  for (i=0;i<4;i++)
 {
....

Cela dit, le 1er return; met fin à l'exécution de la fonction, et renvoie... "rien".
Donc, je comprends mal comment il peut se passer quoi que ce soit avec cette fonction...

Es-tu sûr de la comprendre toi-même ? (ce qui suppose que tu puisses en commenter chaque ligne, chaque action)
As-tu écrit ce code, ou juste copié-collé ?

N.B. <label for="..."> se rapporte à <input id="..." (à l'id, pas au name).

**NoSmoking** · 21/03/2016, 15h25

@jreaux62 :

Si les variables s'appellent toutes "i", ça ne risque pas de fonctionner !

dans son cas il y a réutilisation de la variable après réaffectation, donc pas de problème de ce coté par contre...

@andre260 :
sur le changement de sélection du <select name="Dist"> aucune action n'est prévu pour modifier le prix.

Du manière générale aucune value ne sont affectées aux <option> ce qui rend la tâche plus que périlleuse concernant les liaisons.

Avant de continuer fait un schéma de fonctionnement/liaison de tes différents <select>, tu devrais y voir plus clair.

**andre260** · 21/03/2016, 16h08

il ya assez longtemps que j'ai monté ce petit bout de code
il est fort possible que je me suis inspiré d'un exemple
par contre ce que je suis sur
1 au début il n'y avait que 2 listes deroulantes (choix rando, date)
2 par la suite on m'a demandé de définir les distances (ca posait probleme car on ne savait jamais le choix de l'utilisateur)
3 je me suis attelé à cette tache donc j'ai retotoché le code et il fonctionnait (sur)
4 on me redemande de mettre le coût car le formulaire est redirigé par la méthode action xxx.php (et ca fonctionne),
récupération dans une table de la bd et on souhaite avoir le coût global dans la bd et c'est là que les problémes commencent
5 je reretotoche le code (c'est pour ça surement qu'il y a des failles)

Listes déroulantes liées

JavaScript

Vue hybride

Discussions similaires

Partager

Partager