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

**Medde** · 08/10/2010, 17h53

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 :

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

**andry.aime** · 08/10/2010, 19h17

Bonsoir,

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

**Medde** · 08/10/2010, 23h59

Le code marche, merci

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

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.

@+

**Medde** · 09/10/2010, 23h05

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

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager