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