é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');" />

**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')

**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";

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

évènement onclick sur boutons radio

JavaScript

Vue hybride

Discussions similaires

Partager

Partager