Discussion :

[javaboy]

Bonjour à tous ,
Me revoila pour de nouvelles aventures ....

En fait je creer un formulaire avec des div qui vont s'afficher ou non de maniere conditionnel.
1er condition : Si contrat.value =cdi
Donc afficher formcdi
sinon
Afficher formautre
Si les différence entre les date de formautre sont > 3 mois
Afficher form3mois
Sinon afficher form_moins_3mois

Voici le code du html :

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
<script src="_scripts/form.js"></script> 
<script type="text/javascript" src="_scripts/formValidation.js"></script>
<link rel="stylesheet" type="text/css" href= "_scripts/formStyles.css">
 
<!------------Debut du formulaire principal------------->
<FORM name="adduser" id="adduser" method="post" action="mailto.php" onsubmit="return valider(this)">
 
  <div id="titreForm">Creation</div>
 
  <div id="corpForm">
	<fieldset id="coordonnees">
		<legend>Informations</legend>
			<br/>
		<p>	
			<label for="nom" title="Veuillez saisir le nom en lettres majuscules" class="oblig">* Nom :</label>
			<input type="text" name="nom" id="nom" title="Veuillez saisir le nom en lettres majuscules" tabindex="1" onfocus="this.className='focus';" onblur="this.className='normal';" onchange="javascript:this.value=this.value.toUpperCase();" />
		</p>
		<p>
			<label for="prenom" title="Veuillez saisir le prénom " class="oblig">* Prénom :</label>
			<input type="text" name="prenom" id="prenom" title="Veuillez saisir le prénom" tabindex="2" onfocus="this.className='focus';" onblur="this.className='normal';" />
		</p>
		<p>
			<label for="service" title="Veuillez saisir le numéro de service" class="oblig">* Service :</label>
			<input type="text" name="service" id="service" title="Veuillez saisir le numéro de service" tabindex="3" onfocus="this.className='focus';" onblur="this.className='normal';" />
		</p>
		<p>
			<label for="poste" title="Veuillez renseigner le type de poste"> Poste à pourvoir :</label>
			<input type="poste" name="poste" id="poste" title="Veuillez informer le type de poste" tabindex="4" onfocus="this.className='focus';" onblur="this.className='normal';" />
		</p>
		<p>
			<label for="commentaires" title="Indiquez vos commentaires ici">Commentaires : </label>
			<textarea rows="3" name="commentaires" id="commentaires" title="Commentaires" tabindex="5" onfocus="this.className='focus';" onblur="this.className='normal';"></textarea>
		</p>
		<p>
			<label for="contrat" title="Important: Séléctionnez correctement le type de contrat" class="oblig">* Contrat :</label>
				<select id="contrat" name="contrat" title="Veuillez choisir le type de contrat" tabindex="6" onfocus="this.className='focus';" onblur="this.className='normal';" onchange="afficherFormulaire(this.value);">
					<OPTION VALUE="choix">Choix</OPTION>
					<OPTION VALUE="cdi">CDI</OPTION>
					<OPTION VALUE="cdd">CDD</OPTION>
					<OPTION VALUE="interim">Intérimaire</OPTION>
					<OPTION VALUE="stage">Stage</OPTION>
				</select>
		</p>
		<br/>
		<em>Champs * obligatoires</em> 
		<br />
	</fieldset>	
	<br /><br />
 
 
<!--Formualire d'option dans le cadre d'un CDI-->
  <div id="formcdi">
    	Veuillez déterminer quel type de compte ouvrir dans les disponibilitées ci dessous :
		<fieldset id="options">
			<br>
				<legend>Options</legend><br />
				<p>
					<label for="notes" title="Ouvrir un compte lotus Notes">Lotus Notes (+16€ mensuel)</label>
					<input type="checkbox" name="notes" id="notes" value="Lotus Notes" checked="checked" tabindex="7" />
					<br />
					<label for="internet" title="Compte d'accés à Internet">Internet</label>
					<input type="checkbox" name="internet" id="internet" value="internet" tabindex="8" />
					<br />
					<label for="evodvs" title="EvoDvs rapatrier les pièces Mercedes .tif">EvoDvS</label>
					<input type="checkbox" name="evodvs" id="evodvs" value="EvoDvs" checked="checked" tabindex="9" />
					<br />
					<label for="tdvs" title="T_Dvs rapatrier les pièces DaimlerChrysler .">TDvs (+8€ mensuel)</label>
					<input type="checkbox" name="tdvs" id="tdvs" value="T_Dvs" tabindex="10" />
					<br />
					<label for="sap" title="Compte SAP ">SAP (+40€ mensuel)</label>
					<input type="checkbox" name="sap" id="sap" value="SAP" checked="checked" tabindex="11" />
					<br />
					<label for="fdoklecture" title="Compte d'acces à F-DOCK en lecture seulement">F-Dok lecture</label>
					<input type="checkbox" name="fdoklecture" id="fdoklecture" value="Fdok Lecture" tabindex="12" />			
					<br />
					<label for="fdokmodif" title="Compte d'acces à F-DOCK en modification">F-Dok Modification</label>
					<input type="checkbox" name="fdokmodif" id="fdokmodif" value="Fdok Modification" tabindex="13" />
					<br />
					<label for="epc" title="Ewanet EPC : Gestion des pièces de rechange">Ewanet EPC</label>
					<input type="checkbox" name="epc" id="epc" value="Ewanet EPC" tabindex="14" />
					<br />
					<label for="wis" title="Ewanet WIS ">Ewanet WIS</label>
					<input type="checkbox" name="wis" id="wis" value="Ewanet WIS" tabindex="15" />
					<br />
					<label for="novis" title="Novis : Configurateur (vendeurs)">Novis</label>
					<input type="checkbox" name="novis" id="novis" value="Novis" tabindex="16" />
					<br />
					<label for="net" title="Services NET">Services Net</label>
					<input type="checkbox" name="net" id="net" value="Service NET" tabindex="17" />
					<br />
					<label for="sitz" title="Implantation de sièges">Sitzeinteilung</label>
					<input type="checkbox" name="sitz" id="sitz" value="Sitzeinteilung" tabindex="18" />
					<br />
					<br />
					<label for="remplacement" >Remplacement :</label>
					<input type="text" name="remplacement" id="remplacement" title="Veuillez indiquer si il sagit d'un remplacment" tabindex="19" onfocus="this.className='focus';" onblur="this.className='normal';" />
				</p>
				<br/>
		</fieldset>
		<br/>
		<INPUT type="submit" value="Envoyer">
		<br/>
    </div>
<!--Fin de formulaire options pour les CDI-->
 
<!--Formulaire autre que CDI--->
	<div id="formautre">
		<fieldset id="Dates">
		 <legend>Dates</legend>
			<br/>
			<p>
				<label for="datein" class="oblig">* Date début de contrat :</label>
				<input type='text' value="15/12/2007" size="10" name='datein' id='datein' title="Precisez la date de début de contrat" tabindex="20" onfocus="this.className='focus';" onblur="this.className='normal';">
				<span class="legende">ex : 14/09/2007</span>
			</p>
			<br/>
			<p>
				<label for="dateout" class="oblig">* Date de fin de contrat :</label>
				<input type='text' value="" size="10" name='dateout' id='dateout' title="Precisez la date de fin de contrat" tabindex="21" onfocus="this.className='focus';" onblur="this.className='normal';">
				<span class="legende">ex : 31/12/2007</span>
			</p>
		</fieldset>
		<br/>
	</div> 
<!--Fin de formulaire 'options' autre que pour les CDI-->
 
<!--Formulaire options pour les CDD de plus de 3 mois-->
	<div id="form3mois">
		<fieldset id="options">
			<legend>Options</legend>
				<br/>
				<p>
					<label for="notes" title="Ouvrir un compte lotus Notes">Lotus Notes (+16€ mensuel)</label>
					<input type="checkbox" name="notes" id="notes" value="Lotus Notes" checked="checked" tabindex="22" />
					<br />
					<label for="sap" title="Compte SAP ">SAP (+40€ mensuel)</label>
					<input type="checkbox" name="sap" id="sap" value="SAP" tabindex="23" />
					<br />
					<label for="evodvs" title="EvoDvs rapatrier les pièces Mercedes .tif">EvoDvS</label>
					<input type="checkbox" name="evodvs" id="evodvs" value="EvoDvs" tabindex="24" />
					<br />
				</p>
		</fieldset>
		<br/>
			<INPUT type="submit" value="Envoyer">
	</div> 
<!--Fin des option des CDD de plus de trois mois-->
 
<!--Formulaire options pour les CDD de plus de 3 mois-->
	<div id="form_moins_3mois">
		<fieldset id="options">
			<legend>Options</legend>
				<br/>
				<p>
					L'utilisateur se verra attribuer un compte générique de type EEVO_062_XXXX.
				</p>
		</fieldset>
		<br/>
			<INPUT type="submit" value="Envoyer">
	</div> 
<!--Fin des option des CDD de moins de trois mois-->
 
 
<!--Mauvais choix dans contrat donc affiche un div erreur--> 
   <div id="formchoix">
	   <fieldset id="erreur">
	     <legend>Erreur</legend>
			<br>Veuillez selectionner un choix dans la liste déroulante nommée <b><u>* Contrat :</u></b>
		</fieldset>
	</div>
 
 <!--Fin de DIV principal  COPRFORM--->
 </div>
 
 <!--Pied du formulaire-->
 <div id="piedForm"></div>
 
 <!--Fin de formulaire principal --->
 </Form>

Le code du JS :

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
//Fonction CalculDate qui calcul la différence entre la date de début et la date de fin de contrat
function calculDate(){
	var datein = document.getElementById('datein').value;
	var dateout= document.getElementById('dateout').value;
	var sec = 24*3600*1000;
	var troismois = 91.25;
 
	//Datein
	var j_datein=(datein.substring(0,2));
    var m_datein=(datein.substring(3,5));
	var m_datein = m_datein -1;
    var a_datein=(datein.substring(6));
 
	//Dateout
	var j_dateout=(dateout.substring(0,2));
    var m_dateout=(dateout.substring(3,5));
	var m_dateout = m_dateout -1;
    var a_dateout=(dateout.substring(6));
 
	var Ma_datein = new Date(a_datein,m_datein,j_datein);
	var Ma_dateout =new Date(a_dateout,m_dateout,j_dateout);
 
	var diff_date =(Math.abs((Ma_datein.getTime()-Ma_dateout.getTime())/sec));
 
	if(diff_date < troismois){
		document.getElementById('from_moins_3mois').style.display="block"; 
		document.getElementById('from3mois').style.display="none";  
	}else{
		document.getElementById('from3mois').style.display="block";  
		document.getElementById('from_moins_3mois').style.display="none";
	}
}
 
/*-----------------------------------------------------------------------------------------*/
//affiche ou non les différentes balsies
function afficherFormulaire(value){
 
//Si contrat est vide
 if(value ==""){
	document.getElementById('formcdi').style.display="none"; 
	document.getElementById('formchoix').style.display="none"; 
	document.getElementById('formautre').style.display="none"; 
	document.getElementById('form3mois').style.display="none"; 
	document.getElementById('from_moins_3mois').style.display="none";  
 
//Si contrat est choix
 }else if (value == "choix"){
	document.getElementById('formcdi').style.display="none"; 
	document.getElementById('formchoix').style.display="block"; 
	document.getElementById('formautre').style.display="none"; 
	document.getElementById('form3mois').style.display="none";
	document.getElementById('from_moins_3mois').style.display="none";  	
 
//Si contrat est CDI
 }else if(value == "cdi"){
	document.getElementById('formcdi').style.display="block"; 
	document.getElementById('formchoix').style.display="none"; 
	document.getElementById('formautre').style.display="none"; 
	document.getElementById('form3mois').style.display="none"; 
	document.getElementById('from_moins_3mois').style.display="none";  
 
//Si contrat et CDD interminaire ou stages
 }else{
	document.getElementById('formcdi').style.display="none"; 
	document.getElementById('formchoix').style.display="none"; 
	document.getElementById('formautre').style.display="block";
	calculDate();
 }
}

Et le css

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
/*** Mise en forme générale de la page ***/
p#footer {
	border-top: 1px dotted black;
	padding-top: 1em;
}
 
/*** Mise en forme du formulaire ***/
#adduser {
	border: none;
	margin: 0;
	padding: 0;
	width: 40em;	/*** Largeur du formulaire ***/
	text-align :center;
}
#titreForm, #piedForm {	/*** Mise en forme du titre et du pied de formulaire ***/
	font: bold 1.1em arial, hevetica, sans-serif;
	color: white;
	background: black;
	margin: 0;
	padding: .5em;
}
#piedForm {
	text-align: right; /*** Les boutons sont alignés à droite ***/
}
#piedForm input {
	font-weight: bold; /*** Pour améliorer la lisibilité des boutons ***/
	margin-left: 1em;
}
#corpForm {	/*** Mise en fome du corp du formulaire (bordure, couleur du fond...) ***/
	border: 1px solid black;
	color: black;
	background: #ffffff;
	margin: 0;
	padding: 1em;
}
#corpForm fieldset {	/*** Mise en forme des cadres ***/
	margin: 0;
	font-style: normal;
	padding: 0 1em 1em;
}
#corpForm legend {	/*** Mise en forme des titres des cadres ***/
	font-weight: bold;
	color: black;
	background: transparent;
}
 
#corpForm p {	/*** Mise en forme des lignes du formulaire ***/
	padding: .2em 0;
	margin: 0 0 .2em 0;
}
 
#corpForm fieldset#coordonnees label {	/*** Mise en forme des intitulés de champs ***/
	float: left;
	width: 30%;						/*** Les intitulés prennent 1/3 de la largeur totale du formulaire... ***/
	text-align: right;				/*** alignés à droite***/
	margin: 0;
	padding: 0 .5em 0 0;
	line-height: 1.8;				/***centrés verticalement ***/
}
 
#formcdi#options label {	/*** Mise en forme des intitulés de champs ***/
	float: left;
	width: 60%;						/*** Les intitulés prennent 1/3 de la largeur totale du formulaire... ***/
	text-align: left;				/*** alignés à droite***/
	margin: 0;
	padding: 0 .5em 0 0;
	line-height: 1.8;				/***centrés verticalement ***/
}
 
#formautre#options label {	/*** Mise en forme des intitulés de champs ***/
	float: left;
	width: 60%;						/*** Les intitulés prennent 1/3 de la largeur totale du formulaire... ***/
	text-align: left;				/*** alignés à droite***/
	margin: 0;
	padding: 0 .5em 0 0;
	line-height: 1.8;				/***centrés verticalement ***/
}
 
#form3mois#options label {	/*** Mise en forme des intitulés de champs ***/
	float: left;
	width: 60%;						/*** Les intitulés prennent 1/3 de la largeur totale du formulaire... ***/
	text-align: left;				/*** alignés à droite***/
	margin: 0;
	padding: 0 .5em 0 0;
	line-height: 1.8;				/***centrés verticalement ***/
}
 
#corpForm label:hover, #piedForm input {
	cursor: pointer;	/*** apprendre aux utilisateurs à cliquer sur les intitulés ***/
}
#corpForm label.oblig {
	font-weight: bold;	/*** Mise en évidence des champs obligatoires ***/
}
#corpForm .legende {	/*** Mise en forme des aides contextuelles ***/
	font-style: italic;
	color: #666;
	background: transparent;
	margin: 0;
	padding: 0;
}
 
#corpForm .focus {	/*** Mise en avant des champs en cours d'utilisation ***/
	background: beige;
	color: black;
}
#corpForm .normal {	/*** Retour à l'état normal après l'utilisation ***/
	background: white;
	color: black;
}
 
/*** Mise en forme des div cachés ***/
#formcdi {
	display  : none ;
}
 
#formchoix {
	display  : none ;
}
 
#formautre {
	display  : none ;
}
 
#form3mois{
	display : none ;
}
 
#form_moins_3mois {
	display : none ;
}

Problemes :
1.lorsque je selectionne un contrat il me retourne une erreur de type objet requis
2.Il ne m'affiche pas les div form3mois et form_moins_3mois

En esperent que mon code ne soit pas trop fastidieux a comprendre je vous remercie pour l'aide .

[E.Bzz]

Bonjour,
pour le 1)

Code :

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

function afficherFormulaire(valeur){

"value" étant un terme réservé JS, il est ambigü tel qu'utilisé dans ta fonction (comme paramètre) ...

Pour le 2) cet affichage étant géré dans calculDate(), et l'un ou l'autre devant être affiché, c'est qu'il doit y avoir une erreur JS dans cette fonction ... Pas de message ?

A+

[E.Bzz]

Pour le 2) cet affichage étant géré dans calculDate(), et l'un ou l'autre devant être affiché, c'est qu'il doit y avoir une erreur JS dans cette fonction ...

Code :

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

1
2
var m_datein=(datein.substring(3,5));
var m_datein = m_datein -1;

Double déclaration !
=> enlève le 2° "var".
Attention aux types, par contre : tu tentes ici des gérer du numérique dans une variable string ...

A+

[javaboy]

D'acc merci pour vos réponse en ce qui concerne le value je pense être obligé de l'utiliser car il est donné par le standar dans la mesure ou c'esut une valeur issue d'une liste qui contient des options donc value ?
Existe t-il une autre manière

[javaboy]

Mon cache cache de div fonctionne , j'ai implémenter un bouton qui appel calculDate() et c'est lui même qui s'occupe de modifier les div.display.
Maintenant je vais essayer de virer le boutton afin d'avoir une interface la plus légère possible et donc ne pas surcharger mon utilisateur de boutton ,
A votre avis est ce qu'il est possbile de mettre sur le champs date une fonction qui annalyserais chaque touche de mon utilisateur pour que ce soit du numérique et / et que ce soit du type DD/MM/YYYY une fois que c'est une chaine syntaxique correcte appeler la fonction calculDate() ??

[E.Bzz]

D'acc merci pour vos réponse en ce qui concerne le value je pense être obligé de l'utiliser car il est donné par le standar dans la mesure ou c'esut une valeur issue d'une liste qui contient des options donc value ?
Existe t-il une autre manière

Je ne parlais pas de la propriété "value", mais du nom du paramètre de ta fonction
Je t'ai proposé "valeur" (cf. #2), mais "toto" ferait aussi l'affaire ...

A+

[javaboy]

Ahhh ok j'avait mal compris ou tout simplement tres mal lut .
Merci pour ces informations .