Cacher une div en fonction d'une value

**DiR95** · 21/04/2015, 23h27

Bonsoir, je vous explique mon soucis j'ai deux div j'aimerais que lorsque je me mets sur l'option "m" la première div s'affiche et si c'est "f" la deuxième s'affiche mais je n'y arrive pas :/

Merci de votre aide.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function(){
    // On cache le div a afficher :
    $("#enplus").hide();
    $('#sexe').on('change', function() {
        if($(this).val() === 'm') {
            $('#enplus').hide();
        } else {
            $('#enplus').show();
        }
 })
});

Le formulaire:

Code html :

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

1
2
3
4
5
6
<div id ="enplus">
    <p>Rue<input type="text" name="rue" /></p>
</div>
<div id= "enmoins">
    <p>Pays<input type="text" name="pays" /></p>
</div>

**Darkauron** · 21/04/2015, 23h59

Bonjour,

Première chose dans ton code, que viennent faire les * ? A part faire buguer le script ?

Ensuite, quel est le type de champ de #sexe ? Un bouton radio ? Une liste déroulante ?

Si c'est une liste déroulante, ça devrait fonctionner si JQuery est bien chargé dans la page.
Si ce sont 2 radios boutons, tu ne pourras pas utiliser le sélecteur par ID.

En attente d'information pour demain

Darkauron

**DiR95** · 22/04/2015, 00h01

Les étoiles n'y sont pas sur mon code. Oui c'est une liste déroulante

**DiR95** · 22/04/2015, 00h03

Je les ai bien installer

Code :

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

1
2
<script src="js/jquery-1.11.2.min.js"> </script>
      <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

**DiR95** · 22/04/2015, 00h05

Code html :

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

1
2
3
4
5
6
7
8
<p> 
    <label> Sexe </label>
    <select name="sexe">
        <option value=""></option>
        <option value="m">M</option>
        <option value="f">F</option>
    </select>
</p>

Et #sexe

**Darkauron** · 22/04/2015, 00h05

Dans ce cas édite le post pour les enlever, ça évitera toute confusion

Peut tu fournir le code correspondant à ton sélect stp ? Si tu réponds rapidement, je pourrais te répondre ce soir

Darkauron

**Darkauron** · 22/04/2015, 00h07

Il faut que tu mettes un id sur ton select :

Code :

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

<select id="sexe" name="sexe"> ... </select>

Le # correspond à l'id de la balise en JS

Darkauron

**DiR95** · 22/04/2015, 00h07

Je te l'ai envoyé

**Darkauron** · 22/04/2015, 00h09

Je te laisse tester ce que je t'ai mis.

Darkauron

**DiR95** · 22/04/2015, 00h12

Sa ne fonctionne toujours pas :/

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
	<title> Informations importantes</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
	<link rel="stylesheet" href="style.css" />
      <script src="js/jquery-1.11.2.min.js"> </script>
      <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
 
</head>
 
<body> 
 
<script>
      $(document).ready(function(){
****// On cache le div a afficher$
("#enplus").hide();
      $('#sexe').on('change', function() {
            if($(this).val() === 'm') {
                  $('#enplus').hide();
 }else{
$('#enplus').show();
}
})
 
*});
 
</script>
 <div class= "page">
 	<div class= "formulaire" action= "traitement_annonce.php">
 		<form  method= "post">
 			<p> Informations </p>
 			<p>Nom<input type="text" name="nom" /></p>
            <p>Prenom<input type="text" name="prenom" /></p>
           	<p>
            	<label> Jour </label>
            	<select name="jour">
            	<?php
                        for ($i = 1; $i <= 31; $i++){
                                echo '<option value="'.$i.'">'.$i.'</option>';
                        } 
                ?>
            	</select> 
            </p>
            <p>
            	<label> Mois </label>
            	<select name="mois">
            	<?php
                        for ($i = 1; $i <= 12; $i++){
                                echo '<option value="'.$i.'">'.$i.'</option>';
                        } 
                ?>
            	</select> 
            </p>
            <p>
            	<label> Annee </label>
            	<select name="annee">
            	<?php
                        for ($i = 1930; $i <= 2015; $i++){
                                echo '<option value="'.$i.'">'.$i.'</option>';
                        } 
                ?>
            	</select>
            </p>
            <p> 
            	<label> Sexe </label>
            	<select id="sexe" name="sexe">
                        <option value=""></option>
            		<option value="m">M</option>
            		<option value="f">F</option>
            	</select>
            </p>
            </div>
            <div id ="enplus" style="display:none">
            <p>Rue<input type="text" name="rue" /></p>
            <p>Code Postal<input type="text" name="codep" /></p>
            <p>Ville<input type="text" name="ville" /></p>
            <p>D&eacute;partement<input type="text" name="departement" /></p>
            <p>R&eacute;gion<input type="text" name="region" /></p>
            </div>
            <div id= "enmoins" style="display:none">
            <p>Pays<input type="text" name="pays" /></p>
            <p>Tel fixe<input type="text" name="tel_fixe" /></p>
            <p>Tel portable<input type="text" name="tel_portable" /></p>
            <p>
            	<label> Je suis à la recherche de </label>
            	<select name= "recherche">
            		<option value="1"> Club </option>
            		<option value="2"> Entraineur </option>
            	</select>
            </p>
            <p> <input type="submit" value="Valider" /></p>
        </form>
       </div>
 	</div>
    </body>
</html>

**DiR95** · 22/04/2015, 00h13

Je t'ai tous mis

**Darkauron** · 22/04/2015, 00h16

Vérifie tes erreurs avec la console de ton navigateur (F12 pour l'activer) et tu verra que tu as fait une erreur :

Code :

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

("#enplus").hide();

J'ai comme l'impression qu'il manque un $ devant ça. Si tu veux faire du JS, faut vraiment apprendre à travailler avec ton navigateur et les outils qu'il te propose.

Darkauron