Discussion :

[javaboy]

Bonjour à tous ,
Actuellement en train de dévellopper un module intranet au sein de mon entrprise je sollicite votre éxpérience:

Je désire réaliser un formulaire servant à demander une ouverture de comtpe au sein du service IT lors de l'arrivée d'un nouvel employé.
Actuellement j'ai devellopé la première partie du form, cette partie conditionne une seconde partie , et c'est la que je vous sollicite :
Mon code pour le moment :

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
<link rel="stylesheet" type="text/css" href= "_scripts/formStyles.css">
 <FORM name="adduser" id="adduser">
 
  <div id="titreForm">Creation</div>
 
  <div id="corpForm">
	<fieldset id="coordonnees">
		<legend>Informations</legend>
			<br/>
			<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" title="Veuillez choisir le type de contrat" tabindex="6" onfocus="this.className='focus';" onblur="this.className='normal';" >
					<OPTION VALUE="CDI.php">Choix</OPTION>
					<OPTION VALUE="CDI.php">CDI</OPTION>
					<OPTION VALUE="CDD.php">CDD</OPTION>
					<OPTION VALUE="Intérim.php">Intérimaire</OPTION>
					<OPTION VALUE="Stage.php">Stage</OPTION>
				</select>
		</p>
		<br/>
		<em>Champs * obligatoires<em>
	</fieldset>
  </div>	
</FORM>

Ce qui conditionne la deuxieme partie de mon code est le type de contrat. Je ne sais pas si il faut faire en js un ondatachange sur le choix de la liste et faire un div multiple qui s'afficherai selon le choix, ou deux page PHP une qui serai appelée par CDI et l'autre par le reste... Sachant que le but final est d'envoyer un mail au service IT avec toutes les informations .
J'espere etre asser clair.
Merci pour vos suggestions

[mikaoul]

Bonjour,
Je ne suis pas sûr d'avoir compris ton problème: tu veux que lorsqu'on clique sur un nom de contrat (CDI, Interim,...), il apparaisse quelque chose en dessous ?

[javaboy]

Pardon si je me suis mal exprimé ,
En fait lorsque mon utilisateur va cliquer sur CDI il va y avoir un deuxième formulaire qui lui demandera via des check box :
si il faut :
sap
notes
...

Mais si mon utilisateur clique sur autre chose que CDI alors c'est un autre type de formulaire qui s'affiche .
Cependant je souhaiterai afficher ce second formualire sans recharger ma page en entier afin de ne pas sauvegarder aupresalable les variable nom, prenom,...

Pour finir j'envoit en @ tous les renseignements issues des formulaires .
J'espere avoir mieu exposé mon probleme

[mikaoul]

Ok dac.
Pour éviter de recharger ta page, tu peux utiliser le javascript:

Lorsque l'utilisateur à sélectionner le type de contrat tu affiche le formulaire correspondant:

Code :

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

1
2
3
4
5
 
<select id="contrat" ... onchange="afficherFormulaire();" >
...
</select>
<div id="suite"></div>

Partie javascript

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function afficherFormulaire(){
 //récupère la valeur sélectionné
 var sel = document.getElementById('contrat');
 var contrat = sel.options[sel.SelectedIndex].value;
 
//tu affiche ce qu'il faut dans la balise div suite
 if(contrat == "CDI"){
  document.getElementById('suite').innerHTML= 'code du formulaire pour CDI';
 }else{
  document.getElementById('suite').innerHTML= 'code du formulaire pour les autres';
 }
}

Voilà, en espérant t'avoir éclairé !

[javaboy]

Meric pour ta réponse concise et rapide,
Je vais me pencher sur ta réponse afin de bien comprendre tout ce que je fait ,
je met résolu en attendant. Merci

Cela marche correctement j'ai un peu modifier le code

Code :

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

1
2
3
4
5
6
7
8
function afficherFormulaire(value){
//tu affiche ce qu'il faut dans la balise div suite
 if(value == "cdi"){
  document.getElementById('suite').innerHTML= '<H1>Coucou<H1>';
 }else{
  document.getElementById('suite').innerHTML= 'code du formulaire pour les autres';
 }
}

mais est-ce que la syntaxe diffère quand on met du code HTML dans le javascript ou est ce que je peut faire page html et l'appeller via js ?

Du genre:

Code :

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

document.getElementById('suite').innerHTML= 'Appel la page cdi.php qui contient le formulaire';

[mikaoul]

ok, n'hésites s'il y a un soucis. .

[javaboy]

Je me demande pourquoi je me complique la vie je vient de découvrir un truc assez sympas qui est la propriete display des Div je pense exploiter cette piste ...
Merci pour ton aide encore une fois .

[mikaoul]

Ben en fait je suis pas sûr que la fonctionnalité display soit approprié dans le sens ou tu vas écrire deux formulaire (CDI ou pour les autres contrats) et lorsque tu voudras traiter le formulaire en php pour envoyer l'e-mail, la page t'aura tout envoyé y compris la partie caché car elle est caché visuellement mais au niveau du code source elle est toujours là.
Tu risques d'avoir des erreurs à gérer dans ta fonction php. Mais c'est a essayer quand même :-)

[bitbis]

mikaoul à raison, je serais toi j'utiliserai plutot innerHTML.