Formulaire : champs à affichage conditionnel avec Javascript

**Matt_dodo** · 22/05/2018, 20h09

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

**Matt_dodo** · 22/05/2018, 20h50

Pour précision :

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

Code html :

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

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

qui renvoie vers une fonction écrite en javascipt :

Code :

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

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>

**bonjourajax** · 22/05/2018, 21h04

Bonsoir

Code javascript :

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

1
2
 
element.style.display = "block";

voila comment afficher l'element

**ProgElecT** · 22/05/2018, 21h45

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

**ProgElecT** · 22/05/2018, 22h16

Re
Une façon de faire

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

**Matt_dodo** · 22/05/2018, 22h20

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

**Matt_dodo** · 22/05/2018, 23h45

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

**ProgElecT** · 23/05/2018, 09h48

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

Formulaire : champs à affichage conditionnel avec Javascript

JavaScript

Discussions similaires

Partager

Partager