Discussion :

[Strix]

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

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

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

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

[E.Bzz]

Bonjour,

Code :

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

onclick="javascript:changement()"

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

A+

[Strix]

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

Merci quand même !

[E.Bzz]

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

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

Merci quand même !

Quelle persévérance

[Strix]

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

Quelle persévérance

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

[Strix]

Bonjour. Je reviens à la charge !!

Voici un de mes fieldset avec son checkbox d'activation

Code HTML :

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

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

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

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

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

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

Je n'arrive pas à placer cela :

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

Merci

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

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

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

A+

[Strix]

Merci !!!

[Lideln]

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 :

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

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

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... ? (je précise que ce sont mes premiers pas, ou presque, en javascript)

Merci beaucoup d'avance !

[E.Bzz]

Bonjour,
il aurait mieux valu créer une nouvelle discussion, mais bon ....

Code :

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

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+