Générer un évènement à partir d'un élément de formulaire

**liloute8092** · 15/02/2007, 19h22

Bonjour,

Je débute tout juste avec Javascript et je travaille sur la conception d'un questionnaire qui se doit être dynamique car :

Quand un bouton "radio" "OUI" est coché => cela fait apparaitre des questions supplémentaires (celles-ci sont invisibles au chargement de la page et quand on coche "NON")

Comment puis-je programmer cela ?

Du coup comment les mémoriser au moment de la validation du questionnaire si ce sont des questions événementielles ? Est ce que le seul fait d'être apparentes sur la page, permet de mémoriser le contenu des réponses ?

J'espère que ma demande est compréhensible !

Merci bcp pour votre aide !!!

PS : Le formulaire est dans un tableau et chaque proposition de réponse correspond à une cellule.

**ryan** · 16/02/2007, 00h21

Yop!

Quelque chose comme ca?

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
 
<html>
<body>
<head>
<script language="javascript">
function afficher(theid,thevalue)
{
  document.getElementById(theid).style.visibility = thevalue;
}
</script>
</head>
<form name="maform" >
<input type=radio name="monradio" value="hidden" onclick="afficher('madiv1',this.value)">Ne pas afficher la question 1
<br>
<input type=radio name="monradio" value="visible" onclick="afficher('madiv1',this.value)">Afficher la question 1
<br>
<table>
  <tr>
    <td>
      <div id="madiv1" style="visibility: hidden">
      question1: <input type=text name="moninput1">
      </div>
    </td>
  </tr>
</table>
</form>
</body>
</html>

**liloute8092** · 16/02/2007, 09h42

Oui super !!! C'est exactement ça !!!

Bon je vais essayer de comprendre plus en détails le fonctionnement et si j'ai un soucis , je peux te poser des questions plus précises ?

Merci !!

**liloute8092** · 16/02/2007, 10h26

Bon en fait, je reviens un peu sur ce que j'ai dit...dans l'idée c'est ça mais en fait, il manque une propriété...càd que ds l'exemple que tu m'as donné ryan, le tableau est juste caché...or c bien quand tu n'as rien d'autres en dessous et quand la partie cachée ne représente qu'une ligne..

Mon problème est que entre le "Oui" et le "NOn", il y a une dizaine de lignes à inclure et du coup quand c caché, ça risque de mettre un gros blanc entre le "Oui" et le "Non"...l'objectif est que quand je clique sur "Oui", ça ouvre, ça développe la série de questions correspondantes et quand je clique sur le "Non", le "Non" "remonte" vers le "Oui"....

J'aurai la même problématique pour le "Non" d'ailleurs pour lequel il ya aussi des questions subsidiaires...

**E.Bzz** · 16/02/2007, 11h03

Bonjour,
utilise le style display="block"/"none" au lieu de visibility="visible"/"hidden"
2 avantages :
1) tu n'auras plus l'espace blanc
2) même "hidden", les éléments sont quand même envoyés avec le form. Avec display="none" ils ne seront pas envoyés ...

A+

**liloute8092** · 16/02/2007, 14h36

Merci je vais regarder si j'y arrive !!

Je vous tiens au courant !

**liloute8092** · 16/02/2007, 15h58

Désolée mais vu que je débute vraiment, j'ai du mal à comprendre comment ça marche donc je vais essayer de vous montrer ce que je souhaite faire concrètement :

Pour le moment je prépare mon questionnaire (qui est assez lourd) html.

Donc pour cette partie, je veux préparer à l'avance l'emplacement du display donc je suis en train de le construire sans prêter attention au fait qu'il soit "none" ou "block".

Pour faire plus simple, voilà la partie de mon questionnaire concernée :

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
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
109
110
111
112
 
<html>
<head>
  <meta http-equiv="content-type"
 content="text/html; charset=ISO-8859-1">
</head>
<body>
<table class="table03" border="1"
 width="100%">
<tr>
                                <td valign="top" width="26"><img
 src="images/picto_arrow01.gif" height="25" width="26"></td>
                                <td class="texteQuestion">ma question</td>
                              </tr>
                              <tr>
                                <td valign="top" align="center"><input
 name="Q07" class="formulaire" value="radiobutton"
 type="radio"></td>
                                <td class="texteReponse">Oui<br>
                                <table border="1">
                                  <tbody>
                                    <tr>
                                      <td></td>
                                      <td class="texteReponsePetit"
 align="center">Tr&egrave;s satisfaisant</td>
                                      <td class="texteReponsePetit"
 align="center">Assez satisfaisant</td>
                                      <td class="texteReponsePetit"
 align="center">Assez d&eacute;cevant</td>
                                      <td class="texteReponsePetit"
 align="center">Tr&egrave;s d&eacute;cevant</td>
                                      <td class="texteReponsePetit"
 align="center">Ne se prononce pas</td>
                                    </tr>
                                    <tr bgcolor="#f2f2eb">
                                      <td class="texteReponse"
 width="235">Comment
avez-vous trouv&eacute; ....?</td>
                                      <td align="center"><input
 class="formulaire" value="radiobutton" name="Q07Oa"
 type="radio"></td>
                                      <td align="center"><input
 class="formulaire" value="radiobutton" name="Q07Oa"
 type="radio"></td>
                                      <td align="center"><input
 class="formulaire" value="radiobutton" name="Q07Oa"
 type="radio"></td>
                                      <td align="center"><input
 class="formulaire" value="radiobutton" name="Q07Oa"
 type="radio"></td>
                                      <td align="center"><input
 class="formulaire" value="radiobutton" name="Q07Oa"
 type="radio">
                                      </td>
                                    </tr>
 
 
 
                                </table>
</td>
<tr>
<td valign="top" align="center"><input name="Q07" class="formulaire" value="radiobutton"
 type="radio"></td>
                                <td class="texteReponse">Non<br>
 
 
<table border="1">
                                  <tbody>
                                    <tr>
                                      <td></td>
                                      <td class="texteReponsePetit"
 align="center">Tr&egrave;s satisfaisant</td>
                                      <td class="texteReponsePetit"
 align="center">Assez satisfaisant</td>
                                      <td class="texteReponsePetit"
 align="center">Assez d&eacute;cevant</td>
                                      <td class="texteReponsePetit"
 align="center">Tr&egrave;s d&eacute;cevant</td>
                                      <td class="texteReponsePetit"
 align="center">Ne se prononce pas</td>
                                    </tr>
                                    <tr bgcolor="#f2f2eb">
                                      <td class="texteReponse"
 width="235">Comment
avez-vous trouv&eacute; ....?</td>
                                      <td align="center"><input
 class="formulaire" value="radiobutton" name="Q07Oa"
 type="radio"></td>
                                      <td align="center"><input
 class="formulaire" value="radiobutton" name="Q07Oa"
 type="radio"></td>
                                      <td align="center"><input
 class="formulaire" value="radiobutton" name="Q07Oa"
 type="radio"></td>
                                      <td align="center"><input
 class="formulaire" value="radiobutton" name="Q07Oa"
 type="radio"></td>
                                      <td align="center"><input
 class="formulaire" value="radiobutton" name="Q07Oa"
 type="radio">
                                      </td>
                                    </tr>
 
 
 
                                </table>
</td>
</tr>
 
</table>
</body>
</html>

Donc en fait, la partie qui doit disparaître se trouve dans un tableau dans la même cellule que le "Oui" que l'on va appeler TBL1 et celle qui est dans la même cellule que le "NOn" que l'on va appeler TBL2.

Première question : est-ce la bonne solution pour pouvoir les cacher ? Ou faut-il plutôt créer une nouvelle ligne (L1) sous la ligne du bouton radio + "Oui" -idem pour "Non" (L2)- pour placer le tableau de questions suppl ?

Deuxième question : comment je m'y prends pour cacher les 2 tableaux (relatifs au "Oui" et au"Non") au chargement de la page puis pour dire :

- quand je clique "Oui", le TBL1 ou la L1 apparaît (TBL2 ou L2 disparait si "Non" déjà cliqué)

-quand je clique "Non", le TBL2 ou L2 apparâit (TBL1 ou L1 disparait si "Oui" déjà cliqué)

J'espère que ça vous parle plus comme ça ....

Merci encore mais je suis vraiment désespérée avec ce truc !!!

**E.Bzz** · 16/02/2007, 16h07

Envoyé par liloute8092

Merci encore mais je suis vraiment désespérée avec ce truc

Heu ... c'était pas si compliqué que ça ...
Dans ton code précédent, il faut juste remplacer "visibility" par "display", "visible" par "block" et "hidden" par "none".
Un remplacement à la Word, sans te poser d'autres questions (enfin, dans un 1° temps)

A+

**liloute8092** · 17/02/2007, 18h57

Ok j'ai bien compris mais mon problème se situe au niveau du balancier entre le "Oui" et le "Non". Pour faire simple, j'ai repris le code de Ryan avec un élément supplémentaire :

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
 
<html>
<body>
<head>
<script language="javascript">
function afficher(theid,thevalue)
{
 
  document.getElementById(theid).style.display = thevalue;
}
</script>
</head>
<form name="maform" >
<input type=radio name="monradio" value="block" onclick="afficher('madiv2',this.value)">OUI
 
<br> <div id="madiv2" style="display: none">
<table border="1">
  <tr>
    <td>
 
     Commentaire: <input type=text name="moninput1">
 
    </td>
  </tr>
</table>
 </div>
<input type=radio name="monradio" value="block" onclick="afficher('madiv1',this.value)">NON
<br> <div id="madiv1" style="display: none">
<table border="1">
  <tr>
    <td>
 
      Commentaire: <input type=text name="moninput1">
 
    </td>
  </tr>
</table>
 </div>
</form>
</body>
</html>

Voilà en fait, je voudrais que
1. Au cahrgement de la page, on ne voit que le "Oui" et le "Non"
2.Quand je clique sur Oui, j'ai l'affichage du commentaire relatif au "Oui"
3.Quand je clique sur "Non", l'affichage du commentaire de "Oui" disparait et le commentaire du "Non" apparait....

et vis versa.

bref, instaurer un système de" if then"...sauf que je ne sais pas comment m'y prendre entre le "value", "style:display" etc...Je ne sais pas comment gérer le if dans cette problématique...

Merci encore !!

Générer un évènement à partir d'un élément de formulaire

JavaScript

Vue hybride

Discussions similaires

Partager

Partager