Formulaire : champs à affichage conditionnel avec Javascript

Version imprimable

Bonjour,

Je bloque sur un point depuis plusieurs heure :
Je voudrais faire apparaitre le champs "ville_d_espagne" seulement si la personne sélectionne le pays espagne dans la liste déroulante juste avant.

Je sais que je dois utiliser javascript, j'ai essayé plusieurs solutions avec onclick(); mais je n'ai pas réussi à trouver une solution correcte. Pourriez-vous m'aider svp ?

Merci d'avance ;)

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
<!DOCTYPE html>
<html>
	<head>
        <meta charset="utf-8" />
        <title>Formulaire</title>
        </head>
        <body>
 
        <form name="formulaire">
 
        	<p><label for="pays">Dans quel pays habitez-vous ?</label><br /></p>
		        <select name="pays" id="pays">
		            <option value="france" >France</option>
		            <option value="espagne">Espagne</option>
		            <option value="italie">Italie</option>
		        </select>
 
		    <p><label for="ville_d_espagne">Quelle est votre ville espagnole favorite?</label><br /></p>
		        <select name="ville_d_espagne" id="ville_d_espagne">
		            <option value="madrid" >Madrid</option>
		            <option value="santiago">Santiago</option>
		            <option value="grenade">Grenade</option>
		        </select>
  		</form>
 
	</body>
</html>

Pour précision :

J'ai pensé à insérer un onclick dans l'option "espagne" comme ça :

Code:

<option value="espagne" onclick="affiche(this)">Espagne</option>

qui renvoie vers une fonction écrite en javascipt :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
	      	function affichebox(element) 
	    	{
 				if(element=="espagne") 
				{ 
                                         //Je bloque ici, quelle instruction mettre pour afficher le champ ville_d_espagne ssi espagne est sélectionné ?????
				} 
				 else 
				{ 
                                        // on masque
				};
		}
	    </script>

22/05/2018, 20h04
bonjourajax
Bonsoir
Code:

1 2 element.style.display = "block";
voila comment afficher l'element
22/05/2018, 20h45
ProgElecT

Salut
onclick="affiche(this)" puis function affichebox(element)ta fonction n'a pas le nom de ton appel onclick

Re
Une façon de faire

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
<!DOCTYPE html>
<html>
	<head>
        <meta charset="utf-8" />
        <title>Formulaire</title>
	</head>
	<body>
 
        <form name="formulaire">
 
        	<p><label for="pays">Dans quel pays habitez-vous ?</label><br /></p>
		        <select name="pays" id="pays" onclick="affichebox()">
		            <option value="france" >France</option>
		            <option value="espagne">Espagne</option>
		            <option value="italie">Italie</option>
		        </select>
 
		    <p><label for="ville_d_espagne" >Quelle est votre ville espagnole favorite?</label><br /></p>
		        <select name="ville_d_espagne" id="ville_d_espagne" style="display:none">
		            <option value="madrid" >Madrid</option>
		            <option value="santiago">Santiago</option>
		            <option value="grenade">Grenade</option>
		        </select>
  		</form>
 
	<script>
                function affichebox() 
                {
                let txt = ObjSlect.value;
                                if(txt=='espagne') 
                                { //Je bloque ici, quelle instruction mettre pour afficher le champ ville_d_espagne ssi espagne est sélectionné ?????
                                        document.getElementById('ville_d_espagne').style.display = 'block';
                                        }else{  // on masque
                                        document.getElementById('ville_d_espagne').style.display = 'none';
                                };
                }
            </script>
	</body>
</html>

22/05/2018, 21h20
Matt_dodo

Merci pour votre aide, je suis en train de tester tout ça

ProgElect, merci beaucoup, j'étais sur le point de te demander de l'aide et juste avant j'ai fait qques modifs, je me suis débloqué.

Voici le code que j'ai utilisé, c'est quasiment comme le tien, mais j'ai essayé de le réécrire à ma façon.

merci encore

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
<!DOCTYPE html>
<html>
	<head>
        <meta charset="utf-8" />
        <title>Formulaire</title>
	</head>
	<body>
 
		<script>
                function affichebox() 
                {
                        var paystemp = document.getElementById('pays').value
                        if (paystemp=="espagne")
                        {
                         document.getElementById('ville_d_espagne').style.display = 'block';
                        }
                        else
                        {
                                 document.getElementById('ville_d_espagne').style.display = 'none';
                        }
                }
            </script>
 
        <form name="formulaire">
 
        	<p><label for="pays">Dans quel pays habitez-vous ?</label><br /></p>
		        <select name="pays" id="pays" onclick="affichebox()">
		            <option value="france" >France</option>
		            <option value="espagne">Espagne</option>
		            <option value="italie">Italie</option>
		        </select>
 
		    <p><label for="ville_d_espagne" >Quelle est votre ville espagnole favorite?</label><br /></p>
		        <select name="ville_d_espagne" id="ville_d_espagne" style="display:none">
		            <option value="madrid" >Madrid</option>
		            <option value="santiago">Santiago</option>
		            <option value="grenade">Grenade</option>
		        </select>
  		</form>
 
 
	</body>
</html>

23/05/2018, 08h48
ProgElecT

Salut

La base du code proposé était let ObjSlect = document.getElementById('pays');, quand j'ai nettoyé le code pour ton cas particulier, j'ai supprimé accidentellement la ligne créent la variable objet ObjSlect :oops: