radiobutton "incochables" et onclick

**lemfroufrou** · 08/11/2009, 17h40

Bonjour à tous

Voila, j'ai un formulaire en php relativement complexe.
De ce fait, j'ai opté pour javascript afin de faire apparaitre des champs de formulaire en fonction du choix radiobutton d'un utilisateur

Je vous donne un exemple :

Si je coche choix1, rien ne se passe
Si je coche choix2, des champs supplémentaires apparaissent dans le formulaire.
Le script fonctionne, le seul problème est que mes radiobutton sont désormais incochables !!!!

Je pense que le problème vient du "Onclick"

Je vous donne le bout de code allégé

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
 
function menu(){
 
if (document.getElementById('formu').style.display=='none'){
document.getElementById('formu').style.display='';
 
} else {
document.getElementById('formu').style.display='none';
}
 
 
<body>
 <table>
                <tr>
                  <td>Célibataire</td>
                  <td><input type="radio" name="statut" value="1" checked="checked"></td>
                </tr></table>
				<table>
                <tr>
                  <td>Marié</td>
                  <td><input type="radio" name="statut" value="2" onClick="menu(); return false;"></td>
                </tr></table>
<p>Nom de l'épouse: </p>				
<div align="center" id="formu" style="display:none;">
	<input name="nom">				
	</div>		
 
</body>

Si je choisis l'option 2, le input apparaît, mais je suis incapable de cocher la case pour la traiter dans la base de données.

Dois-je vraiment utiliser onclick ou existe t'il une autre fonction pour lancer un bout de code quand on coche le radiobutton ?

Merci de vos réponses

**lemfroufrou** · 08/11/2009, 17h54

Voici un code source à copier/coller pour mieux comprendre mon problème... Arrivez vous à cocher la case 2 ???

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
<html>
<head>
<script language="javascript">
function menu(){
 
if (document.getElementById('formu').style.display=='none'){
document.getElementById('formu').style.display='';
 
} else {
document.getElementById('formu').style.display='none';
}
}</script>
 </head>
 <body>
 <form name="form1" method="post" action="toto2.php">
 <table align="center">
                <tr>
                  <td>Pr&eacute;nom uniquement </td>
                  <td><input type="radio" name="broderie" value="1" checked="checked" /></td>
                </tr>
                <tr>
                  <td>Ajout d'un  motif c&ocirc;t&eacute; coeur (+ 2 &euro;) </td>
                  <td width="10"><input type="radio" name="broderie" value="2" onClick="menu(); return false;" /></td>
                </tr></table>
 
				<!-- Formulaire qui apparait-->
				<div align="center" id="formu" style="display:none;">
					<table align="center" border="1">
			<tr><td><p>Choix du motif </p></td></tr><tr>
	 <td><input type="radio" name="motif" value="1" checked="checked">toto <input type="radio" name="motif" value="2">tata</td>
	</tr></table>	</div>		
 
		  </form>
 
</body></html>

**Bovino** · 08/11/2009, 19h53

Salut et bienvenue sur le forum !

Ce comportement est dû au fait que dans la chronologie des événements, onclick intervient avant le changement de statut du bouton, du coup le return false annule la suite des actions par défaut donc le bouton reste dans son état initial. En supprimant le return false, cela résoudra ton problème

**lemfroufrou** · 11/11/2009, 20h57

Merci ça fonctionne !!!!

@bientôt +++++

radiobutton "incochables" et onclick

JavaScript

Vue hybride

Partager

Partager