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

Version imprimable

15/02/2007, 19h22
liloute8092

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

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.

Yop!

Quelque chose comme ca?

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

16/02/2007, 09h42
liloute8092

Génial !

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

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 !!:P
16/02/2007, 10h26
liloute8092

Ah zut !

:cry: 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...
16/02/2007, 11h03
E.Bzz

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+
16/02/2007, 14h36
liloute8092

Merci je vais regarder si j'y arrive !! :roll:
Je vous tiens au courant !

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:

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 !!! :oops:

16/02/2007, 16h07
E.Bzz

Citation:

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+

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:

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 !! :mouarf:

19/02/2007, 09h51
liloute8092

Est ce que quelqu'un peut m'aider SVP !! :oops:

Yop!

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

19/02/2007, 22h38
liloute8092

Merci ryan..je ne sais pas pourquoi mais cela ne fonctionnait pas dc finalement je suis repartie sur ton premier code et j'ai créé en plus une fonction cacher() qui me permet de cacher les questions relatives au "oui" quand je clique sur"non" et une fonction chargement() pour éviter que le bloc de question n'apparaissent au démarrage de la page...

Et ça marche nickel !

Merci encore !