Formulaire à champs mutuellement exclusif
Bonjour,
Dans une page JSP, je dois faire un formulaire de recherche avec des champs mutuellement exclusifs. J'ai ébauché une solution, mais si quelqu'un veux aller dans une autre direction, je suis ouvert à vos idées.
Le formulaire :
Code:
1
2
3
4
5
6
|
(o) Numéro de Compte : __________ (Texbox)
o Type Erreur : __________ (Combobox)
o Type de Transaction : __________ (Combobox)
RECHERCHER (submit form button) |
C'est-à-dire qu'un seul des trois champs sera utilisé pour la recherche.
Je voudrais une solution :
- claire pour l'usager et qu'il comprenne qu'un seul des trois champs sera utilisé pour la recherche
- simple, implicite et rapide à utiliser : Ex, ne pas avoir à effacer tout le contenu d'un champ pour utiliser les autres champs.
- sans message d'erreur, par exemple dans avertissant qu'il ne peut avoir deux champs remplis en même temps.
- je ne veux pas désactiver les champs qui ne sont pas rempli et je ne veux pas vider ceux qui sont déjà remplis, dans l'éventualité où l'usager voudrait relancer la recherche avec un autre champs qu'il avait rempli auparavant.
Ma semi-solution :
J'ai pensé en premier lieu utiliser un ensemble de radiobutton.
Plus :
+ Avec un radiobutton, il est clair pour l'usager qu'un seul choix n'est disponible.
Moins :
- Pour rendre plus clair le fait que les deux autres champs ne seront pas actif, je voudrais changer la couleur (par CSS) des deux autres champs pour indiquer que celui sélectionné sera utilisé.
- J'aurais aimé que lorsque l'usager utilise un des champs, le radiobutton de ce champs soit sélectionné et que le style des deux autres soit changé. Ca éviterait que l'usager ait à cliquer à la fois sur le radiobutton pour le sélectionner et ensuite dans le champs pour écrire dedans.
Quelle serait la solution pour y arriver ?
Merci !
Encore un petit point et ça y est !
Merci beaucoup pour votre aide, j'arrive à ce que je veux. Mais j'ai encore une petite question que je vais poser après le 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
109
110
111
112
113
114
115
|
<html>
<head>
<title>Choix mutuellement exclusifs</title>
<script>
function selectorChange(el)
{
setLabelColor(el);
if ( el == "lbl1" )
{
document.forms[0].slt[0].checked = true;
document.forms[0].champ1.disabled = false;
document.forms[0].champ2.disabled = true;
document.forms[0].champ3.disabled = true;
}
else if ( el == "lbl2" )
{
document.forms[0].slt[1].checked = true;
document.forms[0].champ1.disabled = true;
document.forms[0].champ2.disabled = false;
document.forms[0].champ3.disabled = true;
}
else if ( el == "lbl3" )
{
document.forms[0].slt[2].checked = true;
document.forms[0].champ1.disabled = true;
document.forms[0].champ2.disabled = true;
document.forms[0].champ3.disabled = false;
}
return;
}
function setLabelColor(labelName) {
if (document.getElementsByTagName) {
var labels = document.getElementsByTagName('label');
if (labels) {
for (var i = 0; i < labels.length; i++) {
if (labels[i] && labels[i].style) {
if (labels[i].id == labelName )
{
labels[i].style.color = 'Black';
}
else
{
labels[i].style.color = 'Gray';
}
}
}
}
}
}
</script>
</head>
<%
String selecteur = request.getParameter("slt");
String labelSelected;
String valeur;
if ( selecteur != null && selecteur.trim().length() > 0 )
{
labelSelected = "lbl"+selecteur;
valeur = request.getParameter("champ"+selecteur);
out.println("Vous avez recherché pour la valeur : " + valeur + "<br>");
}
else
{
out.println("Veuillez faire votre recherche." + "<br>");
labelSelected = "lbl1";
}
%>
<body onload="selectorChange('<%out.print(labelSelected);%>')">
<form>
Recherche par :
<table>
<tr>
<td><input type="radio" name="slt" value="1" id="radio1" onclick="selectorChange('lbl1')"></td>
<td><label id="lbl1" for="radio1">Numéro de compte</label></td>
<td><input type="text" disabled name="champ1"/></td>
</tr>
<tr>
<td><input type="radio" name="slt" value="2" id="radio2" onclick="selectorChange('lbl2')"></td>
<td><label id="lbl2" for="radio2">Type erreur</label></td>
<td>
<select name="champ2" disabled>
<option value="1">valeur 1</option>
<option value="2">valeur 2</option>
<option value="3">valeur 3</option>
<option value="4">valeur 4</option>
</select>
</td>
</tr>
<tr>
<td><input type="radio" name="slt" value="3" id="radio3" onclick="selectorChange('lbl3')"></td>
<td><label id="lbl3" for="radio3">Type de Transaction</label></td>
<td>
<select name="champ3" disabled>
<option value="1">valeur 1</option>
<option value="2">valeur 2</option>
<option value="3">valeur 3</option>
<option value="4">valeur 4</option>
</select>
</td>
</tr>
</table>
<input type="submit" value="Rechercher"/>
</form>
</body>
</html> |
Question :
Si je choisi dans le formulaire de faire une recherche par type d'erreur et que je choisi la valeur 2, le submit va envoyer l'url suivant :
http://localhost:8080/test/test.jsp?slt=2&champ2=2
Vous remarquerez que je n'ai recu dans l'url seulement que la valeur du radio button ainsi que la valeur du champ de type d'erreur.
J'imagine que c'est parce que les deux autres champs sont désactivé, non ?
J'aimerais bien garder les paramètres qui étaient dans les autres champs même s'il ne pouvaient être sélectionnés parce que si l'usager fait plusieurs recherches avec les paramètres différents, au moin les valeurs choisies précédemment sont toujours affichées.
Merci encore !
