Radio bouton pour afficher une textbox et griser les autres

Version imprimable

Voir 40 message(s) de cette discussion en une page

16/07/2011, 17h37
lcoulon

Radio bouton pour afficher une textbox et griser les autres

Bonjour

Je cherche à sélectionner avec 3 radios boutons, une textboxe parmis 3.

Voici l'idée :

- le radio bouton 1 affichera la textboxe 1 et grisera les 2 autres (2 et 3)
- le radio bouton 2 affichera la textboxe 2 et grisera les 2 autres (1 et 3)
- le radio bouton 3 affichera la textboxe 3 et grisera les 2 autres (1 et 2)

Pourriez vous me donner un exemple pour réaliser cela svp ?
Comme je débute, je pourrai ainsi comprendre le fonctionnement.

Merci beaucoup,

salut,

voilà un semi-exemple que tu pourras compléter

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
 
<html>
<style type="text/css">
  .disabled{
   color:grey;
  }
</style>
<input type="radio" id="first"/>
<input type="radio" id="second"/>
<input type="radio" id="third"/>
<div id="firstGroup">Premier div</div>
<div id="secondGroup">Second div</div>
<div id="thirdGroup">Troisième div</div>
<script type="text/javascript">
//groupes des noeuds à activer/désactiver
var nodesId=['firstGroup', 'secondGroup', 'thirdGroup'];
var radioButtonsId = ['first', 'second', 'third'];
 
//ajoute l'attribut disable au node d'id nodeId
//et reactive les autres noeuds
function toogleActivation(nodeId){
 for(var i in nodesId){
  var node = document.getElementById(nodesId[i]);
  node.className='';
 }
 document.getElementById(nodeId).className='disabled';
}
 
//reste à chopper l'évènement quand un bouton radio est sélectionné.
function initRadioButtons(radioButtonsId){
 for(var i in radioButtonsId){
  //pour chacun des radioBoutons, quand on click dessus, on appele toogleActivation
  //avec l'id du radioBoutons+'Group'
  document.getElementById(radioButtonsId[i]).onclick = function(id){
   return function(){
     toogleActivation(id+'Group');
   };
  }(radioButtonsId[i]);
 }
};
 
initRadioButtons(radioButtonsId);
 
</script>
 
</html>

Rq : j'imagine que tes textboxes sont des input de type text. Dans ce cas là, les input présentent un attribut disabled si jme trompe pas. Le fonctionnement est analogue à ajouter une classe, sauf que cette fois tu ajoutes pas une classe, mais un attribut disabled (ou tu l'enlèves).

16/07/2011, 20h59
lcoulon

Merci, en effet j'utilise des textboxes de type texte.

Si l'une des textboxes est cachée grâce à l'effet d'un radio bouton et que l'utilisateur clique sur le bouton 'submit' du formulaire, est que celle ci sera prise en compte au moment de l'envoi des donnée du formulaire, j'imagine que la textboxe qui sera cachée enverra une valeur par défaut n'est pas ?

Ps: dans l'exemple que tu as posté, c'est étrange les radio boutons restent sélectionnés , logiquement ne devrait il pas en avoir toujours qu'un seul qui soit coché et les autres déselectionnés ?
16/07/2011, 21h02
Invité
Citation:

Si l'une des textboxes est cachée grâce à l'effet d'un radio bouton et que l'utilisateur clique sur le bouton 'submit' du formulaire, est que celle ci sera prise en compte au moment de l'envoi des donnée du formulaire, j'imagine que la textboxe qui sera cachée enverra une valeur par défaut n'est pas ?

Bonne question, je ne sais pas comment se comporte la balise avec l'attribut disabled.
Tu peux toujours tenter et voir ce que tu obtiens!

Citation:

Ps: dans l'exemple que tu as posté, c'est étrange les radio boutons restent sélectionnés , logiquement ne devrait il pas en avoir toujours qu'un seul qui soit coché et les autres déselectionnés ?

Exact, les radio buttons devraient avoir l'attribut name avec une valeur commune (dans l'exemple, mychoice):
Code:

1 2 3 <input type="radio" id="first" name="mychoice"/> <input type="radio" id="second" name="mychoice"/> <input type="radio" id="third" name="mychoice"/>

Merci,

De mon coté, j'ai essayé ceci avec des checkboxes mais ça ne fonctionne pas je ne sais pas pourquoi :

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
 
<input type=text id=text1>
<input type="checkbox" name="select1" onclick=displayClick()> <label for="select1">affiche/cache</label>
 
 
<script type=text/javascript>
 
 
 function displayClick()
    {
 zone = document.getElementById('text1');
 button = document.getElementsByName('select1');
 
        if (select1.checked == true)
        {
            document.getElementById('text1').style.visibility='visible'; 
        }
        else
        {
            document.getElementById('text1').style.visibility='hidden';
        }
    }
 
</script>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<input type="type" id="text1">
<input type="checkbox" name="select1" onclick="displayClick();"> <label for="select1">affiche/cache</label>
 
 
<script type="text/javascript">
function displayClick(){
  var zone = document.getElementById('text1');
  //getElementsByTagName renvoit un tableau, (qui ne contient qu'un seul élément
 // dans le cas présent, on prend donc le premier élément)
  var button = document.getElementsByName('select1')[0];
 //fail ici, il s'agit de tester le button retourné, et non select1 qui est une variable
//qui n'existe pas
  if (button.checked){
  //enfin, autant se servir de la variable zone définie plus haut
    zone.style.visibility='visible'; 
  }else{
    zone.style.visibility='hidden';
  }
}
 
</script>
</html>

1 pièce(s) jointe(s)

J'essaye d'appliquer le code qui permet d'afficher ou cacher des textboxes ( et non pas des div) à ce tableau ( ci-joint ) mais je n'y arrive pas. :?

En fait, je voudrai arriver à faire ceci :

- Lorsque le radiobouton 'evenement unique' est selectionné
-> toutes les textboxes sont utilisables.

- Lorsque le radiobouton 'une fois par an' est selectionné
-> la textboxe 'Année' disparait ou se grise pour ne pas être utilisable

- Lorsque le radiobouton 'une fois par mois' est selectionné
-> les textboxes 'Année' et 'Mois' sont grisées

etc...

Pourrais tu me montrer le principe à utiliser pour arriver à cela, le script ci dessous pourrait presque convenir mais il n'utilise pas des radioboutons ( celui-ci est seulement applicable aux checkboxes )

Les radioboutons servent aussi à envoyer une valeur au formulaire, il faudrait que j'arrive à converser cette fonctionalité en plus de cacher ou faire apparaitre les textboxes souhaitées ... :roll:
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 <html> <input type="type" id="text1"> <input type="checkbox" name="select1" onclick="displayClick();"> <label for="select1">affiche/cache</label> <script type="text/javascript"> function displayClick(){ var zone = document.getElementById('text1'); //getElementsByTagName renvoit un tableau, (qui ne contient qu'un seul élément dans le cas présent, on prend donc le premier élément) var button = document.getElementsByName('select1')[0]; if (button.checked) { zone.style.visibility='visible'; } else { zone.style.visibility='hidden'; } } </script> </html>

17/07/2011, 11h52
Invité

Le post #2 fait quasiment ce que tu souhaites.

Au pire, tu peux enquiller un gros switch dans toogleActivationId qui dit si
id=thirdGroup, tu masques third
id=secondGroup, tu masques secondGroup et thirdGroup
id=firstGroup, tu masques rien
17/07/2011, 12h07
lcoulon

Comment écris tu un tel switch ?
Peux tu me montrer car je débute en Javascript .

On peut faire des 'if' sinon ?
C'est peut être moins bien.
17/07/2011, 13h17
Invité

pour la syntaxe :
google : switch javascript

oui, tu peux avec des if else.

Sinon, nan je te montre pas (peut-être que quelqu'un d'autre si ca l'intéresse). Je pars du principe que tu as toutes les clés en main.
17/07/2011, 16h49
lcoulon

Si je reste dans l'idée du code en post #7,

si je veux verifier si une radiobouton est coché ou non,
faut il le tester comme une checkbox, comme ceci ?

Code:

document.getElementsByName('select1')[0];

car le code fonctionne bien avec une checkbox mais pas avec un radiobouton.
Comment faut il faire pour tester l'etat d'un radiobouton svp ?
17/07/2011, 18h35
Watilin

Code:

document.getElementsByName('select1')[0].checked;

Merci,

Dans cet esprit, j'ai essayé ceci mais ça ne fonctionne pas .
Ici je cherche a regarder l'état du radio bouton grâce à son 'Id' et non pas son 'name'

Je voudrai utiliser les 'Id' plutot que les 'name' des radios bouton car mon formulaire à besoin que chaque radio bouton ait un 'name' identique.

En fonction de celui qui est sélectionné la textboxe devrait s'afficher ou disparaitre ... ce n'est pas le cas.

Pouvez vous me dire ou je fais erreur svp ?
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 <html> <input type="type" id="text1"> <input type="radio" name="send" id="radio1" value="ABC" onclick="displayClick();"> <label for="send">affiche</label> <input type="radio" name="send" id="radio2" value="DEF" onclick="displayClick();"> <label for="send">cache</label> <script type="text/javascript"> function displayClick(){ var zone = document.getElementById('text1'); var radio1 = document.getElementsById('radio1')[0]; var radio2 = document.getElementsById('radio2')[0]; if (radio1.checked) { zone.style.visibility='visible'; } if (radio2.checked) { zone.style.visibility='hidden'; } } </script> </html>

18/07/2011, 10h25
Invité

Tes problèmes sont plus des problèmes de syntaxe que de conception.

Tu peux installer firebug sous firefox, et te servir de console.log(maVariable), qui te donnera des informations utiles (en plus du suivi des erreurs).

En particulier, tu remarqueras que

Code:

var radio1 = document.getElementsById('radio1')[0];

ne te renvois pas un noeud html,...

C'est un gain de temps non négligeable plutot que d'attendre la réponse d'un débuggueur humain sur le forum :aie:

Bon ... j'avance a petits pas.

Ce code fonctionne presque, les radios boutons font afficher ou effacer les textboxes, par contre le cas n°1 (arg==1) il ne se passe pas la situation espérée : je cherche voudrai afficher la textboxe 1 ET 2

Ce n'est pas le cas, seule la textboxe 1 s'affiche pourtant j'ai bien définie la textboxe 2 comme visible ... je ne vois pas ce qui bloque . :?

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>
<head>
 
            <SCRIPT LANGUAGE="javascript">
            function affiche_cas(arg) {
            if (arg==1) {
                document.getElementById('text1').style.visibility='visible';
                document.getElementById('text2').style.visibility='visible';
                 }
            else {
                document.getElementById('text1').style.visibility='hidden';
                document.getElementById('text2').style.visibility='hidden'; }
 
            if (arg==2) {
                document.getElementById('text2').style.visibility='visible'; }
            else {
                document.getElementById('text2').style.visibility='hidden'; }
            if (arg==3) {
                document.getElementById('text3').style.visibility='visible'; }
 
            else {
                document.getElementById('text3').style.visibility='hidden'; }
                }
            </SCRIPT>
 
 
   </head>
 
 
    <p><input type="radio" name="choix" value="1" onclick="affiche_cas(1)"><label>choix 1</label>
    <input type="text" name="heure" id="text1">
 
    <p><input type="radio" name="choix" value="2" onclick="affiche_cas(2)"><label>choix 2</label>
    <input type="text" name="min" id="text2">
 
    <p><input type="radio" name="choix" value="3" onclick="affiche_cas(3)"><label>choix 3</label>
    <input type="text" name="sec" id="text3">
 
    </form>
    </body>
    </html>

18/07/2011, 23h01
Invité
Si on suppose arg==1
alors on rentre dans le else de if(arg==2), et dans le else
on cache text2.
les boucles devraient être
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 if(arg==1){ }else{ if(arg==2){ }else{ if(arg==3){ }else{ } } }
tu peux sinon faire de la sorte
Code:

1 2 3 4 5 6 7 8 9 10 11 12 if(arg==1){ ... return //on quitte la fonction } if(arg==2){{ ... return } if(arg==3){ ... return }
ou bien faire un switch, dont je te laisse découvrir la syntaxe.

Merci,

En mettant des return; le comportement observé n'est toujours pas celui que j'attendais :

Etrange car normalement on rentre dans le if qui correspond à arg souhaité, les autres if ne sont pas executés ...

Ici, lorsque je clique sur le radio1 puis sur le radio3
la textbox 1 ne se dégrise pas alors qu'elle devrait
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 if (arg==1) { document.getElementById('text1').value =""; document.getElementById('text1').disabled = "true"; document.getElementById('text2').style.visibility='hidden'; document.getElementById('text3').style.visibility='hidden'; return //on quitte la fonction } if (arg==2) { document.getElementById('text2').style.visibility='visible'; document.getElementById('text3').style.visibility='hidden'; return //on quitte la fonction } if (arg==3) { document.getElementById('text1').disabled = "false"; document.getElementById('text2').style.visibility='hidden'; document.getElementById('text3').style.visibility='visible'; return //on quitte la fonction }

Je suis passé avec switch / case mais je ne parviens toujours pas à dégriser ma textbox1 par le biais du radiobouton3 :?

Logiquement, document.getElementById('text1').disabled = "false"; devrait dégriser text1, n'est ce pas ?

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
     function affiche_cas(arg)
{
        switch (arg)
    {
        case 1 :
        document.getElementById('text1').value ="";
        document.getElementById('text1').disabled = "true";
        document.getElementById('text2').style.visibility='hidden';
        document.getElementById('text3').style.visibility='hidden';
	break;
 
        case 2 :
       document.getElementById('text2').style.visibility='visible'; 
       document.getElementById('text3').style.visibility='hidden';
       break;
 
        case 3 : 
	document.getElementById('text1').disabled = "false";
	document.getElementById('text1').style.visibility='visible';
        document.getElementById('text2').style.visibility='hidden';
        document.getElementById('text3').style.visibility='visible';
        break;
 
        default : ;
    }
}

19/07/2011, 00h28
Watilin

Attention :

Code:

document.getElementById('text1').disabled = "false";

Code:

document.getElementById('text1').disabled = false;

Tu vois la différence ?
Dans le premier cas, tu passes une chaîne et l'interpréteur doit faire une conversion implicite en booléen. Et toutes les chaînes non vides ont la valeur booléenne true…
19/07/2011, 14h33
lcoulon
Merci d'avoir répéré cette erreur, ça fonctionne parfaitement à présent.

Existe t-il une méthode plus rapide qui necessiterait moins de code à écrire pour combiner plusieurs actions à un id d'une textboxe ?

Je dois par exemple mettre tout les status suivant à la textboxe ayant l'id 'textbox2' :
Code:

1 2 3 document.getElementById('textbox2').value =""; document.getElementById('textbox2').disabled = false; document.getElementById('textbox2').style.background = "#66FF33";
Peut on simplifier cela ?

Voir 40 message(s) de cette discussion en une page