évènement onclick sur boutons radio

**piotrowski-s** · 28/03/2012, 10h03

Bonjour, je suis ultra débutant en javascript et je n'y connais donc ultra rien.
voici le soucis, j'ai un formulaire en multi-étapes généré grâce à un plugin jquerry trouvé par ci et la sur le net.
il fonctionne excellemment bien.

Le soucis qui m'oppose est que selon le clic qui sera fait sur un input, de type radio, je souhaite affiché un élément,

jusque la pas de problème j'ai pu me débrouiller tant bien que mal, voici comment j'ai procédé.

dans les balises <HEAD></HEAD>
Partie réservée au javascript:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
 
function pm ()
{
document.getElementById("pm").style.display = "block";
}
function pp ()
{
document.getElementById("pp").style.display = "block";
}
 
</script>

Partie réservée au css:

Code :

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

1
2
3
4
5
6
#pm{
display: none;
}
#pp {
display: none;
}

Dans les balises <BODY></BODY>

Code :

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

1
2
3
<label for="categorie">Catégorie</font></b></label>
          <input type="radio" name="categorie" value="personne_morale" onclick="pm();" />Personne&nbsp;morale&nbsp; 
<input type="radio" name="categorie"  value="personne_physique" onclick="pp();" />Personne physique

et l'élément qui s'affiche ou pas.

Dans le body j'ai pu mettre ce bloc à l'endroit ou il doit s'afficher:

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
<fieldset>
        <legend>Informations légales</legend>
         <div id="pm"> <label for="raison_sociale"><b><font size="2" face="Verdana">Raison sociale</font></b></label>
            <input id="raison_sociale" type="text" />
        <label for="nom_commercial"><b><font size="2" face="Verdana">Nom commercial</font></b></label>
            <input id="nom_commercial" type="text" />
	   <label for="forme_juridique"><b><font size="2" face="Verdana">Forme Juridique</font></b></label>
           <select onchange="if(this.selectedIndex == 7) document.getElementById('forme_juridique2').style.display = 'block'; 
		   else document.getElementById('forme_juridique2').style.display = 'none';" name="test">
				<option>E.U.R.L.</option>
				<option>S.A.R.L.</option>
				<option>S.A.</option>
				<option>S.N.C.</option>
				<option>Société Particulière</option>
				<option>S.D.F</option>
				<option>Coopérative</option>
				<option value="autre">Autre</option>
 
</select>
<input id="forme_juridique2" type="text" style="display:none;" /> 
		 <label for="siret"><b><font size="2" face="Verdana">Siren ou Siret</font></b></label>
            <input id="siret" type="text" / maxlength="14">		
            <label for="code_ape"><b><font size="2" face="Verdana">Code APE</font></b></label>
            <input id="code_ape" type="text" />
			        <label for="capital"><b><font size="2" face="Verdana">Capital social</font></b></label>
            <input id="capital" type="text" />
	    <label for="activite"><b><font size="2" face="Verdana">Activité</font></b></label>
            <input id="actvitite" type="text" />
			</div>
        </fieldset>

Le soucis est que lorsque le bouton radio devient décoché l'élément reste affiché au détriment du deuxième, à savoir les deux éléments s'affichent or ce n'est pas possible si mon utilisateur s'est trompé, en fonction des desiderata des clients il y a 50% de chance que cela arrive.

Je ne peux pas laisser place au hasard. et je souhaites enlever toutes équivoques à ce problème/

D'avance merci pour votre aide.

**Bovino** · 28/03/2012, 11h10

Bonjour, je suis ultra débutant en javascript et je n'y connais donc ultra rien.

Il n'y a pas besoin de sortir du MIT pour se rendre compte que tu ne remets jamais le display à none...

**piotrowski-s** · 28/03/2012, 11h24

oui mais comment est-ce que je dois procéder car j'ai tenté en mettant cela.

Code :

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

   document.getElementById("pm").style.display="hidden";

cela n'a pas fonctionné.

**piotrowski-s** · 28/03/2012, 11h26

en fait j'avais transformé mon input, mais en dépit de cela, meme quand je clique sur l'autre input button, il ne fonctionne pas.

Code :

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

      <input type="radio" name="categorie" value="personne_morale" onclick="pm('pm'); pm2('pm');" />

**Bovino** · 28/03/2012, 11h35

Envoyé par Bovino

le display à none...

Envoyé par piotrowski-s

Code :

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

   document.getElementById("pm").style.display="hidden";

**Torgar** · 28/03/2012, 11h38

C'est document.getElementById('pp').style.display = 'none';
De plus si tu veux faire un toogle il faut que tu testes si display est à none ou block via if (document.getElementById('pp').style.display == 'none')

**piotrowski-s** · 28/03/2012, 11h39

en fait dans le head j'ai modifié

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
<script type="text/javascript">
function pm ()
{
document.getElementById("pm").style.display = "block";
}
function pm2 (){
   document.getElementById("pm").style.visibility="hidden";
}
function pp ()
{
document.getElementById("pp").style.display = "block";
}
function pp2 (){
   document.getElementById("pp").style.visibility="hidden";
}
</script>

pour les input j'ai

Code :

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

1
2
3
 size="2" face="Verdana">        <label for="categorie">Catégorie</font></b></label>
          <input type="radio" name="categorie" value="personne_morale" onclick="pm('pm');pp2('pp')" />Personne&nbsp;morale&nbsp; 
<input type="radio" name="categorie"  value="personne_physique" onclick="pp('pp');pm2('pm');" /> Personne physique

et plus bas mais deux div d'id respectifs ceux écrits dans le javascript en head. Mais la c'est pareil ça ne marche pas.

**RomainVALERI** · 28/03/2012, 12h40

au moins deux soucis :

> le mélange de display et visibility : fais un choix mais tu ne peux pas afficher en jouant sur l'un et désafficher en jouant sur l'autre, ce sont deux propriétés différentes.
> les noms de fonctions absurdes

**piotrowski-s** · 28/03/2012, 13h20

j'ai résolu mon problème avec jquerry.

Code :

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

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
$(document).ready(function() {
    $("input[name$='categorie']").click(function() {
        var test = $(this).val();
 
        $("div.desc").hide();
        $("#categorie" + test).show();
    });
});
</script>

et

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="myRadioGroup">
 
    2 Cars<input type="radio" name="cars" checked="checked" value="2"  />
 
    3 Cars<input type="radio" name="cars" value="3" />
 
    <div id="Cars2" class="desc">
        2 Cars Selected
    </div>
    <div id="Cars3" class="desc" style="display: none;">
        3 Cars
    </div>
</div>

c'est pas évident.

**Bovino** · 28/03/2012, 13h55

Envoyé par piotrowski-s

j'ai résolu mon problème avec jquerry.

C'est sûr, intégrer jQuery pour si peu est tellement plus efficace que de changer un visibility: hidden par un display: none...

Bref, il serait quand même bon de se dire qu'apprendre un langage avant de l'utiliser est la meilleure des solutions !

**Torgar** · 28/03/2012, 14h15

voici le soucis, j'ai un formulaire en multi-étapes généré grâce à un plugin jquerry trouvé par ci et la sur le net.
il fonctionne excellemment bien.

@Bovino : il est déjà intégré suivant ses dires dans son premier message. Il ne fait que l'exploiter. Même si il est vrai que changer de propriété CSS suffisait à son bonheur.

**Bovino** · 28/03/2012, 14h23

Arf... pas faux

Maintenant, une simple exécution pas à pas devrait le persuader que sa solution n'est pas la bonne pour un truc aussi simple...

Considérer jQuery comme le tapis sous lequel on cache ses lacunes n'est pas une bonne approche

**RomainVALERI** · 28/03/2012, 15h36

Envoyé par piotrowski-s

jquerry.

Ah ? ils ont sorti une version irlandaise ?

évènement onclick sur boutons radio

JavaScript

Discussions similaires

Partager

Partager