Lier une zone d'option à l'affichage d'un bloc

Version imprimable

Bonjour,
Je suis maintenant (Discussion précedente) confronté à lier l'affichage d'un bloc avec le choix fait sur une zone d'option :

Ce n'est pas ça

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
<!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.methode.selectedIndex;
switch (i) 
{
case 0 : 
document.getElementById("tps").style.display="block";
document.getElementById("Rel").style.display="none";
break;
case 1 :
document.getElementById("Rel").style.display="block";
document.getElementById("tps").style.display="none";
break;
}
}
 
</script>
 
</head>
 
<body>
<form>
<p>
<input type="radio" name="methode' onChange='Choix(this.form)' value="C1'" id="C1"<label for="C1">C1</label> 
<input type="radio" name="methode' value="C2'" id="C2"<label for="C2">C2</label> 
</p>
<div id="tps">
<label>Temps</label> <input type="text" name="temps">
</div>
 
<div id="Rel" style="display:none">
<label>Relevé</label> <input type="text" name="Rel">
</div>
 
<input type="submit" />
 
</form>
</body>
</html>

Merci.

Bonsoir,

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
<!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(i) {
 
if(i=="C1"){ 
document.getElementById("tps").style.display="block";
document.getElementById("Rel").style.display="none";
}
else{
document.getElementById("Rel").style.display="block";
document.getElementById("tps").style.display="none";
}
}
 
</script>
 
</head>
 
<body>
<form>
<p>
<input type="radio" name="methode" onclick='Choix(this.value)' value="C1" id="C1" /><label for="C1">C1</label> 
<input type="radio" name="methode" onclick='Choix(this.value)' value="C2'" id="C2" /><label for="C2">C2</label> 
</p>
<div id="tps">
<label>Temps</label> <input type="text" name="temps">
</div>
 
<div id="Rel" style="display:none">
<label>Relevé</label> <input type="text" name="Rel">
</div>
 
<input type="submit" />
 
</form>
</body>
</html>

Je te conseille vivement de lire un tutoriel HTML et JAVASCRIPT avant de continuer quoi que ce soit.

A.

08/10/2010, 23h59
Medde

Le code marche, merci :ccool:
Mais il y encore un petit souci :
Si je clique sur C2, le bloc "Rel" apparait, Ok j'appuie sur envoyer (ça me renvoie sur ma page d'execution).Sauf que si je vais sur precedent je me retrouve avec la zone d'option C2 coché mais avec le bloc "tps" affiché (bloc non correspondant) .Je pensais qu'un checked="checked" sur le C1 reglerais le probléme mais non il garde la derniére zone d'option choisie et comme Rel et en display none...
??

Citation:

Envoyé par andry.aime

HTML et JAVASCRIPT avant de continuer quoi que ce soit.

C'est vrai je ne connais pas le javascript mais la je suis obligé de l'utiliser (désolé pour les bétises!).Pour l'HTML c'est juste des erreurs de rédaction.

@+
09/10/2010, 23h05
Medde

Re,
Y a-t-il moyen rafraichir la page automatiquement en revanant sur "précedent", ça réglerait le probléme ?