IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Servlets/JSP Java Discussion :

Formulaire à champs mutuellement exclusif


Sujet :

Servlets/JSP Java

  1. #1
    Membre à l'essai
    Inscrit en
    Mars 2005
    Messages
    23
    Détails du profil
    Informations forums :
    Inscription : Mars 2005
    Messages : 23
    Points : 17
    Points
    17
    Par défaut 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 : 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 !

  2. #2
    Membre averti Avatar de florentB
    Homme Profil pro
    Développeur Java
    Inscrit en
    Décembre 2006
    Messages
    332
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Java

    Informations forums :
    Inscription : Décembre 2006
    Messages : 332
    Points : 441
    Points
    441
    Par défaut
    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.

  3. #3
    Membre à l'essai
    Inscrit en
    Mars 2005
    Messages
    23
    Détails du profil
    Informations forums :
    Inscription : Mars 2005
    Messages : 23
    Points : 17
    Points
    17
    Par défaut
    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 !

  4. #4
    Membre averti Avatar de florentB
    Homme Profil pro
    Développeur Java
    Inscrit en
    Décembre 2006
    Messages
    332
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Java

    Informations forums :
    Inscription : Décembre 2006
    Messages : 332
    Points : 441
    Points
    441
    Par défaut
    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>

  5. #5
    Membre à l'essai
    Inscrit en
    Mars 2005
    Messages
    23
    Détails du profil
    Informations forums :
    Inscription : Mars 2005
    Messages : 23
    Points : 17
    Points
    17
    Par défaut
    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+

  6. #6
    Modérateur
    Avatar de OButterlin
    Homme Profil pro
    Inscrit en
    Novembre 2006
    Messages
    7 310
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Novembre 2006
    Messages : 7 310
    Points : 9 522
    Points
    9 522
    Billets dans le blog
    1
    Par défaut
    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+
    N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  7. #7
    Membre à l'essai
    Inscrit en
    Mars 2005
    Messages
    23
    Détails du profil
    Informations forums :
    Inscription : Mars 2005
    Messages : 23
    Points : 17
    Points
    17
    Par défaut 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 : 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
     
    <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 !

  8. #8
    Membre à l'essai
    Inscrit en
    Mars 2005
    Messages
    23
    Détails du profil
    Informations forums :
    Inscription : Mars 2005
    Messages : 23
    Points : 17
    Points
    17
    Par défaut
    Peut-etre que je pourrais garder les valeurs dans une variable de session ?

    Genre session.setAttribute(); ?? Est-ce que c'est une bonne idée et est-ce que c'est approprié ?

    Bon, j'ai fini ma journée de travail... À suivre demain. Merci encore !

  9. #9
    Modérateur
    Avatar de OButterlin
    Homme Profil pro
    Inscrit en
    Novembre 2006
    Messages
    7 310
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Novembre 2006
    Messages : 7 310
    Points : 9 522
    Points
    9 522
    Billets dans le blog
    1
    Par défaut
    Alors, effectivement, les champs "disabled" ne sont pas transmis au contrôleur.
    Si tu veux qu'ils le soient, tu peux utiliser "readonly" à la place.

    (Attention, avec IE, les combo en readonly peuvent être modifiées)

    A+
    N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  10. #10
    Membre à l'essai
    Inscrit en
    Mars 2005
    Messages
    23
    Détails du profil
    Informations forums :
    Inscription : Mars 2005
    Messages : 23
    Points : 17
    Points
    17
    Par défaut Mot de la fin
    Merci beaucoup pour votre aide. Je vais fermer la discussion.

    Finalement, j'ai aussi décidé d'utiliser en combinaison la solution de "florentB" en changeant les classes pour définir le style des champs actif et non-actif.

    Remplacer la fonction d'avant par celle-ci :
    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
     
    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 = 'Blue';
    				      labels[i].className= "labelEnabled";
    				    }
    				    else
    				    {
    				      //labels[i].style.color = 'Gray';    
       				      labels[i].className= "labelDisabled";
    				    }
    				}
    			}
    		}
    	}
    }
    Et ajouter le style que vous voulez dans votre CSS, mais voici le miens :

    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
     
    <style> 
    .labelDisabled { 
    color : gray; 
    background-color: none;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 5px;
    padding-right: 5px;
    width:160px;
    text-align: right;
    border-bottom: 1px solid #FFF;
    border-top: 1px solid #FFF;
    } 
    .labelEnabled { 
    color : black; 
    background-color: none;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 5px;
    padding-right: 5px;
    width:160px;
    text-align: right;
    border-bottom: 1px solid #000;
    border-top: 1px solid #000;
    } 
    </style>

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [formulaire] champ de saisie en majuscule
    Par wolflinger dans le forum Balisage (X)HTML et validation W3C
    Réponses: 11
    Dernier message: 05/11/2007, 16h01
  2. ACCESS 2002 - formulaire - champs calculés
    Par louroulou dans le forum Access
    Réponses: 6
    Dernier message: 01/06/2006, 16h16
  3. formulaire: champ texte + liste deroulante
    Par mat21 dans le forum Langage
    Réponses: 3
    Dernier message: 17/01/2006, 11h01
  4. sous-formulaire : champs provenant plusieurs tables
    Par patbeautifulday1 dans le forum IHM
    Réponses: 13
    Dernier message: 21/12/2005, 12h17
  5. Formulaire, champs de type file, value
    Par Space Cowboy dans le forum Langage
    Réponses: 1
    Dernier message: 12/09/2005, 09h29

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo