Formulaire à champs mutuellement exclusif

**xodblux** · 23/09/2008, 15h04

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

**florentB** · 23/09/2008, 15h21

Tu vas être obligé d'utiliser du javascript de toute manière.
Il va falloir que tu utilises des id avec tes objets (input, etc ...). Sur l'événement onchange, tu affectes le nouveau style.

**xodblux** · 23/09/2008, 15h36

Ok, je comprend le principe.

Question :

- Comment faire pour que lorsque je place le curseur dans un des champs ou combox box, ca sélectionne le radiobutton associé et que ca change le style de tous les autres éléments du formulaire ?

Je suis en train d'écrire un bout de code qui pour essayer de répondre moi meme a à question, mais vos idées sont bienvenue...

Je post un bout de code dès que j'ai quelque chose de potable...

à suivre... merci !

**florentB** · 23/09/2008, 15h45

je pense qu'il faudrait que tu essaies un truc du style :

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
 
 
<script>
     function changeValue(valeur){
          document.form1.radioB.value = valeur;
          document.form1.selectB.className="taClasse";
...
     }
</script>
<html>
....
<form name="form1">
     <input type="radio" name="radioB" value="1"/>
     <select name="selectB" onfocus="changeValue('1');">
     </select>
...
</form>
</html>

**xodblux** · 23/09/2008, 15h59

Super, ca semble s'en aller dans la bonne direction

Je vais faire comme ca, mais je veux que ca soit plus dynamique. Je vais essayer de boucler dans les éléments du radiobutton pour mettre le style#1 aux boutton et leur champs respectif, et puis mettre le style#2 au champ et radio button qui est sélectionné.

Je vous reviens là dessus.

A+

**OButterlin** · 23/09/2008, 16h49

Si ça te branche...

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
 
<html>
<head>
<script>
function selectorChange(el)
{
    if ( el == "1" )
    {
        document.forms[0].slt[0].checked = true;
        document.forms[0].nc.disabled = false;
        document.forms[0].s1.disabled = true;
        document.forms[0].s2.disabled = true;
        return;
    }
    if ( el == "2" )
    {
        document.forms[0].slt[1].checked = true;
        document.forms[0].nc.disabled = true;
        document.forms[0].s1.disabled = false;
        document.forms[0].s2.disabled = true;
        return;
    }
    if ( el == "3" )
    {
        document.forms[0].slt[2].checked = true;
        document.forms[0].nc.disabled = true;
        document.forms[0].s1.disabled = true;
        document.forms[0].s2.disabled = false;
        return;
    }
}
</script>
</head>
 
<body onload="selectorChange(1)">
<form>
    <table>
        <tr>
            <td><input type="radio" name="slt" value="1" onclick="selectorChange(1)"></td>
            <td>Numéro de compte</td>
            <td><input type="text" disabled name="nc"/></td>
        </tr>
        <tr>
            <td><input type="radio" name="slt" value="2" onclick="selectorChange(2)"></td>
            <td>Type erreur</td>
            <td>
                <select name="s1" 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" onclick="selectorChange(3)"></td>
            <td>Numéro de compte</td>
            <td>
                <select name="s2" 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="Envoyer"/>
</form>
</body>
</html>

A+

Formulaire à champs mutuellement exclusif

Servlets/JSP Java

Vue hybride

Discussions similaires

Partager

Partager