contrôles sur un formulaire

**dgejou** · 19/12/2011, 02h04

Bonsoir @ tous.
Cela fait quelques jours que je cherche une solution à mes problèmes (en admettant qu'il y en ait une).
Je suis un newbie du javascript (et quasiment du html), j'ai pourtant cherché sur plusieurs forum, regardé pleins de tutos.
Mais en vain.
Je vous expose le contexte.
J'ai fait un questionnaire avec des menus déroulant pour une étude de marché. Certaine des questions demande à la personne de choisir plusieurs réponses et une question comporte un choix "autre" qui demande à la personne de remplir ou non un champ texte dans la question suivante en fonction de la réponse précédente.

ci-dessous un bout de mon code :

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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
 
<html>
<head>
<title>Questionnaire</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" language="Javascript" >
function checkListe() 
	{ 
	var top=true; 	
	if (document.getElementById('05_Je_sors_du_côté_de_1').value == 0)
		{ 
		alert("Sélectionnez une option 5!"); 
		top = false; 
		}
		else
	if (document.getElementById('05_Je_sors_du_côté_de_2').value == 0) 
		{ 
		alert("Sélectionnez une option 5bis!"); 
		top = false; 
		}
		else				
	if (document.getElementById('14_J_aimerais_écouter_1').value == 0) 
		{ 
		alert("Sélectionnez une option 14!"); 
		top = false; 
		}
		else
	if (document.getElementById('14_J_aimerais_écouter_2').value == 0) 
		{ 
		alert("Sélectionnez une option 14bis!"); 
		top = false; 
		}
		else
	if (document.getElementById('14_J_aimerais_écouter_3').value == 0) 
		{ 
		alert("Sélectionnez une option 14ter!"); 
		top = false; 
		}
		else		
	if (document.getElementById('15_Autre').value == "") 
		{ 
		alert("Sélectionnez une option 15!"); 
		top = false; 
		}
	//result(5,top); 
	return top; 
	}
</script>
<style type="text/css">
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
}
h5 {
	font-size: 11px;
	color: #C30;
}
.fond_menu {
	background-color: #EAEAEA;
}
.fond_bouton {
	background-color: #A2B1D7;
}
.fond_zone_texte {
	background-color: #F2F2F2;
}
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#0000FF" alink="#0000FF">
<form name="questionnaire" method="POST" action="http://perso0.free.fr/cgi-bin/form2mail.pl" onSubmit="return checkListe()">
  <table width="1000" border="0" bgcolor="#FFFFFF" cellpadding="1" cellspacing="0" align="center">
    <tr>
      <td width="998" height="20" align="center"><h2>&nbsp;</h2></td>
    </tr>
    <tr>
      <td height="617" bgcolor="#FFFFFF"><table border=2 cellpadding=3 width="998" align="center" cellspacing="0" bgcolor="#FFFFFF">
 
          <tr bgcolor="#FFFFFF">
            <td width="475" height="49" bgcolor="#E9E9E9">5. Lorsque vous sortez, dans quelle zone géographique vous rendez-vous ?</td>
            <td width="503"><h5>2 réponses possibles.<br>
              <label for="05. Je sors du côté de 1."></label>
              <select name="05. Je sors du côté de 1." size="1" class="fond_menu" id="05_Je_sors_du_côté_de_1">
                <option value="0" selected>Choisissez</option>
                <option value="Carqueiranne">Carqueiranne</option>
                <option value="Hyères">Hyères</option>
                <option value="La Garde">La Garde</option>
                <option value="La Seyne sur mer">La Seyne sur mer</option>
                <option value="La Valette du Var">La Valette du Var</option>
                <option value="Six Fours/Sanary">Six Fours/Sanary</option>
                <option value="Toulon">Toulon</option>
                </select>
              <br>
              <select name="05. Je sors du côté de 2." size="1" class="fond_menu" id="05_Je_sors_du_côté_de_2">
                <option value="0" selected>Choisissez</option>
                <option value="Carqueiranne">Carqueiranne</option>
                <option value="Hyères">Hyères</option>
                <option value="La Garde">La Garde</option>
                <option value="La Seyne sur mer">La Seyne sur mer</option>
                <option value="La Valette du Var">La Valette du Var</option>
                <option value="Six Fours/Sanary">Six Fours/Sanary</option>
                <option value="Toulon">Toulon</option>
                </select>
            </h5></td>
          </tr>
 
          <tr bgcolor="#FFFFFF">
            <td height="88" bgcolor="#E9E9E9">14. Quel type de musique aimeriez-vous écouter ?</td>
            <td><h5>3 réponses possibles par ordre de préférence.<br>
                <select name="14. J'aimerais écouter 1." size="1" class="fond_menu" id="14_J_aimerais_écouter_1">
                  <option value="0" selected>Choisissez</option>
                  <option value="de la musique des années 80">Année 80</option>
                  <option value="des chansons françaises/à texte">Chanson française/à texte</option>
                  <option value="de l'électro/house">Electro/house</option>
                  <option value="de la latino">Latino</option>
                  <option value="de la musique du monde">Musique du monde</option>
                  <option value="de la pop/rock">Pop/rock</option>
                  <option value="du r'n'b">R'n'B</option>
                  <option value="voir réponse 15">Autre</option>
                </select>
                <br>
                <select name="14. J'aimerais écouter 2." size="1" class="fond_menu" id="14_J_aimerais_écouter_2">
                  <option value="0" selected>Choisissez</option>
                  <option value="de la musique des années 80">Année 80</option>
                  <option value="des chansons françaises/à texte">Chanson française/à texte</option>
                  <option value="de l'électro/house">Electro/house</option>
                  <option value="de la latino">Latino</option>
                  <option value="de la musique du monde">Musique du monde</option>
                  <option value="de la pop/rock">Pop/rock</option>
                  <option value="du r'n'b">R'n'B</option>
                  <option value="voir réponse 15">Autre</option>          
                </select>
                <br>
                <select name="14. J'aimerais écouter 3." size="1" class="fond_menu" id="14_J_aimerais_écouter_3">
                  <option value="0" selected>Choisissez</option>
                  <option value="de la musique des années 80">Année 80</option>
                  <option value="des chansons françaises/à texte">Chanson française/à texte</option>
                  <option value="de l'électro/house">Electro/house</option>
                  <option value="de la latino">Latino</option>
                  <option value="de la musique du monde">Musique du monde</option>
                  <option value="de la pop/rock">Pop/rock</option>
                  <option value="du r'n'b">R'n'B</option>
				  <option value="voir réponse 15">Autre</option>
                </select>
            </h5></td>
          </tr>
 
          <tr bgcolor="#FFFFFF">
            <td height="30" bgcolor="#E9E9E9">15. Si &quot;Autre&quot; merci de pr&eacute;ciser :</td>
            <td><input name="15. Autre" type="text" class="fond_zone_texte" id="15_Autre" size="60" maxlength="60"></td>
          </tr>
 
          <tr bgcolor="#E9E9E9">
            <td colspan="2" align="center" bgcolor="#FFFFFF"><input type="submit" class="fond_bouton" value="Soumettre"></td>
          </tr>
        </table></td>
    </tr>
  </table>
</form>
</body>
</html>

Mes questions :
1) Est-il possible de contrôler sur la question 5 de mon questionnaire que la personne n'ai pas sélectionné 2 fois le même choix.
2) Est-il possible de contrôler sur la question 14 que la personne n'ai pas sélectionné 3 fois le même choix et que si dans un des choix, elle ai sélectionné ou pas le choix "autre", qu'elle doit ou pas remplir le champ de texte de la question 15 qui elle même doit être contrôlé.
Do you understand ??

J'espère avoir était assez clair

. Je ne suis pas figé sur d'autre type de présentation. J'avais penser à faire tout le questionnaire en checkbox mais question présentation, j'ai préféré les menus déroulant pour alléger la page et surtout que j'ai une question où il faut 7 réponses !!

Je vous remercie par avance de vos réponses, parce que la franchement je vois pas comment faire

Encore merci.

Dgé

**Celira** · 19/12/2011, 11h02

Personnellement, je préfère utiliser des groupes de checkboxes pour ce genre de choses, mais c'est faisable avec des listes déroulantes.
En revanche, pour "plusieurs choix possibles", faire autant de listes identiques que de choix possibles, ce n'est pas exactement optimisé...
Le plus simple, ce serait d'utiliser des listes multiples. Ainsi ton utilisateur sélectionne forcément des choix différents. Tu peux ensuite vérifier en js (et côté serveur) que le nombre de valeurs sélectionnées.

**dgejou** · 22/12/2011, 13h14

Bonjour Celira et merci pour ta réponse rapide (qui l'est plus que la mienne

)

Je pense du coup opté pour les checkbox car en fouillant à droite à gauche j'ai trouvé un script qui me permet de restreindre le nombre de case à cocher.
J'ai peur que les listes multiples soient trop contraignantes à l'usage.

Par contre, si ça ne te dérange pas et si tu as le temps, pour ma curiosité personnel et mon "apprentissage" du js, est-ce tu pourrais m'expliquer comment j'aurai pu faire avec mes listes déroulantes.

Merci bien.

Dgé

contrôles sur un formulaire

JavaScript

Discussions similaires

Partager

Partager