Changement de formulaire en fonction du thème

**Vengryn** · 08/12/2018, 11h44

Bonjour,

J'ai besoin d'aide en Javascript.

Je dispose de 3 thèmes qui contient différents formulaires.

Le thème 1 qui est "information de base" contient 5 formulaires.
Le thème 2 qui est "expériences professionnelles/personnelles" contient 8 formulaires.
Le thème 3 qui est "autres informations" contient 3 formulaires.

Lorsque, j'arrive sur ma page web, je suis sur le premier thème "information de base".
Je ne peux pas accéder aux autres thèmes en cliquant dessus. Je ne dispose que d'un seul formulaire avec le bouton "Next'.

Voici, une capture d'écran de ma page web :

En cliquant sur le bouton "Next", j'arrive sur un autre formulaire et ainsi de suite.
Le but est quand on arrive au dernier formulaire du thème, on change immédiatement de thème.

Pour le moment, j'arrive à changer de formulaire en cliquant sur le bouton "Next". Par contre, je n'arrive pas mettre plusieurs formulaires dans un même thème.

Bon, je ne sais pas si je suis très clair, si vous avez des questions, n'hésitez pas.

Voici mon code HTML et Javascript :

- Mon

Code HTML :

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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<script src="jquery.js"></script>
		<link rel="stylesheet" type="text/css" href="style.css"/>
		<script src="form.js"></script>
	</head>
	<body>
		<div class="content">
			<div class="main">
				<div class="regform" >
					<ul id="progressbar">
						<li class="active">Information de base</li>
						<li>Expériences professionelles/personnelles</li>
						<li>Autres informations</li>
					</ul>
					<fieldset id="first">
						<h2 class="title">Information de base</h2>
						<div class="formulaireN1">
							<form name="formulaireN1" action="form.php">
								<label for="nom">Nom :</label>
								<input id="nom" required="">
								<br>
								<label for="prénom">Prénom :</label>
								<input id="prenom" required="">
								<br>
							</form>
						</div>
						<input type="button" name="next" class="next_btn" value="Next" />
					</fieldset>
					<fieldset>
						<h2 class="title">Information de base</h2>
						<div class="formulaireN2">
							<form name="formulaireN1" action="form.php">
								<label for="nom">Nom :</label>
								<input id="nom" required="">
								<br>
								<label for="prénom">Prénom :</label>
								<input id="prenom" required="">
								<br>
							</form>
						</div>
						<input type="button" name="previous" class="pre_btn" value="Previous" />
						<input type="button" name="next" class="next_btn" value="Next" />
					</fieldset>
					<fieldset>
						<h2 class="title">Information de base</h2>
						<div class="formulaireN3">
							<form name="formulaireN1" action="form.php">
								<label for="nom">Nom :</label>
								<input id="nom" required="">
								<br>
								<label for="prénom">Prénom :</label>
								<input id="prenom" required="">
								<br>
							</form>
						</div>
						<input type="button" name="previous" class="pre_btn" value="Previous" />
						<input type="button" name="next" class="next_btn" value="Next" />
					</fieldset>
					<fieldset>
						<h2 class="title">Information de base</h2>
						<div class="formulaireN4">
							<form name="formulaireN1" action="form.php">
								<label for="nom">Nom :</label>
								<input id="nom" required="">
								<br>
								<label for="prénom">Prénom :</label>
								<input id="prenom" required="">
								<br>
							</form>
						</div>
						<input type="button" name="previous" class="pre_btn" value="Previous" />
						<input type="button" name="next" class="next_btn" value="Next" />
					</fieldset>
					<fieldset>
						<h2 class="title">Information de base</h2>
						<div class="formulaireN5">
							<form name="formulaireN1" action="form.php">
								<label for="nom">Nom :</label>
								<input id="nom" required="">
								<br>
								<label for="prénom">Prénom :</label>
								<input id="prenom" required="">
								<br>
							</form>
						</div>
						<input type="button" name="previous" class="pre_btn" value="Previous" />
						<input type="button" name="next" class="next_btn" value="Next" />
					</fieldset>
					<fieldset>
						<h2 class="title">Expériences professionelles/personnelles</h2>
						<div class="formulaireN6">
							<form name="formulaireN1" action="form.php">
								<label for="nom">Nom :</label>
								<input id="nom" required="">
								<br>
								<label for="prénom">Prénom :</label>
								<input id="prenom" required="">
								<br>
							</form>
						</div>
						<input type="button" name="previous" class="pre_btn" value="Previous" />
						<input type="button" name="next" class="next_btn" value="Next" />
					</fieldset>
					<fieldset>
						<h2 class="title">Expériences professionelles/personnelles</h2>
						<div class="formulaireN7">
							<form name="formulaireN1" action="form.php">
								<label for="nom">Nom :</label>
								<input id="nom" required="">
								<br>
								<label for="prénom">Prénom :</label>
								<input id="prenom" required="">
								<br>
							</form>
						</div>
						<input type="button" name="previous" class="pre_btn" value="Previous" />
						<input type="button" name="next" class="next_btn" value="Next" />
					</fieldset>
					<fieldset>
						<h2 class="title">Expériences professionelles/personnelles</h2>
						<div class="formulaireN8">
							<form name="formulaireN1" action="form.php">
								<label for="nom">Nom :</label>
								<input id="nom" required="">
								<br>
								<label for="prénom">Prénom :</label>
								<input id="prenom" required="">
								<br>
							</form>
						</div>
						<input type="button" name="previous" class="pre_btn" value="Previous" />
						<input type="button" name="next" class="next_btn" value="Next" />
					</fieldset>
					<fieldset>
						<h2 class="title">Expériences professionelles/personnelles</h2>
						<div class="formulaireN9">
							<form name="formulaireN1" action="form.php">
								<label for="nom">Nom :</label>
								<input id="nom" required="">
								<br>
								<label for="prénom">Prénom :</label>
								<input id="prenom" required="">
								<br>
							</form>
						</div>
						<input type="button" name="previous" class="pre_btn" value="Previous" />
						<input type="button" name="next" class="next_btn" value="Next" />
					</fieldset>
					<fieldset>
						<h2 class="title">Expériences professionelles/personnelles</h2>
						<div class="formulaireN10">
							<form name="formulaireN1" action="form.php">
								<label for="nom">Nom :</label>
								<input id="nom" required="">
								<br>
								<label for="prénom">Prénom :</label>
								<input id="prenom" required="">
								<br>
							</form>
						</div>
						<input type="button" name="previous" class="pre_btn" value="Previous" />
						<input type="button" name="next" class="next_btn" value="Next" />
					</fieldset>
					<fieldset>
						<h2 class="title">Expériences professionelles/personnelles</h2>
						<div class="formulaireN11">
							<form name="formulaireN1" action="form.php">
								<label for="nom">Nom :</label>
								<input id="nom" required="">
								<br>
								<label for="prénom">Prénom :</label>
								<input id="prenom" required="">
								<br>
							</form>
						</div>
						<input type="button" name="previous" class="pre_btn" value="Previous" />
						<input type="button" name="next" class="next_btn" value="Next" />
					</fieldset>
					<fieldset>
						<h2 class="title">Expériences professionelles/personnelles</h2>
						<div class="formulaireN12">
							<form name="formulaireN1" action="form.php">
								<label for="nom">Nom :</label>
								<input id="nom" required="">
								<br>
								<label for="prénom">Prénom :</label>
								<input id="prenom" required="">
								<br>
							</form>
						</div>
						<input type="button" name="previous" class="pre_btn" value="Previous" />
						<input type="button" name="next" class="next_btn" value="Next" />
					</fieldset>
					<fieldset>
						<h2 class="title">Expériences professionelles/personnelles</h2>
						<div class="formulaireN13">
							<form name="formulaireN1" action="form.php">
								<label for="nom">Nom :</label>
								<input id="nom" required="">
								<br>
								<label for="prénom">Prénom :</label>
								<input id="prenom" required="">
								<br>
							</form>
						</div>
						<input type="button" name="previous" class="pre_btn" value="Previous" />
						<input type="button" name="next" class="next_btn" value="Next" />
					</fieldset>
					<fieldset>
						<h2 class="title">Autres informations</h2>
						<div class="formulaireN15">
							<form name="formulaireN1" action="form.php">
								<label for="nom">Nom :</label>
								<input id="nom" required="">
								<br>
								<label for="prénom">Prénom :</label>
								<input id="prenom" required="">
								<br>
							</form>
						</div>
						<input type="button" name="previous" class="pre_btn" value="Previous" />
						<input type="button" name="next" class="next_btn" value="Next" />
					</fieldset>
					<fieldset>
						<h2 class="title">Autres informations</h2>
						<div class="formulaireN16">
							<form name="formulaireN1" action="form.php">
								<label for="nom">Nom :</label>
								<input id="nom" required="">
								<br>
								<label for="prénom">Prénom :</label>
								<input id="prenom" required="">
								<br>
							</form>
						</div>
						<input type="button" name="previous" class="pre_btn" value="Previous" />
						<input type="button" name="next" class="next_btn" value="Next" />
					</fieldset>
					<fieldset>
						<h2 class="title">Autres informations</h2>
						<div class="formulaire_17">
							<form name="formulaireN1" action="form.php">
								<label for="nom">Nom :</label>
								<input id="nom" required="">
								<br>
								<label for="prénom">Prénom :</label>
								<input id="prenom" required="">
								<br>
							</form>
						</div>
						<input type="button" class="pre_btn" value="Previous" />
						<input type="submit" class="submit_btn" value="Submit" />
					</fieldset>
				</div>
			</div>
		</div>
	</body>
</html>

- Mon

Code JavaScript :

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
$(document).ready(function(){
 
 $(".next_btn").click(function(){ * * * * * 
 $(this).parent().next().fadeIn('slow');
 $(this).parent().css({'display':'none'});
 $('.active').next().addClass('active');
 });
 
 $(".pre_btn").click(function(){ * * * * * *
 $(this).parent().prev().fadeIn('slow');
 $(this).parent().css({'display':'none'});
 $('.active:last').removeClass('active');
 });
 
 $(".submit_btn").click(function(e){ 
 if($('input').val()=="" || $('textarea').val()==""){ 
 alert("Texte envoyée");
 return false;
 }
 else{
 return true;
 }
 });
});

Ah, et, j'ai bien l'alerte quand je clique sur le bouton "Submit" dans le dernier formulaire :

Merci d'avance pour votre aide.

PS : J'ai décidé de ne pas mettre l'exactitude des formulaires dans un soucis de confidentialité. C'est pourquoi, ils sont tous identiques.

**Beginner.** · 08/12/2018, 15h18

Salut,

Pour tester on aurait besoin du fichier style.css...

PS : Dans ton JS il y a des "* * * * * *" qui provoquent évidement des erreurs...

EDIT : Je viens de tester (en ajoutant du css que j'ai dû deviner car tu ne l'as pas fourni) et chez moi ça marche : on passe bien d'un formulaire au suivant en cliquant sur le button "next" et quand on arrive au dernier formulaire du thème on passe bien au premier formulaire du thème suivant...

Alors du coup je ne sais pas quel est problème que tu veux régler...

**Vengryn** · 08/12/2018, 18h26

Bonjour,

Merci beaucoup pour votre message. C'est très gentil de venir m'aider

Voici le fichier de CSS :

Code CSS :

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
.content{
	width:960px;
	margin:20px auto;
	}
.main{
	float:left;
	width: 650px;
	margin-top:80px;
	}
#progressbar{
	margin:0;
	padding:0;
	font-size:18px;
	}	
.regform{
width: 900px;
	}
.active{
	color:red;
	}
fieldset{
	display:none;
	width: 350px;
	padding:20px;
	margin-top:50px;
	margin-left: 85px;
	border-radius:5px;
	box-shadow: 3px 3px 25px 1px gray;
	}
#first{
    display:block;
	width: 350px;
	padding:20px;
	margin-top:50px;
	border-radius:5px;
	margin-left: 85px;
	box-shadow: 3px 3px 25px 1px gray;
	}
input[type=text],
input[type=submit],
input[type=button]{
	width: 120px;
	margin:15px 25px;
	padding: 5px;
	height: 40px;
	background-color: sienna;
	border: none;
	border-radius: 4px;
	color: white;
	font-family: 'Droid Serif', serif;
	}
h2,p{
	text-align:center;
	font-family: 'Droid Serif', serif;
	}
li{
	margin-right:52px;
	display:inline;
	color:#c1c5cc;
	font-family: 'Droid Serif', serif;
	}

Je suis désolé de l'avoir oublié :/

Non, c'est pas bon. Je me suis mal exprimé. Je vais m'expliquer avec des images en espérant me faire mieux comprendre.

Voici, la page web du début :

Nom : Capture2.PNG
Affichages : 216
Taille : 24,7 Ko

Nom : Capture2.PNG
Affichages : 216
Taille : 24,7 Ko

Et, quand, on clique sur le bouton "Next", on obtient :

Nom : Capture3.PNG
Affichages : 195
Taille : 25,5 Ko

Et, là, nous rencontrons un problème. C'est seulement mon deuxième formulaire. Donc, on devrait avoir une couleur que sur "information de base" et non les deux.

Comme dit, plus haut :

Le thème 1 qui est "information de base" contient 5 formulaires.
Le thème 2 qui est "expériences professionnelles/personnelles" contient 8 formulaires.
Le thème 3 qui est "autres informations" contient 3 formulaires.

Donc, sur les 5 premiers formulaires, on doit avoir juste "information de base" coloré en rouge.
Sur les 8 suivants, juste "expériences professionnelles/personnelles" coloré en rouge.
Et sur les 3 derniers, juste "autres informations" coloré en rouge.

Est-ce plus clair ?

Oui, exact, pour le javascript, désolé. C'est au moment du copier/coller, j'ai du faire une mauvaise manip.

**Beginner.** · 08/12/2018, 22h34

Salut,

Ah ok je crois avoir compris cette fois alors je t'avoue que je ne connais pas JQuery mais j'ai quand même bidouillé un code en essayant de comprendre les fonctions que tu utilises...
Cela fonctionne mais quelqu'un qui s'y connait en JQuery pourra probablement faire quelque chose de mieux (optimisé et plus correcte*)...

Voici pour tester : https://jsbin.com/ziwenewaxi/edit?js,output

* Plus correcte car par exemple je ne sais pas si il y a un moyen de récupérer "proprement" l’élément DOM correspondant à ce que renvoi la méthode next()...
J'ai alors regardé la console et j'ai remarqué que cette méthode revoie un objet dont la propriété de clé "0" pointe sur l’élément DOM qui nous intéresse...
Il y a probablement un moyen de faire ça avec une des méthodes de JQuery mais je ne connais pas...

**Vengryn** · 12/12/2018, 20h35

Bonjour,

Merci beaucoup. C'est parfait

Le problème est résolu ^^

Changement de formulaire en fonction du thème

jQuery

Vue hybride

Partager

Partager