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

**Pitufo** · 23/03/2008, 18h21

Eh bien non justement ce ne sont pas les mêmes formulaires regarde bien

...

**htr999** · 23/03/2008, 19h32

salut
j'ai eu ça avec la console d'erreurs

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

qui correspond à

Code :

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

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 :

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

1
2
3
<div id="form_entreprise" style="visibility:hidden">
 
     <form method="post" action="">

essaie de changer en

Code :

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

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

a+

**Pitufo** · 24/03/2008, 00h06

Bah merci beaucoup httr69 pour ton aide précieuse c'était effectivement la d'où venait le problème...
Encore merci pour tes conseils

**htr999** · 24/03/2008, 00h13

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+

**Pitufo** · 24/03/2008, 00h16

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+

**Pitufo** · 24/03/2008, 00h21

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...?

**Jumano** · 24/03/2008, 09h57

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 :

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

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".

**Jumano** · 24/03/2008, 10h39

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 :

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

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 :

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

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 :

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
 
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 :

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

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

et dans le form_association :

Code :

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

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...

**htr999** · 24/03/2008, 11h01

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

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
<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>

a+

**Jumano** · 24/03/2008, 11h16

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

**htr999** · 24/03/2008, 11h55

pour les options de type...

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
<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>

a+

**Jumano** · 24/03/2008, 11h57

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

Code :

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

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.

**Pitufo** · 24/03/2008, 15h29

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 :

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
<!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 :

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
<!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...

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...

**Jumano** · 24/03/2008, 15h38

Enlève les  entre les balises <body>

**Pitufo** · 24/03/2008, 17h48

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"...?

**htr999** · 24/03/2008, 19h09

alors réfléchis réfléchis ...

**Pitufo** · 25/03/2008, 18h15

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...

**Pitufo** · 28/03/2008, 21h29

I need help please...I'm galering so much

It will be be my last request I swear...

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

JavaScript

Discussions similaires

Partager

Partager