Checkbox : afficher/masquer

Version imprimable

Bonjour.

Alors voilà, outre le fait que je débute en javascript, j'ai un soucis pour afficher et masquer des options de formulaires selon si un checkbox est coché ou non.

J'ai déjà une fonction qui me permet d'afficher des zones du formulaire lors d'un click sur un lien. Cela marche bien. Mais pour les checkbox... J'ai bien essayé Comment désactiver une zone de texte en cochant une checkBox ? mais rien ne se passe...
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <script type="text/javascript"> function toggle (idDetail) { var style = document.getElementById(idDetail).style; style.display = (style.display == "none") ? "" : "none"; } function changement() { if (document.getElementById('cb').checked) document.getElementById('coucou').disabled=true; else document.getElementById('coucou').disabled=false; } </script>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <a href="javascript:;" onclick="toggle('pao')">Devis : PAO [+]</a> <fieldset id="pao" style="display:none;"><legend>pao</legend> <label><input type="checkbox" name="pao3" value="cdv" id="cb" onclick="javascript:changement()"> <?php echo Carte_de_visite; ?></label> <div id="coucou">Recto <select name="rcdv"> <option value="quadri" selected="selected">Quadri</option> <option value="nb">Niveaux de gris</option> </select> Verso <select name="vcdv"> option value="non" selected="selected">non</option> <option value="quadri">Quadri</option> <option value="nb">Niveaux de gris</option> </select> </div> </fieldset>
Je n'arrive pas à savoir où se trouve le problème...

Merci d'avance

Edit : Comment faire apparaître tous les champs si jamais l'utilisateur avait eu la bonne idée de désactiver JS ?

05/06/2007, 09h55
E.Bzz

Bonjour,

Code:

onclick="javascript:changement()"

il ne faut pas le "javascript:" (c'est uniquement lorsqu'on mets du JS dans un href) ...

A+
05/06/2007, 10h16
Strix

Bon il ne se passe rien... Tant pis je vais continuer avec la fonction Toggle...

Merci quand même !
05/06/2007, 10h25
E.Bzz

Citation:

Envoyé par Strix

Edit : Comment faire apparaître tous les champs si jamais l'utilisateur avait eu la bonne idée de désactiver JS ?

Il faut les mettre en display:block dans ta page, et les masquer via JS au chargement (onload).
Ainsi, il ne seront masquées que si JS est activé ...

Citation:

Envoyé par Strix

Bon il ne se passe rien... Tant pis je vais continuer avec la fonction Toggle...

Merci quand même !

Quelle persévérance :mrgreen:
05/06/2007, 17h27
Strix

Citation:

Envoyé par E.Bzz

Il faut les mettre en display:block dans ta page, et les masquer via JS au chargement (onload).
Ainsi, il ne seront masquées que si JS est activé ...

Thanks

Citation:

Envoyé par E.Bzz

Quelle persévérance :mrgreen:

Ben ça marche avec toggle donc voilà ! Je voulais voir l'autre façon mais bon. J'ai réussi à le faire pour un petit truc comme avec le tuto mais pas dans mon formulaire.

Enfin bon

Bonjour. Je reviens à la charge !!

Voici un de mes fieldset avec son checkbox d'activation

Code:

1
2
3
4
5
6
7
8
<input type="checkbox" onclick="toggle('gene')"><label>Devis conception générale</label>
<fieldset id="gene" style="display:none;" class="cll"><legend>conception générale</legend>   
	<input type="checkbox" name="cg1" value="logo"><label><?php echo logo; ?></label>
	<input type="checkbox" name="cg2" value="chartegraphique"><label><?php echo charte_grap; ?></label>
	<input type="checkbox" name="cg3" value="info" onclick="toggle('mess1')" class="cll">
	<label>Informations</label>
	<textarea name="mess2" cols="70" rows="6" id="mess1" style="display:none;"><?php echo $mess1 ; ?></textarea>
</fieldset>

La fonction JS

Code:

1
2
3
4
5
6
 <script type="text/javascript">
 function toggle (idDetail) {
	var style = document.getElementById(idDetail).style;
	style.display = (style.display == "none") ? "" : "none";
	}
</script>

Le css des fieldsets

Code:

1
2
3
4
5
fieldset {
	display:block;
	width: 620px;
	border:none;
}

Je n'arrive pas à placer cela :

Citation:

Envoyé par E.Bzz

Il faut les mettre en display:block dans ta page, et les masquer via JS au chargement (onload).
Ainsi, il ne seront masquées que si JS est activé ...

:oops:

Merci

11/06/2007, 14h38
E.Bzz
Citation:

Envoyé par E.Bzz

Il faut les mettre en display:block dans ta page, et les masquer via JS au chargement (onload).
Ainsi, il ne seront masquées que si JS est activé ...

==>
Code:

1 2 3 <body onload="toggle('gene');"> ... <fieldset id="gene" style="display:block;" class="cll">
;)

A+
11/06/2007, 14h56
Strix

:lahola: Merci !!!

Bonjour !

Justement j'avais le même problème : afficher certaines infos si JavaScript n'est pas activé, et afficher le site "normal" si JavaScript est activé.
J'ai suivi les conseils dans un post de ce site, et je remarque que dans ce topic E.Bzz conseille la même chose.

Le seul problème c'est que chez moi ça ne marche pas... Pourquoi ? :(

Voici le code :
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 <script type="text/javascript"> function forceJavaScript() { var div = document.getElementById('div_noscript'); alert(div); alert(div.style.display); var div2 = document.getElementById('div_javascript'); alert(div2); alert(div2.style.display); div.style.diplay = "none"; div2.style.diplay = "block"; alert(div.style.display); alert(div2.style.display); } </script> <body onload='forceJavaScript()'> <div id="div_javascript" style="display:none;"> // du code PHP qui génère ma page "normale" du site </div> <div id="div_noscript" style="display:block;"> require_once('include/banner.php'); // juste un div avec une image de fond require_once('pages/error_no_javascript.php'); // une page php qui fait juste "echo 'blabla';" </div> </body>
Voici ce que me renvoient les 'alert' :
Code:

1 2 3 4 5 6 7 object HTMLDivElement block object HTMLDivElement none block // ici je devrais avoir 'none' none // ici je devrais avoir 'block'
Il y a deux problèmes :
1) le style des div n'est PAS changé, et du coup ma page n'est pas visible, je ne vois que le ptit script php qui affiche 'blabla'
2) encore pire : je suis censé voir le block 'div_noscript' (puisque ca bug), mais le plus grave c'est que je ne vois même pas le header ! (le div avec une image en background)

Si quelqu'un voit où j'ai fait une erreur svp... ? :aie: (je précise que ce sont mes premiers pas, ou presque, en javascript)

Merci beaucoup d'avance !

25/06/2007, 14h23
E.Bzz
Bonjour,
il aurait mieux valu créer une nouvelle discussion, mais bon ....
Code:

1 2 3 4 </script> </head> <body onload='forceJavaScript()'> <div id="div_javascript" style="display:block;">
Si ta fonction n'est pas déclarée dans le <head> => pb potentiels.
Sinon, le <div> doit être affiché par défaut, puis masqué par JS (si activé).

A+