Formulaire dynamique (modifiable par variables)

Version imprimable

07/07/2010, 14h28
remus69

2 pièce(s) jointe(s)

Formulaire dynamique (modifiable par variables)

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!

Trop facile :P

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:

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:

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:

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 !

;)

08/07/2010, 09h48
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
08/07/2010, 10h06
remus69

Je crois que c'est surtout le change et le keyup que je ne sais pas placer correctement.
08/07/2010, 10h16
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). :ccool:

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

1 2 3 <select id="fruit" onchange="changeFruit()" onkeyup="changeFruit()"> ... </select>
y’a la solution « DOM niveau 0 », un peu mieux :
Code:

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:

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

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:

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>

Melting pot ;-)

Il y a quelques petites confusions. :)
Code:

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:

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:

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:

1 2 <select name="fruit" id="fruit" onchange="changeFruit();" onkeyup="changeFruit();">
C'est un appel de fonction classique.

08/07/2010, 11h29
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é ^^

Ok merci beaucoup pour toutes ces explications:P

La première solution est donc celle ci :

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

08/07/2010, 16h36
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.

;)
08/07/2010, 17h14
remus69

Thanks!!!