liste deroulante en fonction d'un autrechamp de formulaire

**ctsblv** · 13/03/2015, 18h29

Bonsoir
j'ai une liste déroulante avec des heures de compétition dans un formulaire.
Je souhaiterais la modifier en fonction de la discipline choisie.
Est-ce possible ?
j'ai fait plusieurs tentative avec des if mais la liste déroulante reste vide.
Je vous joint le formulaire que jreaux62 m'a aidé à écrire.
Merci

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
 
 
<form action="form_inscrits2550m.php" method="post"> 
<h2>INSCRIPTION DEPARTEMENTAUX 25/50M </h2> 
<hr />
<h4>
Veuillez remplir ce formulaire pour vous inscrire:<br /><br />  
Jour : 
<select name="jourc" />
<option value=''> Select </option>
<option value="samedi"<?php if( isset($jourc) && $jourc=='samedi'){ echo ' selected="selected"'; } ?>>samedi</option>
	<option value="dimanche"<?php if( isset($jourc) && $jourc=='dimanche'){ echo ' selected="selected"'; } ?>>dimanche</option>
</select><br /><br />  
Heure : 
<select name="heurec" /> 
<?php // on va l'écrire en PHP :
	$heurec_values = array( '9h', '9h30', '10h', '10h30' );
	$heurec_names = array( '9h', '9h30', '10h', '10h30' ); // peut être différent des value !
		foreach( $heurec_values as $heurec_index => $heurec_value )
		{
			$selected = ( isset($heurec) && $heurec==$heurec_value )? ' selected="selected"' : '';
?>
	<option value="<?php echo $heurec_value; ?>"<?php echo $selected; ?>><?php echo $heurec_names[$heurec_index]; ?></option>
<?php
		}
?>
</select><br /> <br />
Nom :<input type="text" name="nom"  value="<?php if(isset($_POST['nom'])){echo $_POST['nom'];} ?>" /><br /><br />  
Prenom :<input type="text" name="prenom"  value="<?php if(isset($_POST['prenom'])){echo $_POST['prenom'];} ?>" /><br /><br />  
Club :<input type="text" name="club"  value="<?php if(isset($_POST['club'])){echo $_POST['club'];} ?>" /><br /><br />  
Nlicence :<input type="text" name="nlicence"  value="<?php if(isset($_POST['nlicence'])){echo $_POST['nlicence'];} ?>" /><br /><br />  
Cat:
<select name="cat" /> 
<?php // on va l'écrire en PHP :
	$cat_values = array( 'PF', 'PG', 'BF', 'BG', 'MF', 'MG', 'CF', 'CG', 'JF', 'JG', 'D1', 'S1', 'D2', 'S2', 'D3', 'S3' );
	$cat_names = array( 'PF', 'PG', 'BF', 'BG', 'MF', 'MG', 'CF', 'CG', 'JF', 'JG', 'D1', 'S1', 'D2', 'S2', 'D3', 'S3' ); // peut être différent des value !
		foreach( $cat_values as $cat_index => $cat_value )
		{
			$selected = ( isset($cat) && $cat==$cat_value )? ' selected="selected"' : '';
?>
	<option value="<?php echo $cat_value; ?>"<?php echo $selected; ?>><?php echo $cat_names[$cat_index]; ?></option>
<?php
		}
?>
</select><br /> <br />
 
 
Dis :
<select name="dis" /> 
<?php // on va l'écrire en PHP :
	$dis_values = array( 'st25m', 'sp22', 'vit25m', 'spgc', '60bc', 'libre', '3x20', '3x40');
	$dis_names = array( 'st25m', 'sp22', 'vit25m', 'spgc', '60bc', 'libre', '3x20', '3x40' ); // peut être différent des value !
		foreach( $dis_values as $dis_index => $dis_value )
		{
			$selected = ( isset($dis) && $dis==$dis_value )? ' selected="selected"' : '';
?>
	<option value="<?php echo $dis_value; ?>"<?php echo $selected; ?>><?php echo $dis_names[$dis_index]; ?></option>
<?php
		}
?>
</select><br /> <br />
	<input type="submit" value="Envoyer"> &nbsp;&nbsp;&nbsp; <input type="button" value="Sortie" onclick="location.href='/';">	&nbsp;&nbsp;&nbsp;   <input type="reset" value="Raz Form" />
</form>

Invité · 13/03/2015, 19h11

Bonjour,
Fais des recherches sur : Ajax - listes liées (forum JavaScript)

**ctsblv** · 13/03/2015, 20h34

Bonsoir jreaux
merci de m'avoir répondu.
Mais là je pense que je vais créer un autre formulaire avec la liste des horaires voulus.
Je ne connais pas du tout ajax et javascript.ça devient un peu compliqué pour moi.
Merci.

**ctsblv** · 14/03/2015, 12h42

bonjour
j'ai regardé la faq js ,si j'ai bien compris ,je dois créer sous js les listes comme des tables
afin d'appeler les heures en fonction de la discipline choisie.
j'ai bon ?
Merci pour la patience.

Invité · 14/03/2015, 21h08

En fait il existe plusieurs solutions.

celle que tu évoques n'est efficace que sur des petites listes (peu de choix dans les listes).
On oublie.

La plus "moderne" est de modifier la 2ème liste SANS recharger la page, via AJAX.
via Ajax, on appelle une page externe qui traite l'info (on fait une requete...), récupère le résultat et l'affiche sur la page.

Donc : vois les tutos Ajax.

**ctsblv** · 16/03/2015, 23h48

bonsoir
j'ai regardé le forum ajax et le listes liées,mais tous les sujets parlent de faire des requêtes pour alimenter
la deuxième liste .
Mes listes horaires vont avoir de 1 à 4 entrées maximum.
Ma liste discipline 8 entrées (invariable)
cela vaut-il la peine de me lancer dans ajax où je te l'avoue j'ai un peu de mal à tout saisir.(l'age diminue la capacité de compréhension)
Merci

Invité · 17/03/2015, 01h59

Dans ce cas, la solution full JavaScript (sans Ajax) peut faire l'affaire :

FAQ JS : Comment lier deux listes déroulantes entre elles ?

Le code JavaScript peut être générer via PHP (requête en BdD,...), pour l'écriture des tableaux (les array() JavaScript).

PAR CONTRE, ce code (cité ci-dessus) date "un peu"...
Notamment, la création en JavaScript des balises <option...> pour les <select...> date du siècle dernier.

Code :

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

1
2
3
4
5
6
	<select name="listepays" onChange='filltheselect(this.name, this.value)'>
	   <script language="javascript">
	   for (i=0; i<pays.length; i++)
	      document.write("<option value=\"" +pays[i][0]+ "\">" +pays[i][1]);
	   </script>
	</select>

Voici une autre façon d'écrire le code :

Code :

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

1
2
3
4
5
6
<script type="text/javascript">
	function addNewOption ( nomselect, index, valeur, texte ) { 
	  var new_option = new Option( texte, valeur );
	  document.formu.elements[nomselect].options[index] = new_option;
	}
</script>

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
<body>
	<form name="formu"> 
	Choisir un pays 
	<select name="listepays" onChange='filltheselect(this.name, this.value)'>
	   <script type="text/javascript">
	   for (i=0; i<pays.length; i++){
	      addNewOption ( 'listepays', i, pays[i][0], pays[i][1] );  
	   }
	   </script>
	</select>
	<br>
	 Choisir une ville
	<select name="listeville" onChange='filltheselect(this.name, this.value)'>
	   <script type="text/javascript">
	   for (i=0; i<ville["p0"].length; i++){
	      addNewOption ( 'listeville', i, ville["p0"][i][0], ville["p0"][i][1] );  
	   }
	   </script>
	</select>
	 <br>
	 Choisir une rue
	<select name="listerue">
	   <script type="text/javascript">
	   for (i=0; i<rue["p0v0"].length; i++){
	      addNewOption ( 'listerue', i, rue["p0v0"][i][0], rue["p0v0"][i][1] );  
	   }
	   </script>
	</select>
	 </form>
</body>

**ctsblv** · 17/03/2015, 15h08

bonjour
c'est bien le tuto que j'avais vu.
j'ai commencé la modification pour l'adapter à mes besoins.
voilà où j'en suis.J'espère que j'ai compris la logique ?
j'ai un doute sur la déclaration des tables horaires.

Mille merci

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
 
<html>
<head>
	<script type="text/javascript">
	var dis = []; //nouveau tableau
	dis[0] = ["d0", "st25m"]; //
	dis[1] = ["d1", "libre"];
	dis[2] = ["d2", "sp22"];
	dis[3] = ["d3", "spgc"];
	………………….
	var jourc = [];
	//dis0-jourc0
	jourc["d0"] = [];
	jourc["d0"][0] = ["d0j0", "samedi"];
	jourc["d0"][1] = ["d0j1", "dimanche"];
	………………….
	var heurec=[];
	// dis0 jour0 samedi
	heurec["d0j0"] = [];
	heurec["d0j0"][0] = ["d0j0h0", "11h"];
	heurec["d0j0"][1] = ["d0j0h1", "14h"];
 
	//dis0 jour1 dimanche
 
	heurec["d0j1"] = [];
	heurec["d0j1"][0] = ["d0j1h0", "11h"];
	………………………….	
 
	//dis1 jour0 samedi
 
	heurec["d1j0"]=[];
	heurec["d1j0"][0] = ["d1j0h0", "9h15"];
	heurec["d1j0"][1] = ["d1j0h1", "11h15"];
	heurec["d1j0"][2] = ["d1j0h2", "14h15"];
	heurec["d1j0"][3] = ["d1j0h3", "16h15"];
 
	//dis1 jour1 dimanche	
 
	heurec["d1j1"]=[];
	heurec["d1j1"][0] = ["d1j1h0", "11h"];
 
 
	//dis2 jour0 samedi
 
	heurec["d2j0"] = [];
	heurec["d2j0"][0] = ["d2j0h0", "9h"];
	heurec["d2j0"][1] = ["d2j0h1", "16h"];
 
	//dis2 jour1 dimanche
 
	heurec["d2j1"] = [];
	heurec["d2j1"][0] = ["d2j1h0", "9h"];
	heurec["d2j1"][1] = ["d2j1h1", "14h"];
 	heurec["d2j1"][2] = ["d2j1h2", "16h"];
 
	//dis3
	heurec["d3"] = [];
	heurec["d3"][0] = ["d3h0", "9h"];
	heurec["d3"][1] = ["d3h1", "16h"];
 
 
function filltheselect(liste, choix)
	{switch (liste)
	   {
	   case "listedis":
	  raz("listejourc");
	      raz("listeheurec");
	      for (i=0; i<jourc[choix].length; i++)
	         {
	         new_option = new Option(jourc[choix][i][1],jourc[choix][i][0]);
	         document.formu.elements["listejourc"].
	 options[document.formu.elements["listejourc"].length]=new_option;
	         }
	      for (i=0; i<heurec[choix+"j0"].length; i++)
	         {
	         new_option = new Option(heurec[choix+"j0"][i][1],heurec[choix+"j0"][i][0]);
	         document.formu.elements["listeheurec"].options[document.formu.
	 elements["listeheurec"].length]=new_option;
	         }
	      break;
	   case "listeheurec":
	      raz("listeheurec");
	      for (i=0; i<heurec[choix].length; i++)
	         {
	         new_option = new Option(heurec[choix][i][1],heurec[choix][i][0]);
	         document.formu.elements["listeheurec"].options[document.formu.
	 elements["listeheurec"].length]=new_option;
	         }
	      break;
 
	   }
	}
 
 
	<script type="text/javascript">
	function addNewOption ( nomselect, index, valeur, texte ) { 
	  var new_option = new Option( texte, valeur );
	  document.formu.elements[nomselect].options[index] = new_option;
	}
 
 
function raz(liste)
	{l=document.formu.elements[liste].length;
	for (i=l; i>=0; i--)
	   document.formu.elements[liste].options[i]=null;
	}
	</script>
 
 
</head>
<body>
	<form name="formu"> 
	Choisir une discipline
	<select name="listedis" onChange='filltheselect(this.name, this.value)'>
	   <script type="text/javascript">
	   for (i=0; i<pays.length; i++){
	      addNewOption ( 'listedis', i, dis[i][0], dis[i][1] );  
	   }
	   </script>
	</select>
	<br>
	 Choisir un jour
	<select name="listejourc" onChange='filltheselect(this.name, this.value)'>
	   <script type="text/javascript">
	   for (i=0; i<jourc["d0"].length; i++){
	      addNewOption ( 'listejourc', i, jourc["d0"][i][0], jourc["d0"][i][1] );  
	   }
	   </script>
	</select>
	 <br>
	 Choisir une heure
	<select name="listeheurec">
	   <script type="text/javascript">
	   for (i=0; i<rue["d0j0"].length; i++){
	      addNewOption ( 'listeheurec', i, heurec["d0j0"][i][0], heurec["d0j0"][i][1] );  
	   }
	   </script>
	</select>
	 </form>
</body>

**ctsblv** · 17/03/2015, 17h34

bonsoir
encore merci pour ton aide.Tout marche au poil.
j'ai remplacé les parties du tuto par tes scripts .
je mets le message en resolu.

liste deroulante en fonction d'un autrechamp de formulaire [MySQL]

PHP & Base de données

Discussions similaires

Partager

Partager