Formulaire : conflit entre <span> et onchange
Bonjour à tous,
Je poste ce message car j'ai une difficulté dans l'affichage dans un formulaire dynamique en HTML et JS.
A chaque fois que l'internaute choisit une réponse, j'essaie d'afficher un bloc correspondant à la réponse.
Dans ce cas, lorsqu'il répond à la première question, le bon bloc 2 s'affiche bien. Mais quand on passe à la question 3, impossible d'afficher le bon bloc en question. En lisant en ligne la doc, j'ai compris qu'il y a un conflit entre mes balises <span> qui encadre les blocs 3 à 5 et ma fonction "onchange" qui est censé appeler le bon bloc en fonction de la réponse.
Avez-vous une idée : savez-vous comment je pourrais contourner ce problème ?
Je suis débutante en JS.
Merci d'avance pour votre aide.
Voici 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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style-devis.css" />
<title>Demande de devis</title>
</head>
<body onload="aff_vitrine('non'); aff_commerce('non'); seo('non'), blog_vitrine('non')" />
<H1>Commencez votre projet : demandez un devis</H1>
<p>Vous avez une idée, un projet web mais vous ne savez pas par quoi commencer.<br/>
Répondez au formulaire ci-dessous. Son objectif : vous aider à trouver la solution la plus adéquate.</p>
<form method="post" action="postIndex.php">
<!-- question 1 -->
<label>Quel type de site souhaitez-vous ?</label><br/>
<input type="radio" name="site" value="Site Vitrine" onchange="aff_vitrine('oui'); aff_commerce('non')" /><label>Site Vitrine</label>
<input type="radio" name="site" value="Site E-commerce" onchange="aff_vitrine('non'); aff_commerce('oui')"/><label>Site E-commerce</label> </br>
*********<br/>
<!-- question 2 si réponse site vitrine -->
<span type="hidden" id="block_vitrine">
<label>Combien de pages contiendra votre site ?</label><br/>
<input type="radio" name="pages" value="One page" onchange="seo('oui'); blog_vitrine('non')" /><label>Uniquement 1 page</label>
<br/>
<input type="radio" name="pages" value="Five pages" onchange="seo('non'); blog_vitrine('oui') "/><label>Entre 1 et 5 pages</label>
<br />
<input type="radio" name="pages" value="Ten pages" onchange="seo('non'); blog_vitrine('oui')"/><label>De 6 à 10 pages</label>*
</span>
<!-- question 2 si réponse e-commerce -->
<span id="block_commerce">
<label>Combien de pages contiendra votre site ?</label><br/>
<input type="radio" name="pages" value="Five pages" />Entre 1 et 5 pages
<br />
<input type="radio" name="pages" value="Ten pages" />De 6 à 10 pages
</span>
<!-- question 3 si site vitrine et Une page -->
<span id="block_seo">
<label>Souhaitez-vous que l'on optimise le référencement de votre site pour qu'il soit plus visible sur les moteurs de recherche ?</label><br/>
<input type="radio" name="seo" value="yes" />Oui
<br/>
<input type="radio" name="seo" value="no" />Non
</span>
<!-- question 3 si site vitrine et 1 à 10 pages -->
<span id="block_blog">
<label>Dans votre site, un espace "Blog" sera utile ?</label><br/>
<input type="radio" name="blog" value="yes" />Oui
<br/>
<input type="radio" name="blog" value="no" />Non
</span>
<input type="submit" value="Envoyez" />
</form>
<!-- Fonctions JS -->
<script>
function aff_vitrine(action){
if (action == "oui") {
document.getElementById('block_vitrine').style.display="inline";
}
else {
document.getElementById('block_vitrine').style.display="none";
}
return true;
}
function aff_commerce(action){
if (action == "oui") {
document.getElementById('block_commerce').style.display="inline";
}
else {
document.getElementById('block_commerce').style.display="none";
}
return true;
}
function seo(action){
if (action == "oui") {
document.getElementById('block_seo').style.display="inline";
}
else {
document.getElementById('block_seo').style.display="none";
}
return true;
}
function blog_vitrine(action){
if (action == "oui") {
document.getElementById('block_blog').style.display="inline";
}
else {
document.getElementById('block_blog').style.display="none";
}
return true;
}
</script>
</body>
</html> |
