Liste déroulante lié à zone de saisie

Version imprimable

Bonjour,
J'aimerais lié le choix d'une zone de saisie au choix fait par l'utilisateur sur la liste déroulante,je m'explique:

Liste déroulante[choix1,Choix2]
-Si choix 1
Age : Zone de saisie
-Si Choix 2
Nom : Zone de saisie
Prenom : Zone de saisie

Voila.

Je ne m'y connait pas en Javascript!, j'ai essayé de parcourir quelques articles j'en ai trouvé sur les listes déroulantes lié.

Pour commencé:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <label for="Rubrique">Faites votre choix</label> <select name="Rubrique" onChange='Choix(this.form)'> <option>choix 1 </option> <option>choix 2</option> </select> <p> <label>Age</label> <input type="int" name="Age" /> </p> <p> <label>Nom</label> <input type="int" name="Nom" /> <label>Prenom</label> <input type="int" name="Prenom" /> </p>
Code:

1 2 3 4 5 6 7 8 9 10 function Choix(form) { i = form.Rubrique.selectedIndex; if (i == 0) { return; } switch (i) { case 1 : Charge le premier bloc?;break; case 2 : Charge le deuxieme bloc?;break;} }
!!?

J'éspere que vous pourrez m'aidé.

Merci.

Bonjour,
1- input typt="int" n'existe pas.
2-

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function Choix(form) {
i = form.Rubrique.selectedIndex;
if (i == 0) {
  return;
  }
switch (i) {
case 1 : 
    form.Age.value=89;
    break;
case 2 : 
    formNom.value="Nom";
    form.Prenom.value="Prenom";
    break;
default:
    break;
    }
}

A+.

Merci andry pour ton aide.
Alors,
-Deja ça ne marche pas :?
Une erreur dans mon 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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title> Bienvenue</title> <meta http-equiv="Content-type" Content="text/html; charser=iso-8859-1" /> <script language="JavaScript" type="text/javascript">  </script> </head> <body> <p> <label for="Rubrique">Rubrique: </label> <select name="Rubrique" onChange='Choix(this.form)'> <option>choix1</option> <option>choix2</option> </select> </p> <p> <label>Age</label> <input type="text" name="Age"> </p> <p> <label>Nom</label> <input type="text" name="Nom"> <label>Prenom</label> <input type="text" name="Prenom"> </p> <input type="submit" /> </form> </body> </html>
-Ensuite je crois qu'on c'est mal compris, le code que tu me donnes permet à prioris de lier la valeur à "l'intérieur de la zone de saisie " avec le choix de la liste déroulante, or moi je voudrais:
En cas de choix 1 avoir une zone de saisie (Age)
Et en cas de Choix 2 avoir deux zones de saisie (Nom & Prenom)

@+

1- j'ai fait un erreur de copier/coler
j'ai mis from à la place de form :aie:.
2-Il n'y a pas de balise ouvrante pour form.
3-pour ton besoin, voici le 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title> Bienvenue</title>
<meta http-equiv="Content-type" Content="text/html; charser=iso-8859-1" />
<script language="JavaScript" type="text/javascript"> 
 
function Choix(form) {
i = form.Rubrique.selectedIndex;
switch (i) 
{
case 1 : 
document.getElementById("ag").style.display="block";
document.getElementById("nm").style.display="none";
break;
case 2 :
document.getElementById("nm").style.display="block";
document.getElementById("ag").style.display="none";
break;
default:
document.getElementById("ag").style.display="none";
document.getElementById("nm").style.display="none";
break;
}
}
 
</script>
 
</head>
 
<body>
<form>
<p>
<label for="Rubrique">Rubrique: </label> 
<select name="Rubrique" onChange='Choix(this.form)'>
<option>choisir</option>
<option>choix1</option>
<option>choix2</option>
</select>
 
</p>
<div id="ag">
<label>Age</label> <input type="text" name="Age">
</div>
<div id="nm">
<label>Nom</label> <input type="text" name="Nom">
 
<label>Prenom</label> <input type="text" name="Prenom">
</div>
 
<input type="submit" />
 
</form>
</body>
</html>

A+.

08/10/2010, 00h36
Medde

Merci andry,
Effectivement ça marche, mais le fait que les 3 zones de saisies soit visibles au début me géne vraiment. Je pensais pouvoir régler le problème en optant pour un choix par défaut en utilisant selecte mais ça ne fonctionne pas ainsi.J'ai essayé de faire un case 0 avec un double none, mais ça ne marche pas comme ça:mrgreen:...
?

Bonne soirée.

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title> Bienvenue</title>
<meta http-equiv="Content-type" Content="text/html; charser=iso-8859-1" />
<script language="JavaScript" type="text/javascript"> 
 
function Choix(form) {
i = form.Rubrique.selectedIndex;
switch (i) 
{
case 0 : 
document.getElementById("ag").style.display="block";
document.getElementById("nm").style.display="none";
break;
case 1 :
document.getElementById("nm").style.display="block";
document.getElementById("ag").style.display="none";
break;
}
}
 
</script>
 
</head>
 
<body>
<form>
<p>
<label for="Rubrique">Rubrique: </label> 
<select name="Rubrique" onChange='Choix(this.form)'>
<option>choix1</option>
<option>choix2</option>
</select>
 
</p>
<div id="ag">
<label>Age</label> <input type="text" name="Age">
</div>
<div id="nm" style="display:none">
<label>Nom</label> <input type="text" name="Nom">
 
<label>Prenom</label> <input type="text" name="Prenom">
</div>
 
<input type="submit" />
 
</form>
</body>
</html>

08/10/2010, 15h00
Medde

Tout simplement excellent andry:ccool:
Merci.