Formulaire : champs à affichage conditionnel avec Javascript

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

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, 19h50

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, 20h04

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, 20h45

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

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

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, 21h20

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

Formulaire : champs à affichage conditionnel avec Javascript

JavaScript

Vue hybride

Discussions similaires

Partager

Partager