Radio bouton pour afficher une textbox et griser les autres

**lcoulon** · 16/07/2011, 17h37

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,

Invité · 16/07/2011, 20h51

salut,

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

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
 
<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).

**lcoulon** · 16/07/2011, 20h59

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 ?

Invité · 16/07/2011, 21h02

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!

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 :

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

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

**lcoulon** · 16/07/2011, 21h05

Merci,

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

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
 
<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>

Invité · 16/07/2011, 21h19

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
<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>

**lcoulon** · 17/07/2011, 09h58

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 ...

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
<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>

Invité · 17/07/2011, 11h52

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

**lcoulon** · 17/07/2011, 12h07

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.

Invité · 17/07/2011, 13h17

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.

**lcoulon** · 17/07/2011, 16h49

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 :

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

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 ?

**Watilin** · 17/07/2011, 18h35

Code :

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

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

**lcoulon** · 17/07/2011, 19h07

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 :

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
<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>

Invité · 18/07/2011, 10h25

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 :

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

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

**lcoulon** · 18/07/2011, 19h31

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 :

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
<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>

Invité · 18/07/2011, 23h01

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 :

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

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 :

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

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.

**lcoulon** · 18/07/2011, 23h11

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 :

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
 
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
}

**lcoulon** · 18/07/2011, 23h42

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 :

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
     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 : ;
    }
}

**Watilin** · 19/07/2011, 00h28

Attention :

Code JS :

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

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

Code JS :

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

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…

**lcoulon** · 19/07/2011, 14h33

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 :

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

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

Peut on simplifier cela ?

Radio bouton pour afficher une textbox et griser les autres

JavaScript

Discussions similaires

Partager

Partager