Cacher une div en fonction d'une value

Version imprimable

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:

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:

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>

21/04/2015, 23h59
Darkauron

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
22/04/2015, 00h01
DiR95

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

Je les ai bien installer

Code:

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>

Code:

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

22/04/2015, 00h05
Darkauron

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
22/04/2015, 00h07
Darkauron

Il faut que tu mettes un id sur ton select :

Code:

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

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

Darkauron
22/04/2015, 00h07
DiR95

Je te l'ai envoyé ;)
22/04/2015, 00h09
Darkauron

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

Darkauron

Sa ne fonctionne toujours pas :/

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

22/04/2015, 00h13
DiR95

Je t'ai tous mis
22/04/2015, 00h16
Darkauron

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

Code:

("#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
22/04/2015, 00h21
DiR95

Excuse moi c'est moi qui est con xD
22/04/2015, 00h21
DiR95

C'est bon sa fonctionne j'ai réglé mon erreur merci à toi c'etait mes conditions :)
22/04/2015, 00h22
Darkauron

Ce sont des choses qui arrivent :)
Bonne soirée.

Darkauron
22/04/2015, 00h24
DiR95

La fatigue x)

Bonne continuation :)