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);
	});
 
 
};