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

**Pitufo** · 22/03/2008, 14h50

Bonjour à tous,
Etant débutant en javascript et codant un peu en php, jaurais souhaité afficher un formulaire en fonction du choix du visiteur dans un formulaire de type select...
J'ai cherché la réponse à ma question sur le net et je suis tombé sur un script qui collait assez bien au mien.
En fait je voudrais, quand le visiteur selectionne "entreprise" afficher le "form_entreprise" à coté.
En adaptant le script que j'ai trouvé au mien cela me donne ceci :
.....mais hélas le formulaire reste toujours caché, meme lorsque je sélectionne l'option "entreprise"...

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
<!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 language="JavaScript">
 
function affiche_entreprise() {
if (document.votre_activite.activite.options.value == "entreprise")
document.getElementById('form_entreprise').style.visibility = 'visible';
else
document.getElementById('form_entreprise').style.visibility = 'hidden';
}
</script>
 
</head>
 
<body>
 
<form name="votre_activite" action="" method="post">
 
<label><strong>Votre activité :</strong></label> <select name="activite" OnChange="affiche_entreprise();">
 
  <option name= value="particulier">Particulier</option>
  <option value="association">Association</option>
  <option value="entreprise">Entreprise</option>
                                                 </select>
    <br/>
</form>   
 
<span id="form_entreprise" style="visibility:hidden">
 
     <form method="post" action="">
 
      <label><strong>Nom :</strong></label> <input type="text" name="nom_entreprise"/><br/>
 
      <label><strong>Adresse :</strong></label> <input type="text" name="adresse_entreprise"/><br/>
 
     <label><strong>Code Postal :</strong></label> <input type="text" name="code_entreprise"/><br/>
 
     <label><strong>Ville :</strong></label> <input type="text" name="ville_entreprise"/><br/>
 
     <label><strong>Secteur d'activité :</strong></label> <input type="text" name="activite_entreprise"/><br/>
 
     <label><strong>Type de société :</strong></label> <select name="type_entreprise">
 
        <option value="pme">P.M.E</option>
        <option value="sa">S.A</option>
        <option name="sarl">S.A.R.L</option>
     </select>
 
</form></span>
 
</select>
</form>
</body>
</html>

Voila, si quelqu'un a la solution à mon problème je suis preneur d'un petit coup de main.
Merci d'avance pour votre aide...

**Jumano** · 22/03/2008, 18h08

Bonjour,
Ton script fonctionne parfaitement chez moi, testé en local avec WAMP

**htr999** · 22/03/2008, 18h14

question de compatibilité
il marche sous >= IE6 mais pas sous FFX
j'ai WAMP 5

a+

**Jumano** · 22/03/2008, 18h19

Autant pour moi je n'avais testé que sous IE

**Pitufo** · 22/03/2008, 18h25

Ah ok je l'ai testé en local wamp mais sous Firefox....
Quelqu'un saurait comment y remédier ou ce n'est pas possible...?

**htr999** · 22/03/2008, 18h25

c'est au niveau du test

Code :

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

if (document.votre_activite.activite.options.value == "entreprise")

FFX ne comprend pas

document.votre_activite.activite.options.value

a+

**htr999** · 22/03/2008, 18h29

modif du test

Code :

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

1
2
if (document.votre_activite.activite.selectedIndex == 2)
...

le voici

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
<!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 language="JavaScript">
 
function affiche_entreprise() {
if (document.votre_activite.activite.selectedIndex == 2)
document.getElementById('form_entreprise').style.visibility = 'visible';
else
document.getElementById('form_entreprise').style.visibility = 'hidden';
}
</script>
 
</head>
 
<body>
 
<form name="votre_activite" action="" method="post">
 
<label><strong>Votre activité :</strong></label> <select name="activite" OnChange="affiche_entreprise();">
 
  <option value="particulier">Particulier</option>
  <option value="association">Association</option>
  <option value="entreprise">Entreprise</option>
                                                 </select>
    <br/>
</form>   
 
<span id="form_entreprise" style="visibility:hidden">
 
     <form method="post" action="">
 
      <label><strong>Nom :</strong></label> <input type="text" name="nom_entreprise"/><br/>
 
      <label><strong>Adresse :</strong></label> <input type="text" name="adresse_entreprise"/><br/>
 
     <label><strong>Code Postal :</strong></label> <input type="text" name="code_entreprise"/><br/>
 
     <label><strong>Ville :</strong></label> <input type="text" name="ville_entreprise"/><br/>
 
     <label><strong>Secteur d'activité :</strong></label> <input type="text" name="activite_entreprise"/><br/>
 
     <label><strong>Type de société :</strong></label> <select name="type_entreprise">
 
        <option value="pme">P.M.E</option>
        <option value="sa">S.A</option>
        <option name="sarl">S.A.R.L</option>
     </select>
 
</form></span>
 
</select>
</form>
</body>
</html>

a+

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager