formulaire javascript

**thom48** · 18/03/2010, 11h44

Bonjour,

Alors j'ai un petit souci concernant un formulaire en php.

Je m'explique :

J'ai créé un formulaire qui contient du code caché. Lorsque je veux valider mon formulaire, je fais une vérification de certains champs et si certains champs ne sont pas renseignés alors il me l'indique dans une autre page.

Lorsque je veux retourné dans mon formulaire pour y remplir les champs manquant, le code caché de mon formulaire ne s'affiche plus mais il pourtant remplie.

Voici mon code pour plus de visibilité :

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
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
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
 
<script language="javascript">
function check_input(){
var message_alert = "";
 
if(window.document.adminForm.catid.value == "0") {
message_alert +="Veuillez choisir une catégorie \n";
window.document.adminForm.catid.focus();
window.document.adminForm.catid.style.backgroundColor = "#FFCCCC";
}
 
if(window.document.adminForm.conditions.checked == false) {
message_alert +="Veuillez accepter les conditions d'utilisation \n";
window.document.adminForm.conditions.focus();
window.document.adminForm.conditions.style.backgroundColor = "#FFCCCC";
}
 
if (document.adminForm.email_to.value != "")	{
indexAroba = document.adminForm.email_to.value.indexOf('@');
indexPoint = document.adminForm.email_to.value.indexOf('.');
if ((indexAroba < 0) || (indexPoint < 0))		{
	document.adminForm.email_to.style.backgroundColor = "#FFCCCC";
	message_alert += "L'e-mail est incorrect \n";
	}
}
 
if (message_alert == "") {
return true;
} else {
alert(message_alert);
return false;
}
}
 
function afficherBloc(divId)
{
var p = document.getElementById(divId);
with (p.style)
{
if (display == '' || display == 'none') display = ''
}
}
 
function MasquerBloc(divId)
{
var q = document.getElementById(divId);
with (q.style)
{
if (display == '' || display == 'block') display = 'none'
}
}
 </script>
<link href="../../templates/247clean/css/template_css.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jqueryCodeView.js"></script>
 
		<form action="candidature.insert.htm.php" method="post" name="adminForm" onSubmit = "var resultat = check_input(); return resultat;">
		<table width="100%">
		<tr>
			<td width="60%" valign="top">
				<table width="100%" class="adminform">
				<tr>
					<th colspan="2">&nbsp;</th>
				<tr>
					<td width="20%" align="right">
					Cat&eacute;gorie:
					</td>
				  <td width="40%"><select name="catid" size="1" class="inputbox" id="catid">
	<option value="0" selected="selected">- Sélectionner une catégorie -</option>
	<option value="66">Sécurité</option>
	<option value="65">Secrétariat &amp; Accueil</option>
 
	<option value="64">Santé</option>
	<option value="63">Ressources Humaines</option>
	<option value="62">Qualité</option>
	<option value="61">Multimédia &amp; Infographie</option>
	<option value="60">Marketing</option>
 
	<option value="59">Langues</option>
	<option value="58">Juridique &amp; Fiscal</option>
	<option value="57">Immobilier &amp; Construction</option>
	<option value="56">Hôtellerie, Restauration &amp; Tourisme</option>
 
	<option value="55">Gestion de Projet</option>
	<option value="54">Formation, Enseignement &amp; Pédagogie</option>
	<option value="53">Finance &amp; Comptabilité</option>
	<option value="52">Environnement</option>
	<option value="51">Edition, Imprimerie &amp; Presse</option>
 
	<option value="50">Développement personnel &amp; Coaching</option>
	<option value="49">Communication</option>
	<option value="48">Commercial &amp; Vente</option>
	<option value="47">Bureautique</option>
	<option value="46">BTP &amp; Architecture</option>
 
	<option value="45">Banque &amp; Assurance</option>
	<option value="44">Audiovisuel</option>
	<option value="43">Achats &amp; Logistique</option>
	<option value="40">Informatique &amp; Système d'Information</option>
 
</select>
				  </td>
				</tr>
				<tr>
				  <td align="right">
				  Pr&eacute;nom:
				  </td>
				  <td>
				  <input class="inputbox" type="text" id="first" name="firstname" size="50" maxlength="100" />
				  </td>
				</tr>
				<tr>
					<td width="20%" align="right">
					Nom:
					</td>
					<td>
					<input class="inputbox" type="text" name="name" size="50" maxlength="100" />
					</td>
				</tr>
				<tr>
					<td align="right" valign="top">
					Fonction:
					</td>
				  <td>
					<input class="inputbox" type="text" name="con_position" size="50" maxlength="50" /> 
					<em><br>
					(ex : Formateur en Commerce International )	</em>				
					</td>
				</tr>
				<tr>
					<td align="right" valign="top">
					Email:					
					</td>
					<td>
					<input class="inputbox" type="text" name="email_to" size="50" maxlength="100" /> 
					<em><br>
					(Si vous disposez d'un compte google, renseignez la m&ecirc;me adresse e-mail dans ce champ) </em>
					</td>
				</tr>
				<tr>
					<td align="right">
					Adresse:
					</td>
					<td>
					<input class="inputbox" type="text" name="address" size="50" />
					</td>
				</tr>
				<tr>
					<td align="right">
					CP:
					</td>
					<td>
					<input class="inputbox" type="text" name="postcode" size="25" maxlength="10" />
					</td>
				</tr>
				<tr>
					<td align="right">
					Ville:
					</td>
					<td>
					<input class="inputbox" type="text" name="suburb" size="50" maxlength="50" />
					</td>
				</tr>
				<tr>
					<td align="right" valign="top">
					Mobilit&eacute;:
					</td>
				  <td>
					<input class="inputbox" type="text" name="state" size="50" maxlength="20" /> 
					<em><br>
					Liste des d&eacute;partements (ex : 75, 92, 93, 94)</em> </td>
				</tr>
				<tr>
					<td align="right" valign="top">
					Pays:
					</td>
					<td>
					<input class="inputbox" type="text" name="country" size="50" maxlength="50" />
					</td>
				</tr>
				<tr>
					<td align="right">
					T&eacute;l&eacute;phone:
					</td>
					<td>
					<input class="inputbox" type="text" name="telephone" size="25" maxlength="25" />
					</td>
				</tr>
				<tr>
					<td>
					</td>
					<td>
					<b>Diplômes</b>
					</td>
				</tr>
				<tr>
					<td align="right" valign="top">
					Années: 
					</td>
					<td>
						<input class="inputbox" type="text" name="diplome1" size="10" maxlength="10" />
						&nbsp; &nbsp; &nbsp;  Ecole:  
						<input class="inputbox" type="text" name="champ2" size="25" maxlength="25" />
					</td>
				</tr>
				<tr>	
					<td align="right" valign="top">
						&nbsp; &nbsp; Libellé:
					</td>
					<td>
						<input class="inputbox" type="text" name="champ1" size="50" maxlength="50" />&nbsp; &nbsp; 
						&nbsp; &nbsp; Ajouter un diplôme
						<input type="radio" onblur="if(value==''){MasquerBloc('div2'); MasquerBloc('div3')}else{afficherBloc('div2'); afficherBloc('div3')}" id="radio" name="radio" size="50" maxlength="50" />
					</td>
				</tr>				
				<tr id="div2" style="display:none;">
					<td align="right" valign="top">
					Années: 
					</td>
					<td>
						<input class="inputbox" type="text" name="champ" size="10" maxlength="10" />
						&nbsp; &nbsp; &nbsp;  Ecole:  
						<input class="inputbox" type="text" name="champ2" size="25" maxlength="25" />
					</td>
				</tr>
				<tr id="div3" style="display:none;">	
					<td align="right" valign="top">
						&nbsp; &nbsp; Libellé:
					</td>
					<td>
						<input class="inputbox"  type="text" name="champ1" size="50" maxlength="50" />&nbsp; &nbsp;
						&nbsp; &nbsp; Ajouter un diplôme
						<input type="radio" onblur="if(value==''){MasquerBloc('div4'); MasquerBloc('div5')}else{afficherBloc('div4'); afficherBloc('div5')}" id="radio" name="radio" size="50" maxlength="50" />
					</td>	
				</tr>		
				<tr id="div2" style="display:none;">
					<td align="right" valign="top">
					Années: 
					</td>
					<td>
						<input class="inputbox" type="text" name="champ" size="10" maxlength="10" />
						&nbsp; &nbsp; &nbsp;  Ecole:  
						<input class="inputbox" type="text" name="champ2" size="25" maxlength="25" />
					</td>
				</tr>
				<tr id="div3" style="display:none;">	
					<td align="right" valign="top">
						&nbsp; &nbsp; Libellé:
					</td>
					<td>
						<input class="inputbox"  type="text" name="champ1" size="50" maxlength="50" />&nbsp; &nbsp;
						&nbsp; &nbsp; Ajouter un diplôme
						<input type="radio" onblur="if(value==''){MasquerBloc('div4'); MasquerBloc('div5')}else{afficherBloc('div4'); afficherBloc('div5')}" id="radio" name="radio" size="50" maxlength="50" />
					</td>	
				</tr>		
				<tr id="div4" style="display:none;">
					<td align="right" valign="top">
					Années: 
					</td>
					<td>				
						<input class="inputbox" type="text" name="champ" size="10" maxlength="10" />
						&nbsp; &nbsp; &nbsp;  Ecole:  
						<input class="inputbox" type="text" name="champ2" size="25" maxlength="25" />
					</td>
				</tr>
				<tr id="div5" style="display:none;">	
					<td align="right" valign="top">
						&nbsp; &nbsp; Libellé:
					</td>
					<td>
						<input class="inputbox"  type="text" name="champ1" size="50" maxlength="50" />
					</td>	
				</tr>
				<tr>
				  <td align="right" valign="top">Comp&eacute;tences:<br>
			      <p><span class="Style2"><span class="Style3"><em>Chaque comp&eacute;tence not&eacute;e dans ce champ correspond &agrave; un th&egrave;me de formation que vous ma&icirc;trisez.<br>
                  <br>
                    <span class="Style1">Attention&nbsp;! Seuls les mots enregistr&eacute;s dans ce champ sont utilis&eacute;s lors des recherches effectu&eacute;es par le moteur de recherche&nbsp;!</span></em> <em><br>
                    <br>
                    Prenez soins de bien noter tous les th&egrave;mes de formation que vous dispensez</em></span></span><span class="Style3"><em></em></span><em>.</em><br> 
                    </p>
			      </td>
				  <td valign="top"><textarea name="competences" rows="12" cols="70" class="inputbox"></textarea>
				  </td>
				  </tr>
				<tr>
				  <td align="right" valign="top"><p>Exp&eacute;rience:</p>
				    <p align="right"><em> <span class="Style2"> Mettez en avant vos missions de formation. </span><br>  
                    </em></p></td>
				  <td valign="top"><textarea name="experience" rows="10" cols="70" class="inputbox"></textarea></td>
				  </tr>
				<tr>
				  <td align="right" valign="top">Langues:</td>
				  <td><textarea name="langues" rows="3" cols="70" class="inputbox"></textarea></td>
				  </tr>
				<tr>
				  <td align="right" valign="top">&nbsp;</td>
				  <td><textarea  name="charte" cols="70" rows="5" readonly="readonly" wrap="VIRTUAL" class="content" id="charte">CONDITIONS D'UTILISATIONS
 
L´objet de GFF - Groupement des Formateurs de France est de faire la promotion des formateurs indépendants auprès des centres de formations et des entreprises notamment à travers du site  www.france-formateurs.com 
 
Tous les formateurs indépendants ou centres de formation sont prestataires de GFF - Groupement des Formateurs de France. Un contrat de prestation entre le prestataire ou la société proposant un salarié et GFF - Groupement des Formateurs de France sera signé avant le début des prestations.
 
GFF - Groupement des Formateurs de France est une enseigne d’Europa Training Group
 
L’inscription sur le site www.france-formateurs.com est gratuite.
 
Cette Charte énonce des principes de "bonne conduite" permettant à tous les professionnels de la formation (Entreprises, Centres de Formation et Indépendant) d´organiser des cessions de formation dans un climat de confiance, dans un esprit "gagnant - gagnant" et dans le respect de la législation en vigueur.
 
Elle s´applique à tous et vous acceptez de la respecter.
 
Nous vous invitons à nous signaler systématiquement par mail tout manquement à cette Charte par un acteur de la place de marché.
 
Afin de maintenir une qualité irréprochable, GFF - Groupement des Formateurs de France se réserve le droit d´exclure à tout moment et sans préavis un acteur ne respectant pas cette Charte.
 
Ne communiquez jamais votre mot de passe GFF - Groupement des Formateurs de France à un tiers (il engage votre responsabilité sur le site).
 
Il est strictement interdit de déposer sur www.france-formateurs.com, des annonces à caractère discriminatoire (discrimination sexuelle, ethnique ou raciale).
 
Ne mentionner aucun nom de personne ou de société en dehors des champs de saisie prévus à cet effet.
 
Donner à tout moment une image réelle de votre société ou de vos compétences.  
</textarea></td>
				  </tr>
				<tr>
				  <td align="right" valign="top"><input name="conditions" type="checkbox" id="conditions" value="checkbox"></td>
				  <td>Veuillez cocher cette case afin de confirmer que vous avez lu et accept&eacute; l'ensemble des conditions d'utilisation et des r&egrave;gles vis&eacute;es ci-dessus. Assurez vous &eacute;galement que toutes les informations fournies sur cette page sont correctes (ou effectuez &agrave; pr&eacute;sent toutes corrections n&eacute;cessaires). <br>
				    <br>
			      Vous disposez d'un droit d'acc&egrave;s, de modification, de rectification et de suppression des donn&eacute;es qui vous concernent. Vous pouvez, &agrave; tout moment, demander que vos informations soient supprim&eacute;es en nous contactant via le formulaire de contact sur notre site Internet <a href="http://www.france-formateurs.com/">www.france-formateurs.com</a> &agrave; la rubrique contact.<br>
			      <br>
			      Conform&eacute;ment &agrave; la loi du 6 janvier 1978 relative &agrave; l'informatique, aux fichiers et aux libert&eacute;s, modifi&eacute;e en ao&ucirc;t 2004, 
			      EUROPA TRAINING GROUP
			      a d&eacute;clar&eacute; &agrave; la Commission Nationale de l'Informatique et des Libert&eacute;s un traitement automatis&eacute; d'informations
			      nominatives dont la finalit&eacute; principale est :
			      PUBLICATION DE CV FORMATEURS INDEPENDANTS SUR NOTRE SITE INTERNET<br>
			      <br>
			      <strong>Num&eacute;ro de d&eacute;claration CNIL : 1352223 <br>
			      <br>
			      </strong></td>
				  </tr>
				<tr>
				  <td align="right" valign="top">&nbsp;</td>
				  <td><input type="submit" name="Submit" value="Envoyer"></td>
				  </tr>
				</table>
			</td>
		</tr>
		</table>
</form>

**andry.aime** · 18/03/2010, 11h55

Bonjour et Bienvenue sur Developpez

.
Que veux-tu dire par code caché?

Lorsque je veux retourné dans mon formulaire pour y remplir les champs manquant, le code caché de mon formulaire ne s'affiche plus mais il pourtant remplie.

Qui remplie quoi?
Comment tu retournes sur le formulaire?
Avec le bouton back du navigateur?
Si c'est le cas, tu n'y peux rien, ça dépend du navigateur.
Tu rediriges la pages depuis le serveur?
Tu peux stocker les données dans une variable session et faire un echo dans les éléments du formulaire.

**thom48** · 18/03/2010, 12h41

Qui remplie quoi?
Lorsqu'un utilisateur remplie le formulaire et qu'il appuiera sur envoyer.

Deux cas se pose :

1) Il remplie tout correctement et une page s'affiche pour le lui dire ainsi que d'autre information.

2) Il ne remplie pas tout les champs correctement et une page s'affiche en lui disant les champs manquant.

Dans le deuxième cas la personne retournera sur le formulaire avec un bouton retour qui n'est pas créé par moi mais par le logiciel que j'utilise pour créé le site (joomla).

Lorsqu'il se retrouve sur la page du formulaire, les champs cachés qu'il avait remplie préalablement ne sont plus affiché. Pour les ré afficher, il a besoin de cliquer de nouveau sur le bouton radio qui fait apparaitre les champs. Une fois qui clique sur le bouton radio, les champs s'affiche ainsi que son contenu donc il garde bien le contenu du champs

Est-ce assez clair?

Sinon si une personne trouve le moyen de faire la vérification des champs directement sur le page que j'ai publié. ça me conviendrait aussi.

Merci d'avance

**nsanabi** · 18/03/2010, 13h29

sur ton code si ton formulaire n'est pas valide tu annule son post, et dans ta fonction javascript il n'y a aucune redirection: donc comme il t'es possible de passer à une seconde page où tu met tes messages d'erreur????!!!

Sinon si une personne trouve le moyen de faire la vérification des champs directement sur le page que j'ai publié. ça me conviendrait aussi

mettre une div sur ta page, après le formulaire si tu le souhaite.

Code :

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

1
2
3
4
 
<div id="errorlist">
 
</div>

dans ta fonction :

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
 
function check_input(){
var message_alert = "";
 
if(window.document.adminForm.catid.value == "0") {
message_alert +="<li>Veuillez choisir une catégorie </li>";
window.document.adminForm.catid.focus();
window.document.adminForm.catid.style.backgroundColor = "#FFCCCC";
}
 
if(window.document.adminForm.conditions.checked == false) {
message_alert +="<li>Veuillez accepter les conditions d'utilisation </li>";
window.document.adminForm.conditions.focus();
window.document.adminForm.conditions.style.backgroundColor = "#FFCCCC";
}
 
if (document.adminForm.email_to.value != "")	{
indexAroba = document.adminForm.email_to.value.indexOf('@');
indexPoint = document.adminForm.email_to.value.indexOf('.');
if ((indexAroba < 0) || (indexPoint < 0))		{
	document.adminForm.email_to.style.backgroundColor = "#FFCCCC";
	message_alert += "<li>L'e-mail est incorrect </li>";
	}
}
 
if (message_alert == "") {
return true;
} else {
document.getElementById("errorlist").innerHTML="<ul>"+message_alert +"</ul>";
return false;
}
}

**thom48** · 18/03/2010, 14h33

Merci beaucoup, tout était devant mais je me compliquais la vie à le faire dans une autre page.

Il faut dire que ce n'est pas moi qui ai fait ce code. Je suis en train de le reprendre.

Encore merci pour votre aide.

**thom48** · 18/03/2010, 14h44

Code :

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

<input type="radio" onblur="if(value==''){MasquerBloc('div4'); MasquerBloc('div5')}else{afficherBloc('div4'); afficherBloc('div5')}" id="radio" name="radio" size="50" maxlength="50" />

Code :

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

1
2
3
4
5
6
7
8
function afficherBloc(divId)
{
var p = document.getElementById(divId);
with (p.style)
{
if (display == '' || display == 'none') display = ''
}
}

Encore une petite question.

Lorsque je fais appel a ma fonction afficherBloc(), je dois appuyer sur n'importe quel endroit de la page pour que les champs cachés s'affichent. Je voudrais que cela ce face instantanément.

**nsanabi** · 18/03/2010, 15h36

Envoyé par thom48

je dois appuyer sur n'importe quel endroit de la page pour que les champs cachés s'affichent

c'est normal puisque tu fais appel à la fonction dans l'évènement onblur (qui signifie quand l'input text perd le focus)

Envoyé par thom48

Je voudrais que cela ce face instantanément.

je n'ai pas saisi quand tu veux le faire exactement, mais tu as le choix entre plusieurs évènements : onfocus, onclick, ... et onchange(mais qui va attendre que tu quitte le champs aussi), tu remplace le onblur par celui qui te conviens.

**thom48** · 18/03/2010, 15h41

Il n'est pas possible de faire apparaitre les champs au moment ou je clique sur mon bouton radio.

thomas

**nsanabi** · 18/03/2010, 15h57

onclick

**thom48** · 18/03/2010, 16h39

Merci beaucoup

je n'avait pas compris ton message. Je pensais que toutes les fonctions que tu m'indiquait, je devais attendre que je quitte le champ pour que les champs apparait.

mais tu as le choix entre plusieurs évènements : onfocus, onclick, ... et onchange(mais qui va attendre que tu quitte le champs aussi)

**nsanabi** · 19/03/2010, 12h35

je parlais de l'evenement onchange, sinon jaurai dis "qui vont attendre".
bon courage

formulaire javascript

JavaScript

Discussions similaires

Partager

Partager