Liste déroulante lié à zone de saisie

**Medde** · 07/10/2010, 17h17

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 :

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

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 :

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

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.

**andry.aime** · 07/10/2010, 19h22

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

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

**Medde** · 07/10/2010, 21h04

Merci andry pour ton aide.
Alors,
-Deja ça ne marche pas

Une erreur dans mon 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
 
 
<!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;
if (i == 0) {
  return;
  }
switch (i) 
{
case 1 : 
from.Age.value=89;
break;
case 2 :
from.Nom.value="Nom";
from.Prenom.value="Prenom";
break;
defaut:
break;
}
// -->
</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)

@+

**andry.aime** · 07/10/2010, 21h17

1- j'ai fait un erreur de copier/coler
j'ai mis from à la place de form

.
2-Il n'y a pas de balise ouvrante pour form.
3-pour ton besoin, voici le code

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

**Medde** · 08/10/2010, 00h36

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

...
?

Bonne soirée.

**andry.aime** · 08/10/2010, 05h36

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

**Medde** · 08/10/2010, 15h00

Tout simplement excellent andry

Merci.

Liste déroulante lié à zone de saisie

JavaScript

Discussions similaires

Partager

Partager