Cache cache de DIV sous conditions
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:
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:
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:
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 .
