Formulaire select : afficher/Masquer un autre formulaire en fonction du choix

Version imprimable

Voir 40 message(s) de cette discussion en une page

23/03/2008, 18h21
Pitufo

Eh bien non justement ce ne sont pas les mêmes formulaires regarde bien;)...
23/03/2008, 19h32
htr999
salut
j'ai eu ça avec la console d'erreurs

Citation:

Erreur : document.form_entreprise has no properties
Fichier source : file:///C:/Workspace/wamp/www/forumDeveloppez/test30.html
Ligne : 26

qui correspond à
Code:

1 2 3 function affiche_autre() { if (document.form_entreprise.type_entreprise.selectedIndex == 3)
dans ton code FORM_ENTREPRISE est une DIV, déclarée avec attribut ID et non pas NAME !.!

propal: à la place de
Code:

1 2 3 <div id="form_entreprise" style="visibility:hidden"> <form method="post" action="">
essaie de changer en
Code:

1 2 3 <div id="form_entreprise" style="visibility:hidden"> <form name="form_entreprise" method="post" action="">
pareil pour FORM_ASSOCIATION.

on verra bien par la suite :P
a+
24/03/2008, 00h06
Pitufo

Bah merci beaucoup httr69 pour ton aide précieuse c'était effectivement la d'où venait le problème...
Encore merci pour tes conseils;)
24/03/2008, 00h13
htr999

de rien, sinon l'affichage est encore embêtant. tu pourrais essayer la construction dynamique de page (avec innerHTML) ou tester le code donné par jumano

a+
24/03/2008, 00h16
Pitufo

Oui je viens de le remarquer à l'instant je vais tester...En fait le problème d'affichage n'est pas le meme que cité au dessus : si l'on fait s'afficher une premiere fois le "input" caché et que l'on change la valeur du premier select ensuite en mettant par exemple l'option "particulier", ce "input" restera affiché sur la page, parce que la valeur du selct "type activité sera toujours "autre"...
Je ne sais pas si je suis clair...
Je te tiens au courant...;)
a+
24/03/2008, 00h21
Pitufo

Juste une question, dans le code donné par "Jumano", cela entraine un rafraichissement de la page.Celui ci entraine t-il forcement la perte des données rentrées au préalable dans le formulaire...?
24/03/2008, 09h57
Jumano
Bonjour,
le rafraichisement entraîne effectivement la perte des données entrées dans ton formulaire.
Sauf si tu récupère tes données comme ceci :
Si tu as un champs nommé "nom" par exemple tu récupère ta variable après le rafraichissement (submit du form) en indiquant dans la "value" de ton champs le nom de la variable à récupérer .
Code:

1 2 <input name="nom" type="text" id="nom" value="<?php echo $_GET['nom'] ; ?>" />
Ta variable commence par $_GET si ton formulaire utilise method="GET" et $_POST si ton formulaire utilise method="POST".

Re,
Peut être une petit astuce pour ne plus que t'es champs cachés reste affichés sur le onchange de ta sélection "actvité".
Comme tu n'as pas de rafraichissement de ta page les valeurs de tes selects ne sont pas modifiés.
Tu peux essayé ceci :
Code:

1 2 3 4 5 function rafraichissement() { document.getElementById('autre_entreprise').style.visibility = 'hidden'; document.getElementById('autre_association').style.visibility = 'hidden'; }
Fonction que tu appelles sur le onchange :
Code:

1 2 <label><strong>Votre activité :</strong></label> <select name="activite" OnChange="affiche_formulaire(); return rafraichissement();">
Ce qui permet de remettre les champs "hidden".

Diviser en deux ta fonction "affiche_autre"
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function affiche_autre_entreprise() { if (document.form_entreprise.type_entreprise.selectedIndex == 3) document.getElementById('autre_entreprise').style.visibility = 'visible'; else document.getElementById('autre_entreprise').style.visibility = 'hidden'; } function affiche_autre_association() { if (document.form_association.type_association.selectedIndex == 2) document.getElementById('autre_association').style.visibility = 'visible'; else document.getElementById('autre_association').style.visibility = 'hidden'; }
Car sinon elle teste les valeur des deux selects et affiche les deu champs cachés.

Ensuite dans ton form_entreprise :
Code:

1 2 <label><strong>Type de société :</strong></label> <select name="type_entreprise" OnChange="affiche_autre_entreprise();">
et dans le form_association :
Code:

1 2 <label><strong>Type d'association</strong></label> <select name="type_association" OnChange="affiche_autre_association();">
Ce n'est peut être pas très académique mais bon çà à l'air de fonctionner... ;)

une solution pour éviter les blancs avec des éléments CSS sans rafraichissement de page.
voici un exemple simplificateur.

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
<head>
<script>
function affiche_formulaire(){
// Particulier
if (document.votre_activite.activite.selectedIndex == 0)
document.getElementById('spanParticulier').style.visibility = 'visible';
else
document.getElementById('spanParticulier').style.visibility = 'hidden';
 
// Association
if (document.votre_activite.activite.selectedIndex == 1)
document.getElementById('spanAssociation').style.visibility = 'visible';
else
document.getElementById('spanAssociation').style.visibility = 'hidden';
 
// Entreprise
if (document.votre_activite.activite.selectedIndex == 2)
document.getElementById('spanEntreprise').style.visibility = 'visible';
else
document.getElementById('spanEntreprise').style.visibility = 'hidden';
}
</script>
</head>
 
<body> 
<form name="votre_activite" action="" method="post"> 
	<label><strong>Votre activité :</strong></label>
	<select name="activite" OnChange="affiche_formulaire();">
		<option value="particulier" selected>Particulier</option>
		<option value="association">Association</option>
		<option value="entreprise">Entreprise</option>
	</select>
</form>
<span id= "spanParticulier" style="position:absolute; top:40px; left:10px; visibility:visible;">
	<form name="formParticulier" method="POST">
		Name Particulier: <input type="text" name="nom"/>
	</form>
</span>
<span id="spanAssociation" style="position:absolute; top:40px; left:10px; visibility:hidden;">
	<form name="formAssociation" method="POST">
		Name Association: <input type="text" name="nom"/>
	</form>
</span>
<span id="spanEntreprise" style="position:absolute; top:40px; left:10px; visibility:hidden;">
	<form name="formEntreprise" method="POST">
		Name Entreprise: <input type="text" name="nom"/>
	</form>
</span>
</body>

24/03/2008, 11h16
Jumano

Bien vu, je n'avais pas pensé à la "position:absolute" pour enlever le décalage dans le "style" ...;)

pour les options de type...

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
<head>
<script>
function affiche_formulaire(){
var choix = document.votre_activite.activite.selectedIndex;
 
document.getElementById('spanParticulier').style.visibility = 'hidden';
document.getElementById('spanAssociation').style.visibility = 'hidden';
document.getElementById('spanEntreprise').style.visibility  = 'hidden';
 
document.getElementById('spanParticulier').style.visibility = (choix==1)? 'visible' : 'hidden';
document.getElementById('spanAssociation').style.visibility = (choix==2)? 'visible' : 'hidden';
document.getElementById('spanEntreprise').style.visibility  = (choix==3)? 'visible' : 'hidden';
}
 
function autreType(numChoix, idType, divName, label){
	var choix = document.votre_activite.activite.selectedIndex;
	if (choix == numChoix){
		elemDiv = document.getElementById(divName);
		if (document.getElementById(idType).selectedIndex == numChoix){
			elemDiv.innerHTML = label+" <input type='text name='autre_"+idType+"'/>";
		}
		else
			elemDiv.innerHTML = "";
	}
}
</script>
</head>
 
<body> 
<form name="votre_activite" action="" method="post"> 
	<label>Votre activité :</label>
	<select name="activite" OnChange="affiche_formulaire();">
		<option value="" selected>Choisir une activité</option>
		<option value="particulier">Particulier</option>
		<option value="association">Association</option>
		<option value="entreprise">Entreprise</option>
	</select>
</form>
<span id= "spanParticulier" style="position:absolute; top:40px; left:10px; visibility:hidden;">
	<form id="formParticulier" name="formParticulier" method="POST">
		Name Particulier: <input type="text" name="nom"/><br/>
	</form>
</span>
<span id="spanAssociation" style="position:absolute; top:40px; left:10px; visibility:hidden;">
	<form id="formAssociation" name="formAssociation" method="POST">
		Name Association: <input type="text" name="nom"/><br/>
		<label>Type d'association</label>
		<select id="type_association" name="type_association" OnChange="autreType(2,'type_association','inputTypeAutreAssociation','Indiquez le type de votre association:');">
			<option value="sportive">Sportive</option>
			<option value="politique">Politique</option>
			<option name="autre">Autre</option>
		</select>
		<div id="inputTypeAutreAssociation"></div>
	</form>
</span>
<span id="spanEntreprise" style="position:absolute; top:40px; left:10px; visibility:hidden;">
	<form id="formEntreprise" name="formEntreprise" method="POST">
		Name Entreprise: <input type="text" name="nom"/><br/>
		<label>Type de société:</label>
		<select id="type_entreprise" name="type_entreprise" OnChange="autreType(3,'type_entreprise','inputTypeAutreEntreprise','Indiquez le type de votre entreprise:');">
			<option value="pme">P.M.E</option>
			<option value="sa">S.A</option>
			<option name="sarl">S.A.R.L</option>
			<option name="autre">Autre</option>
		</select>
		<div id="inputTypeAutreEntreprise"></div>
	</form>
</span>
</body>

Juste une petite modification suite à mon message "#28 " dans la fonction rafraichissement :
Code:

1 2 3 4 5 6 7 function rafraichissement() { document.getElementById('autre_entreprise').style.visibility = 'hidden'; document.form_entreprise.type_entreprise.selectedIndex = 0; document.getElementById('autre_association').style.visibility = 'hidden'; document.form_association.type_association.selectedIndex = 0; }
Remettre à zéro les index de tes "select" sinon qu'en tu reviens dessus, la valeur "autres" est toujours affichée.

Bon alors tout d'abord, merci pour votre aide à tous encore une fois.
Après quelques modifications en suivant vos conseils, j'obtiens ce code :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>activite</title>
 
<script>
function affiche_formulaire(){
var choix = document.votre_activite.activite.selectedIndex;
 
document.getElementById('spanAssociation').style.visibility = 'hidden';
document.getElementById('spanEntreprise').style.visibility  = 'hidden';
 
document.getElementById('spanAssociation').style.visibility = (choix==2)? 'visible' : 'hidden';
document.getElementById('spanEntreprise').style.visibility  = (choix==3)? 'visible' : 'hidden';
}
 
function autreType(numChoix, idType, divName, label){
	var choix = document.votre_activite.activite.selectedIndex;
	if (choix == numChoix){
		elemDiv = document.getElementById(divName);
		if (document.getElementById(idType).selectedIndex == numChoix){
			elemDiv.innerHTML = label+" <input type='text name='autre_"+idType+"'/>";
		}
		else
			elemDiv.innerHTML = "";
	}
}
</script>
 
</head>
 
<body>
 
<form name="votre_activite" action="" method="post"> 
	<label><strong>Votre activité :</strong></label>
 
	<select name="activite" OnChange="affiche_formulaire();">
		<option value="" selected>Choisir une activité</option>
		<option value="particulier">Particulier</option>
		<option value="association">Association</option>
		<option value="entreprise">Entreprise</option>
	</select>
</form>
 
<span id="spanAssociation" style="position:absolute; top:40px; left:10px; visibility:hidden;">
 
	<ul><form id="formAssociation" name="formAssociation" method="POST">
 
      <li><label><strong>Nom :</strong></label> <input type="text" name="nom_association"/></li>
 
      <li><label><strong>Type d'association :</strong></label>
		<select id="type_association" name="type_association" OnChange="autreType(2,'type_association','inputTypeAutreAssociation','Indiquez le type de votre association:');">
			<option value="sportive">Sportive</option>
			<option value="politique">Politique</option>
			<option name="autre">Autre</option>
		</select></li>
 
      <div id="inputTypeAutreAssociation"></div>
 
      <li><label><strong>But, Activité</strong></label> <input type="text" name="activite_association"/></li>
 
	</form></ul>
</span>
 
<span id="spanEntreprise" style="position:absolute; top:40px; left:10px; visibility:hidden;">
 
	<ul><form id="formEntreprise" name="formEntreprise" method="POST">
 
 
      <li><label><strong>Nom :</strong></label> <input type="text" name="nom_entreprise"/></li>
 
      <li><label><strong>Adresse :</strong></label> <input type="text" name="adresse_entreprise" /></li>
 
      <li><label><strong>Code Postal :</strong></label> <input type="text" name="code_entreprise"/></li>
 
      <li><label><strong>Ville :</strong></label> <input type="text" name="ville_entreprise"/></li>
 
      <li><label><strong>Secteur d'activité :</strong></label> <input type="text" name="activite_entreprise"/></li>
 
	  <li><label><strong>Type de société:</strong></label>
		<select id="type_entreprise" name="type_entreprise" OnChange="autreType(3,'type_entreprise','inputTypeAutreEntreprise','Indiquez le type de votre société:');">
			<option value="pme">P.M.E</option>
			<option value="sa">S.A</option>
			<option name="sarl">S.A.R.L</option>
			<option name="autre">Autre</option>
		</select></li>
 
		<div id="inputTypeAutreEntreprise"></div>
 
	</form></ul>
 
</span>
 
</body>
</html>

Ce code marche parfaitement sur Firefox et IE.
Cependant, étant un peu maniaque, j'ai voulu ordonner mon code après avoir tout fini, j'arrive alors à ce code :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
 
<!--------------------------------------------------------------SCRIPT ACTIVITE------------------------------------------------------------------------------>
<script>
function affiche_formulaire(){
 
var choix = document.votre_activite.activite.selectedIndex;
 
document.getElementById('spanAssociation').style.visibility = 'hidden';
document.getElementById('spanEntreprise').style.visibility  = 'hidden';
 
document.getElementById('spanAssociation').style.visibility = (choix==2)? 'visible' : 'hidden';
document.getElementById('spanEntreprise').style.visibility  = (choix==3)? 'visible' : 'hidden';
}
 
function autreType(numChoix, idType, divName, label){
 
	var choix = document.votre_activite.activite.selectedIndex;
 
	if (choix == numChoix){
		elemDiv = document.getElementById(divName);
		if (document.getElementById(idType).selectedIndex == numChoix){
			elemDiv.innerHTML = label+" <input type='text name='autre_"+idType+"'/>";
		}
		else
			elemDiv.innerHTML = "";
	}
}
<!----------------------------------------------------------------------------------------------------------------------------------------------------------->
</script>
 
</head>
 
<body>
 
<!--------------------------------------------------------------ACTIVITE------------------------------------------------------------------------------------->
     <form name="votre_activite" action="" method="post">
 
     <label><strong>Votre activité :</strong></label> 
 
       <select name="activite" OnChange="affiche_formulaire();"> <option value="" selected>Choisir une activité</option>
 
		      <option value="particulier">Particulier</option>
		      <option value="association">Association</option>
		      <option value="entreprise">Entreprise</option>
	   </select>
 
      </form>
 
       <!---------------------------------------------------------Formulaire Association--------------------------------------------------------------------->
 
       <span id="spanAssociation" style="position:absolute; top:40px; left:10px; visibility:hidden;">
 
	         <ul><form id="formAssociation" name="formAssociation" method="POST">
 
                   <li><label><strong>Nom :</strong></label> <input type="text" name="nom_association"/></li>
 
                   <li><label><strong>Type d'association :</strong></label>
 
		               <select id="type_association" name="type_association" OnChange="autreType(2,'type_association','inputTypeAutreAssociation','Indiquez le                                   type de votre association:');">
 
			                            <option value="sportive">Sportive</option>
			                            <option value="politique">Politique</option>
			                            <option name="autre">Autre</option>
		               </select>
                   </li>   
 
                                        <div id="inputTypeAutreAssociation"></div>
 
                   <li><label><strong>But, Activité</strong></label> <input type="text" name="activite_association"/></li>
 
	             </form>
              </ul>
       </span>
 
       <!--------------------------------------------------------Formulaire Entreprise----------------------------------------------------------------------->
 
      <span id="spanEntreprise" style="position:absolute; top:40px; left:10px; visibility:hidden;">
 
	         <ul><form id="formEntreprise" name="formEntreprise" method="POST">
 
                  <li><label><strong>Nom :</strong></label> <input type="text" name="nom_entreprise"/></li>
 
                  <li><label><strong>Adresse :</strong></label> <input type="text" name="adresse_entreprise" /></li>
 
                  <li><label><strong>Code Postal :</strong></label> <input type="text" name="code_entreprise"/></li>
 
                  <li><label><strong>Ville :</strong></label> <input type="text" name="ville_entreprise"/></li>
 
                  <li><label><strong>Secteur d'activité :</strong></label> <input type="text" name="activite_entreprise"/></li>
 
	              <li><label><strong>Type de société:</strong></label>
 
		              <select id="type_entreprise" name="type_entreprise" OnChange="autreType(3,'type_entreprise','inputTypeAutreEntreprise','Indiquez le type                                 de votre société:');">
 
			                        <option value="pme">P.M.E</option>
			                        <option value="sa">S.A</option>
			                        <option name="sarl">S.A.R.L</option>
			                        <option name="autre">Autre</option>
		             </select>
                  </li>
 
		                            <div id="inputTypeAutreEntreprise"></div>
 
	            </form>
           </ul>
 
    </span>
 
 
</body>
</html>

Cependant, celui la ne marche que sous IE et non Firefox...:bug:
Quelqu'un sait -il pourquoi?Je n'avais jamais fait l'experience avant des differences de "compréhension" entre les navigateurs donc je suis un peu perdu la...
:help:

24/03/2008, 15h38
Jumano

Enlève les  entre les balises <body>
24/03/2008, 17h48
Pitufo

Bon alors cette fois ci c'est bon le formulaire "activité" marche nickel, merci:)
Cependant, ce n'est qu'une petite partie d'une page avec des titres et des formulaires...
Donc voila, comment faire pour que le texte que je vais mettre à la suite s'ajuste automatiquement selon l'option choisie...?
Je m'explique, si le visiteur choisit l'option "Particulier", alors il n'y aura aucun formulaire qui ne s'affichera en complément, alors que s'il choisit l'option "Entreprise", un formulaire de quelques lignes s'affiche alors...
Comment faire pour que le texte qui suit ne soit nie 20 lignes en dessous du select s'il chosit "particulier" ou alors ne soit caché par le formulaire "entreprise" ou "association"...?
24/03/2008, 19h09
htr999

alors réfléchis réfléchis ...
25/03/2008, 18h15
Pitufo

En fait comme tous les positionnements de la page sont en absolues ces éléments sortent du "flux" de la page et donc l'ajustement ne se fait pas...
Peut etre tout bete a faire (simple css) mais trouve pas...:?
28/03/2008, 21h29
Pitufo

I need help please...I'm galering so much:(
It will be be my last request I swear...:P

Voir 40 message(s) de cette discussion en une page