Discussion :

[remus69]

Bonjour,

je souhaite faire un formulaire dynamique qui ressemblerait à cela :

lorsque l'on sélectionne Pomme : premiere image en pj


lorsque l'on sélectionne Fraise : deuxième image en pj


En gros, je veux cacher la case Bio lorsque je suis sur Fraise et l'afficher lorsque je suis sur Pomme.

Comment faire cela en javascript?
Merci!

[Watilin]

Trop facile

Alors déjà il faut que tu aies un id sur ton <select>, et un autre sur l’élément qui contient la case et le texte « bio ». Le fragment HTML pourrait ressembler à ça (sans les attributs name) :

Code :

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

1
2
3
4
5
6
7
8
9
<select id="fruit">
	<option value="Pommes">Pommes</option>
	<option value="Fraises">Fraises</option>
</select>
 
<p id="bio">
	<input id="case_bio" type="checkbox" />
	<label for="case_bio">Bio</label>
</p>

Ensuite il faut surveiller les évènements qui surviennent sur le <select>. L’évènement change est tout indiqué, mais on oublie aussi souvent que l’utilisateur peut naviguer au clavier, et le clavier ne déclenche pas correctement change : on va donc surveiller également keyup.

Je ne rentre pas dans les détails pour la façon de gérer les évènements. Je conseille toujours les gestionnaires d’évènements, mais c’est un peu long à expliquer, tu regarderas dans les tutoriels JS
Sinon il reste les attributs onchange et onkeyup, mais c’est pas aussi bien…

Il faut commencer par récupérer une référence sur les objets HTML qui nous intéressent. Ce bout de script doit s’exécuter une fois que les éléments sont chargés :

Code :

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

1
2
3
4
// attention, je ne mets pas « var »,
// ces variables seront donc globales
$fruit = document.getElementById('fruit');
$bio = document.getElementById('bio');

Pour être sûr qu’ils sont chargés il y a diverses méthodes comme placer le script après dans le code HTML (déconseillé), ou surveiller l’évènement load de l’objet window (à la limite, l’attribut onload).

Alors admettons que tu as réussi à attacher une fonction qui réagit au changement du <select>, et que cette fonction s’appelle changeFruit.

Code :

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

1
2
3
4
5
6
7
8
9
function changeFruit() {
	if ($fruit.value == 'Pommes') {
		// affichage
		$bio.style.display = 'block';
	} else {
		// masquage
		$bio.style.display = 'none';
	}
}

C’est tout !

[remus69]

Je n'arrive pas à tout compiler pour faire le code final...

Je gère HTML/CSS/PHP/MySQL mais je n'ai pas de notion en javascript...

J'ai tout de même essayer, mais je sèche

[remus69]

Je crois que c'est surtout le change et le keyup que je ne sais pas placer correctement.

[vermine]

Bonjour,

Dans ce cas-là, montrez-nous cette partie-là du code dans sa version HTML générée, pas le PhP (enfin... si vous arrivez jusque-là, sinon oui le code PhP pourra peut-être nous aider).

[Watilin]

Salut,
une solution qui marche mais à éviter : les attributs HTML d’évènement

Code :

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

1
2
3
<select id="fruit" onchange="changeFruit()" onkeyup="changeFruit()">
	...
</select>

y’a la solution « DOM niveau 0 », un peu mieux :

Code :

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

1
2
3
4
5
6
window.onload = function() {
	$fruit = document.getElementById('fruit');
	$bio = document.getElementById('bio');
	$fruit.onchange = changeFruit;
	$fruit.onkeyup = changeFruit;
}

Et la solution gestionnaire d’évènement, la plus puissante car elle permet de séparer totalement le HTML et le script, et d’attacher autant de fonctions qu’on veut sur le même évènement du même objet (pas d’écrasement) ; cependant, tous les navigateurs ne gèrent pas la même syntaxe, ce qui complique les choses :

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
if (window.addEventListener) { // navigateurs standards
 
	window.addEventListener('load', function() {
		$fruit = document.getElementById('fruit');
		$bio = document.getElementById('bio');
		$fruit.addEventListener('change', changeFruit, false);
		$fruit.addEventListener('keyup', changeFruit, false);
	}, false);
 
} else { // MSIE
 
	window.attachEvent('onload', function() {
		$fruit = document.getElementById('fruit');
		$bio = document.getElementById('bio');
		$fruit.attachEvent('onchange', changeFruit);
		$fruit.attachEvent('onkeyup', changeFruit);
	});
 
 
};

[remus69]

J'avais tenté cela (même si ce n'est pas la meilleure solution, je voulais le faire avec les attributs HTML d'évènements pour essayer de comprendre le principe) :

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
36
37
38
39
40
41
42
43
<html>
	<head>
	</head>
 
	<body>
		<form method="post" action="resultat.php">
 
			<p>Formulaire pour connaitre le prix d'un fruit</p>
 
			<label for="fruit">Quel est le fruit que vous voulez acheter ?</label><br />
			<select name="fruit" id="fruit" onchange="changeFruit" onkeyup="changeFruit">
				<option value="pommes">Pommes</option>
				<option value="fraises">Fraises</option>
			</select>
 
			<script type='text/javascript'>
			// attention, je ne mets pas « var »,
			// ces variables seront donc globales
			$fruit = document.getElementById('fruit');
			$bio = document.getElementById('bio');
 
			function changeFruit() {
				if ($fruit.value == 'pommes') {
					// affichage
					$bio.style.display = 'block';
				} else {
					// masquage
					$bio.style.display = 'none';
				}
			}
			</script>
 
			<p id="bio">
			   <input type="checkbox" name="case_bio" id="case_bio" /> <label for="case_bio">Bio</label><br />
			</p>
 
			<p align="center">
			   <input type="submit" value="Simuler !" /> <input type="reset" value="Réinitialiser" />
			</p>
 
		</form>
	</body>
</html>

[vermine]

Il y a quelques petites confusions.

Code js :

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

1
2
// attention, je ne mets pas « var »,
// ces variables seront donc globales

Faux. ^^ La variable n'en sera pas moins globale si vous la déclarez. De toute façon, mettez toujours var, c'est bien plus sûr. Les explications ici.

De plus, vous avez déclarez vos variables globales avant d'avoir définit les éléments HTML. Donc les variables sont nulles.
Pourquoi les mettres globales, d'ailleurs ? En local elles sont tout aussi bonnes.

Code js :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
function changeFruit() {
     var fruit = document.getElementById('fruit');
     var bio = document.getElementById('bio');
     if (fruit.value == 'pommes') {
	// affichage
	bio.style.display = 'block';
     } else {
	// masquage
	bio.style.display = 'none';
     }
}

Code :

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

1
2
$fruit = document.getElementById('fruit');
$bio = document.getElementById('bio');

Vous n'êtes pas en PhP ici. Pas de $ pour atteindre la valeur d'une variable. Le nom de la variable suffit.


Et dernière petite chose:

Code :

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

1
2
<select name="fruit" id="fruit" onchange="changeFruit();" onkeyup="changeFruit();">

C'est un appel de fonction classique.

[Watilin]

Exact, merci vermine

En ce qui concerne var, tout dépend d’où on se trouve…

Les $ c’est une habitude que j’ai prise pour désigner les références à des objets DOM, c’est pratique quand il faut tracker les fuites de mémoire sous IE. Et j’ai effectivement oublié de mettre les getElementById dans le cas « DOM 0 ».

J’édite mon message pour la postérité ^^

[remus69]

Ok merci beaucoup pour toutes ces explications

La première solution est donc celle ci :

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
36
37
38
39
40
<html>
	<head>
	</head>
 
	<body>
		<form method="post" action="resultat.php">
 
			<p>Formulaire pour connaitre le prix d'un fruit</p>
 
			<label for="fruit">Quel est le fruit que vous voulez acheter ?</label><br />
			<select name="fruit" id="fruit" onchange="changeFruit();" onkeyup="changeFruit();">
				<option value="pommes">Pommes</option>
				<option value="fraises">Fraises</option>
			</select>
 
			<p id="bio">
			   <input type="checkbox" name="case_bio" id="case_bio" /> <label for="case_bio">Bio</label><br />
			</p>
 
			<script type='text/javascript'>
				function changeFruit() {
					 var fruit = document.getElementById('fruit');
					 var bio = document.getElementById('bio');
					 if (fruit.value == 'pommes') {
					// affichage
					bio.style.display = 'block';
					 } else {
					// masquage
					bio.style.display = 'none';
					 }
				}
			</script>
 
			<p align="center">
			   <input type="submit" value="Simuler !" /> <input type="reset" value="Réinitialiser" />
			</p>
 
		</form>
	</body>
</html>

Pour les deux autres solutions, comment faut il placer le code javascript?

[Watilin]

Eh bien dans une balise <script> dans le <head>, sans autre modification ! Tu peux même le placer dans un fichier externe. C’est du code non-obstrusif. La seule chose qui le relie avec le code HTML, c’est les id.

[remus69]

Thanks!!!