Evénement lors d'un paramétrage "simple" de formulaire

Version imprimable

Bonjour à tous,

Etant newbie en Javascript, je dois toutefois créer une interface permettant de faciliter l'extraction des données INSEE. A ce titre, pour faciliter l'ergonomie du site en question, je suis amener à utiliser le javascript et je bloque depuis quelques jours sur un paramétrage.

Je précise que je prends également mon temps car j'en profite pour apprendre les différents rouages du langage à travers livres et vidéos.

Voici les informations qui je pense vous seraient utiles :

- Bibliothèque Jquery derniere version à cette date, Bootstrap (pour le côté responsive) et HTML5, CSS

L'objectif de ce que je souhaite faire :

J'ai un formulaire avec 11 checkboxs. Quand je coche ou decoche dans ce formulaire, cela cache dans le DOM un autre formulaire groupé en article et reprenant en identifiant le valeur de chaque checkbox du thème. En d'autres termes, si on coche sur case (un thème), cela affiche tous les sous-themes de cette partie.

Voici le code html :

La div concernée des thèmes :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="insert-theme-2">
							  <form method="post" >
										<p class="theme">Choisissez le thème que vous souhaitez extraire <br/>
												  <input type="checkbox" name="commerce" value="1"/><label for="commerce">Commerce</label></br>
												  <input type="checkbox" name="conditionsociete" value="2"/><label for="conditionsociete">Conditions de vie-Société</label></br>
												  <input type="checkbox" name="economie" value="3"/><label for="economie">Économie</label></br>
												  <input type="checkbox" name="educ" value="4"/><label for="educ">Enseignement-Education</label></br>
												  <input type="checkbox" name="entreprise" value="5"/><label for="entreprise">Entreprises</label></br>
												  <input type="checkbox" name="population" value="6"/><label for="population">Population</label></br>
												  <input type="checkbox" name="revenus" value="7"/><label for="revenus">Revenus-Salaires</label></br>
												  <input type="checkbox" name="sante" value="8"/><label for="sante">Santé</label></br>
												  <input type="checkbox" name="services" value="9"/><label for="services">Services-Tourisme-Transports</label></br>
												  <input type="checkbox" name="territoires" value="10"/><label for="territoires">Territoire</label></br>
												  <input type="checkbox" name="travail" value="11"/><label for="travail">Travail-Emploi</label></br>
										</p>
							  </form>
					</div>

Les articles englobant les sous-thèmes :

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
 <div class="row" id="sstheme" >
            <article class="col-sm-8" id="1">
					<form method="post" >
						  <input type="checkbox" name="commerce-detail" id="sous-theme-1" value="1"/><label for="commerce-detail">Commerce de détail</label></br>
					</form>
			</article>
 
			<article class="col-sm-8" id="2">
					<form method="post" >
						  <input type="checkbox" name="Logement" id="sous-theme-2" value="2"/><label for="Logement">Logement</label></br>
  						  <input type="checkbox" name="Vacances-Loisirs" id="sous-theme-3" value="2"/><label for="Vacances-Loisirs">Vacances - Loisirs</label></br>
					</form>
			</article>
 
		  <article class="col-sm-8" id="3">
					<form method="post" >
						  <input type="checkbox" name="economie-general" id="sous-theme-4" value="3"/><label for="economie-general">Économie générale</label></br>
  						  <input type="checkbox" name="finances-publiques" id="sous-theme-5" value="3"/><label for="finances-publiques">Finances publiques</label></br>
					</form>
			</article>
 
		  <article class="col-sm-8" id="4">
					<form method="post" >
						  <input type="checkbox" name="diplome-formation" id="sous-theme-6" value="4"/><label for="diplome-formation">Diplômes - Formation</label></br>
  						  <input type="checkbox" name="eleves-etab-enseignant" id="sous-theme-7" value="4"/><label for="eleves-etab-enseignant">Élèves, établissements et enseignants</label></br>
					</form>
			</article>
 
  		  <article class="col-sm-8" id="5">
					<form method="post" >
						  <input type="checkbox" name="caracteristique-entr-etab" id="sous-theme-8" value="5"/><label for="caracteristique-entr-etab">Caractéristiques des entreprises et établissements</label></br>
  						  <input type="checkbox" name="Demo-entreprises" id="sous-theme-9" value="5"/><label for="Demo-entreprises">Démographie des entreprises</label></br>
					</form>
			</article>
 
		  <article class="col-sm-8" id="6">
					<form method="post" >
						  <input type="checkbox" name="evo-struct-pop" id="sous-theme-10" value="6"/><label for="evo-struct-pop">Évolution et structure de la population</label></br>
  						  <input type="checkbox" name="naissance-fecondite" id="sous-theme-11" value="6"/><label for="naissance-fecondite">Naissances - Fécondité</label></br>
						  <input type="checkbox" name="deces-mortalite-esp" id="sous-theme-12" value="6"/><label for="deces-mortalite-esp">Décès - Mortalité - Espérance de vie</label></br>
  						  <input type="checkbox" name="menages" id="sous-theme-13" value="6"/><label for="menages">Couples - Familles - Ménages</label></br>
					</form>
		  </article>
 
		  <article class="col-sm-8" id="7">
					<form method="post" >
						  <input type="checkbox" name="salaires-revenus" id="sous-theme-14" value="7"/><label for="salaires-revenus">Salaires et revenus d'activités</label></br>
  						  <input type="checkbox" name="revenus-niveaudevie" id="sous-theme-15" value="7"/><label for="revenus-niveaudevie">Revenus - Niveaux de vie - Patrimoine</label></br>
						  <input type="checkbox" name="pauvrete" id="sous-theme-16" value="7"/><label for="pauvrete">Pauvreté</label></br>
					</form>
		  </article>
 
		  <article class="col-sm-8" id="8">
					<form method="post" >
						  <input type="checkbox" name="personnels-equipements" id="sous-theme-17" value="8"/><label for="personnels-equipements">Personnels et équipements de santé</label></br>
					</form>	
		  </article>
 
		   <article class="col-sm-8" id="9">
					<form method="post" >
							  <input type="checkbox" name="services-particulier" id="sous-theme-18" value="9"/><label for="services-particulier">Services aux particuliers</label></br>
							  <input type="checkbox" name="tourisme" id="sous-theme-19" value="9"/><label for="tourisme">Tourisme</label></br>
					</form>
		  </article>
 
		  <article class="col-sm-8" id="10">
					<form method="post" >
							  <input type="checkbox" name="region-dep-villes" id="sous-theme-20" value="10"/><label for="region-dep-villes">Régions, départements et villes de France</label></br>
					</form>
		  </article>
 
		  <article class="col-sm-8" id="11">
					<form method="post" >
							  <input type="checkbox" name="emploi-popactive" id="sous-theme-21" value="11"/><label for="emploi-popactive">Emploi - Population active</label></br>
  							  <input type="checkbox" name="caracteristique-emploi" id="sous-theme-22" value="11"/><label for="caracteristique-emploi">Caractéristiques de l'emploi</label></br>
 							  <input type="checkbox" name="chomage" id="sous-theme-23" value="11"/><label for="chomage">Chômage</label></br>
					</form>
		  </article>
		  </div>

Voilà maintenant le fameux javascript qui retranscrit au mieux ce que je souhaite. J'ai fait d'autres essais avec des boucles plus alambiquées mais qui transcrivent moins mon souhait et le resultat que je souhaite obtenir.

Ce code présente un bug puisque quand le theme 2 est coché sans que le theme 1 le soit, c'est le theme 1 qui s'affiche (je pense que c'est un problème d'évènement d'où mon titre).

// je me suis arrêté à 2 en observant déjà ce bug.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
var article1 = $('article')[0];
var article2 = $('article')[1];
var article3 = $('article')[2];
var article4 = $('article')[3];
var article5 = $('article')[4];
var article6 = $('article')[5];
var article7 = $('article')[6];
var article8 = $('article')[7];
var article9 = $('article')[8];
var article10 = $('article')[9];
var article11 = $('article')[10];
 
 
  if($('.theme input:checked')[0]==undefined){$(article1).hide("slow");}else{$(article1).show("slow");}
  if($('.theme input:checked')[1]==undefined){$(article2).hide("slow");}else{$(article2).show("slow");}

J'ai également essayer des boucles .each et for sans succès quand je manque encore de méthode et de la logique requise en développement.

Pourriez-vous m'apporter votre expérience pour que je puisse avancer dans mon apprentissage et sur ce projet? Je suis preneur de différentes méthodes pour essayer de comprendre cette logique et façon de faire et voir si mon hypothèse de départ sur les évènements est fondé.

En vous remerciant par avance,

Matthieu.

12/08/2015, 15h48
Darkauron

Salut,

Pour rendre lisible ton post, peux-tu mettre ton code entre balise [ CODE][/ CODE] avec le bouton # stp ?

Je t'avouerai que je n'ai pas lu ce que tu as mis pour le moment.
12/08/2015, 15h59
Darkauron

Ok, j'ai pris mon courage à 2 mains pour comprendre en attendant que tu édites le post.

Si j'ai bien compris, tu as une première partie de formulaire avec des checkbox et il doit être possible d'en cocher plusieurs et donc d'afficher plusieurs sous-formulaire correspondant.

Pour faire ça, tu ne rentres pas dans le cas d'une boucle, le for ou .each ne servent donc à rien, comme tu l'as remarqué.

Petite question, comment sont cachés les sous-form à l'origine ? Via du css ? Si c'est le cas, peux-tu le fournir ?
13/08/2015, 13h15
matvib1983

Désolé pour l'affiche du code

Bonjour à tous et merci pour vos réponses rapides,

Désole pour l'affichage du code et ces problèmes d'indentation, je ferai attention désormais.

Code:

Je pense que j'ai pigé

grâce aux modérateurs.

Matthieu.

Affichage du sous formulaire - rep à Darkauron

Bonjour Darkauron et merci pour ta réponse,

Le sous-formulaire est caché à partir d'un objet jquery et de .hide();

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

// Les variables d'introduction

//Contenu html : les thèmes sous forme de checkbox sont mémorisées dans la variable et préalablement chargé

var theme_html=$(".theme");
var accueil_html=$("#accueil-1");

// Condition chargé : en fonction de la case cochée, le contenu html s'adapte lors du chargement de la page (sur les radios)

jQuery(window).load(function(){
    

if ($( ".menu-1:checked" ).val()==1)
{
    $( ".theme" ).remove(); //code
    $("#insert-theme-1").html(accueil_html);
    $('article').hide(); // C'est la que tout se passe pour cacher le sous formulaire.
    
}
  else {
    $( "#accueil-1" ).remove(); //code
    $("#insert-theme-2").html(theme_html);
    
  }
});

// Condition chargé : en fonction de la case cochée, le contenu html s'adapte en fonction du bouton radio coché

$( ".menu-1" ).on( "click", function() {
if ($( ".menu-1:checked" ).val()==1)
{
    $( ".theme" ).remove(); //code
    $("#insert-theme-1").html(accueil_html);
    
}
  else {
    $( "#accueil-1" ).remove(); //code
    $("#insert-theme-2").html(theme_html);
    
  }
});

N'hésite pas si tu as d'autres questions sur le sujet.

A ta disposition,

Matthieu

13/08/2015, 13h31
Darkauron

C'est plus lisible comme ça :).

Pour en revenir à ton problème, j'ai un script permettant de faire ce que tu veux, mais il serait plus intéressant pour toi que tu réussisses à le faire.

Tout d'abord, ton deuxième formulaire (celui qui doit être affiché/masqué en fonction des autres checkbox) devrait avoir une règle CSS pour le masquer au chargement de la page.

Ensuite, pour le JQuery, je te conseille de regarder la fonction .click() pour avoir l'évènement sur lequel tu affiches/masques tes checkbox.

Pour info, je me suis appuyé sur ton code, je n'ai pas retouché au HTML pour le faire fonctionner. Je te laisse avancer sur ton code et n'hésite pas à revenir si tu as besoin d'aide :).

EDIT : tu as répondu entre temps. Pour cacher tes checkbox, tu peux faire avec JQuery comme tu as fait, et pour le même résultat en css, tu utilises un display : none sur article.
13/08/2015, 15h01
matvib1983

Avancé

Merci beaucoup,

J'essaie tout cela et je reviens vers toi :).

Résultat - code complet

Voilà, voilà,

j'ai tenté un bout de code qui marche.

Voici la totalité du code que j'ai construit pour ce site en construction. Il y a peut-être après des méthodes plus rapide avec des boucles sur les éléments du DOM. Je suis toujours preneur.

En tout cas, ton orientation sur le .click et le css m'a vraiment dépanné. Ce code fonctionne. Je remercie. Voici la totalité de ce que j'ai fait pour l'instant si cela peut aider à d'autres personnes.

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
// Les variables d'introduction
 
//Contenu html : les thèmes sous forme de checkbox sont mémorisées dans la variable et préalablement chargé
 
var theme_html=$(".theme");
var accueil_html=$("#accueil-1");
 
// Condition chargé : en fonction de la case cochée, le contenu html s'adapte lors du chargement de la page
 
jQuery(window).load(function(){
 
 
if ($( ".menu-1:checked" ).val()==1)
{
    $( ".theme" ).remove(); //code
    $("#insert-theme-1").html(accueil_html);
 
}
  else {
    $( "#accueil-1" ).remove(); //code
    $("#insert-theme-2").html(theme_html);
 
  }
});
 
// Condition chargé : en fonction de la case cochée, le contenu html s'adapte en fonction du bouton radio coché
 
$( ".menu-1" ).on( "click", function() {
if ($( ".menu-1:checked" ).val()==1)
{
    $( ".theme" ).remove(); //code
    $("#insert-theme-1").html(accueil_html);
 
}
  else {
    $( "#accueil-1" ).remove(); //code
    $("#insert-theme-2").html(theme_html);
 
	// Boucle pour vérifier la correspondance entre les thèmes : si c'est coché apparition de l'article
var theme1=$( ".theme input" ).get(0);
var theme2=$( ".theme input" ).get(1);
var theme3=$( ".theme input" ).get(2);
var theme4=$( ".theme input" ).get(3);
var theme5=$( ".theme input" ).get(4);
var theme6=$( ".theme input" ).get(5);
var theme7=$( ".theme input" ).get(6);
var theme8=$( ".theme input" ).get(7);
var theme9=$( ".theme input" ).get(8);
var theme10=$( ".theme input" ).get(9);
var theme11=$( ".theme input" ).get(10);
var sstheme1=$( "article" ).get(0);
var sstheme2=$( "article" ).get(1);
var sstheme3=$( "article" ).get(2);
var sstheme4=$( "article" ).get(3);
var sstheme5=$( "article" ).get(4);
var sstheme6=$( "article" ).get(5);
var sstheme7=$( "article" ).get(6);
var sstheme8=$( "article" ).get(7);
var sstheme9=$( "article" ).get(8);
var sstheme10=$( "article" ).get(9);
var sstheme11=$( "article" ).get(10);
 
$(theme1).click(function() {
  if($(theme1).prop("checked")==true)
  {$(sstheme1).css("display","block")}else
  {$(sstheme1).css("display","none")}
  })
 
 
$(theme2).click(function() {
   if($(theme2).prop("checked")==true)
   {$(sstheme2).css("display","block")}else
   {$(sstheme2).css("display","none")}
})
 
$(theme3).click(function() {
  if($(theme3).prop("checked")==true)
  {$(sstheme3).css("display","block")}else
  {$(sstheme3).css("display","none")}
  })
 
 
$(theme4).click(function() {
   if($(theme4).prop("checked")==true)
   {$(sstheme4).css("display","block")}else
   {$(sstheme4).css("display","none")}
})
 
$(theme5).click(function() {
  if($(theme5).prop("checked")==true)
  {$(sstheme5).css("display","block")}else
  {$(sstheme5).css("display","none")}
  })
 
 
$(theme6).click(function() {
   if($(theme6).prop("checked")==true)
   {$(sstheme6).css("display","block")}else
   {$(sstheme6).css("display","none")}
})
 
$(theme7).click(function() {
  if($(theme7).prop("checked")==true)
  {$(sstheme7).css("display","block")}else
  {$(sstheme7).css("display","none")}
  })
 
 
$(theme8).click(function() {
   if($(theme8).prop("checked")==true)
   {$(sstheme8).css("display","block")}else
   {$(sstheme8).css("display","none")}
})
 
$(theme9).click(function() {
  if($(theme9).prop("checked")==true)
  {$(sstheme9).css("display","block")}else
  {$(sstheme9).css("display","none")}
  })
 
 
$(theme10).click(function() {
   if($(theme10).prop("checked")==true)
   {$(sstheme10).css("display","block")}else
   {$(sstheme10).css("display","none")}
})
 
$(theme11).click(function() {
  if($(theme11).prop("checked")==true)
  {$(sstheme11).css("display","block")}else
  {$(sstheme11).css("display","none")}
  })
 
 
  }
});

Voici le html (en fait il deviendra un php) qui me sert pour ce site :

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                  <title>Compil' de données</title>
                <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
 
        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
        <meta name="application-name" content="CD7 online"/>
        <meta name="msapplication-TileColor" content="#21BBEF" />
		<!-- Latest compiled and minified CSS -->
		<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
 
		<!-- Optional theme -->
		<link rel="stylesheet" href="css/bootstrap/bootstrap-theme.min.css">
		<link rel="stylesheet" href="css/style.css">
 
		<!-- Latest compiled and minified JavaScript -->
		<script src="js/jquery.js"></script>
		<script src="js/bootstrap/bootstrap.min.js"></script>
 
    </head>
    <body>
<!--[if lte IE 8]>
    <p class="browsehappy">Votre navigateur n'est pas supporté par Cartes &amp; Données Online. Merci de <a href="http://browsehappy.com/">mettre à jour votre navigateur</a> pour pouvoir accéder à Cartes &amp; Données Online.</p>
<![endif]-->
 
<body>
   <div class="container">
      <header class="row">
        <div class="col-lg-10">Entete</div>
      </header>
      <div class="row">
        <nav class="col-sm-4">
		  <form method="post" class="all" >
					<input type="radio" class="menu-1" name="menu" id="accueil" value="1" checked="checked"/><label for="accueil">Accueil</label></br>
					<input type="radio" class="menu-1" name="menu" id="theme-0"value="2" /><label for="theme">Thèmes INSEE</label></br>
		    </form>
		  <div id="insert-theme-1">
					<div id="accueil-1">
					<p>Bienvenue sur ce site vous permettant d'extraire les données INSEE pour les différents niveaux géographiques officiels.
					Cet outil vous permettra d'extraire au format Excel les tableaux de l'INSEE formatés pour être utiliser dans Cartes&Données.</p>
					<p>D'autre part, il est désormais possible de trouver et extraire plus facilement les données que vous souhaitez tout en mélangeant les thématiques et sous-thématiques.
					C'est pourquoi, vous faire gagner du temps est l'objet de cet outil d'extraction qui est désormais compatible tout support et système d'exploitation et ce dernier ne requiert
					aucune installation.</p>
					</div>
		  </div>
		  <div id="insert-theme-2">
							  <form method="post" >
										<p class="theme">Choisissez le thème que vous souhaitez extraire <br/>
												  <input type="checkbox" name="commerce" value="1"/><label for="commerce">Commerce</label></br>
												  <input type="checkbox" name="conditionsociete" value="2"/><label for="conditionsociete">Conditions de vie-Société</label></br>
												  <input type="checkbox" name="economie" value="3"/><label for="economie">Économie</label></br>
												  <input type="checkbox" name="educ" value="4"/><label for="educ">Enseignement-Education</label></br>
												  <input type="checkbox" name="entreprise" value="5"/><label for="entreprise">Entreprises</label></br>
												  <input type="checkbox" name="population" value="6"/><label for="population">Population</label></br>
												  <input type="checkbox" name="revenus" value="7"/><label for="revenus">Revenus-Salaires</label></br>
												  <input type="checkbox" name="sante" value="8"/><label for="sante">Santé</label></br>
												  <input type="checkbox" name="services" value="9"/><label for="services">Services-Tourisme-Transports</label></br>
												  <input type="checkbox" name="territoires" value="10"/><label for="territoires">Territoire</label></br>
												  <input type="checkbox" name="travail" value="11"/><label for="travail">Travail-Emploi</label></br>
										</p>
							  </form>
					</div>
		</nav>
        <section class="col-sm-8" id="section1">
          <div class="row" id="sstheme" >
            <article class="col-sm-8" id="1">
					<form method="post" >
						  <input type="checkbox" name="commerce-detail" id="sous-theme-1" value="1"/><label for="commerce-detail">Commerce de détail</label></br>
					</form>
			</article>
 
			<article class="col-sm-8" id="2">
					<form method="post" >
						  <input type="checkbox" name="Logement" id="sous-theme-2" value="2"/><label for="Logement">Logement</label></br>
  						  <input type="checkbox" name="Vacances-Loisirs" id="sous-theme-3" value="2"/><label for="Vacances-Loisirs">Vacances - Loisirs</label></br>
					</form>
			</article>
 
		  <article class="col-sm-8" id="3">
					<form method="post" >
						  <input type="checkbox" name="economie-general" id="sous-theme-4" value="3"/><label for="economie-general">Économie générale</label></br>
  						  <input type="checkbox" name="finances-publiques" id="sous-theme-5" value="3"/><label for="finances-publiques">Finances publiques</label></br>
					</form>
			</article>
 
		  <article class="col-sm-8" id="4">
					<form method="post" >
						  <input type="checkbox" name="diplome-formation" id="sous-theme-6" value="4"/><label for="diplome-formation">Diplômes - Formation</label></br>
  						  <input type="checkbox" name="eleves-etab-enseignant" id="sous-theme-7" value="4"/><label for="eleves-etab-enseignant">Élèves, établissements et enseignants</label></br>
					</form>
			</article>
 
  		  <article class="col-sm-8" id="5">
					<form method="post" >
						  <input type="checkbox" name="caracteristique-entr-etab" id="sous-theme-8" value="5"/><label for="caracteristique-entr-etab">Caractéristiques des entreprises et établissements</label></br>
  						  <input type="checkbox" name="Demo-entreprises" id="sous-theme-9" value="5"/><label for="Demo-entreprises">Démographie des entreprises</label></br>
					</form>
			</article>
 
		  <article class="col-sm-8" id="6">
					<form method="post" >
						  <input type="checkbox" name="evo-struct-pop" id="sous-theme-10" value="6"/><label for="evo-struct-pop">Évolution et structure de la population</label></br>
  						  <input type="checkbox" name="naissance-fecondite" id="sous-theme-11" value="6"/><label for="naissance-fecondite">Naissances - Fécondité</label></br>
						  <input type="checkbox" name="deces-mortalite-esp" id="sous-theme-12" value="6"/><label for="deces-mortalite-esp">Décès - Mortalité - Espérance de vie</label></br>
  						  <input type="checkbox" name="menages" id="sous-theme-13" value="6"/><label for="menages">Couples - Familles - Ménages</label></br>
					</form>
		  </article>
 
		  <article class="col-sm-8" id="7">
					<form method="post" >
						  <input type="checkbox" name="salaires-revenus" id="sous-theme-14" value="7"/><label for="salaires-revenus">Salaires et revenus d'activités</label></br>
  						  <input type="checkbox" name="revenus-niveaudevie" id="sous-theme-15" value="7"/><label for="revenus-niveaudevie">Revenus - Niveaux de vie - Patrimoine</label></br>
						  <input type="checkbox" name="pauvrete" id="sous-theme-16" value="7"/><label for="pauvrete">Pauvreté</label></br>
					</form>
		  </article>
 
		  <article class="col-sm-8" id="8">
					<form method="post" >
						  <input type="checkbox" name="personnels-equipements" id="sous-theme-17" value="8"/><label for="personnels-equipements">Personnels et équipements de santé</label></br>
					</form>	
		  </article>
 
		   <article class="col-sm-8" id="9">
					<form method="post" >
							  <input type="checkbox" name="services-particulier" id="sous-theme-18" value="9"/><label for="services-particulier">Services aux particuliers</label></br>
							  <input type="checkbox" name="tourisme" id="sous-theme-19" value="9"/><label for="tourisme">Tourisme</label></br>
					</form>
		  </article>
 
		  <article class="col-sm-8" id="10">
					<form method="post" >
							  <input type="checkbox" name="region-dep-villes" id="sous-theme-20" value="10"/><label for="region-dep-villes">Régions, départements et villes de France</label></br>
					</form>
		  </article>
 
		  <article class="col-sm-8" id="11">
					<form method="post" >
							  <input type="checkbox" name="emploi-popactive" id="sous-theme-21" value="11"/><label for="emploi-popactive">Emploi - Population active</label></br>
  							  <input type="checkbox" name="caracteristique-emploi" id="sous-theme-22" value="11"/><label for="caracteristique-emploi">Caractéristiques de l'emploi</label></br>
 							  <input type="checkbox" name="chomage" id="sous-theme-23" value="11"/><label for="chomage">Chômage</label></br>
					</form>
		  </article>
		  </div>	  
            <div class="col-sm-2">
              <div class="row">
                <aside>Aside 1</aside>
                <aside>Aside 2</aside>
              </div>
            </div>
          </div>
        </section>
      </div>
      <footer class="row">
        <div class="col-lg-12">Pied de page</div>
      </footer>
    </div>
</body>
		  		<script src="js/interface.js"></script>
</html>

Prochaine étape :

- Mise en forme css pour conformité avec une application métier déja existante
- Ajax (pas fêtes des fleurs :) : on a du déjà la faire) pour récupérer des colonnes de ou des tables choisis en fonction de ces sous-thèmes.

Je te remercie encore une fois et je mets résolu à ton go.

Matthieu.

13/08/2015, 16h16
Darkauron

Maintenant que tu as compris la mécanique, voilà du JQuery un peu plus propre :p

https://jsfiddle.net/3y7sw8zz/1/

Tu peux remplacer les fadeIn par show et fadeOut par hide, ça marche aussi, la transition en moins.

A oui. Beaucoup plus simple en effet - enfin beaucoup plus court surtout pour moi :p. Je vais mettre des commentaires, histoire de montrer que j'ai compris.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 // Boucle pour cacher par défaut tous les balises articles $.each($('article'), function(){ $(this).hide(); }) // Selection du formulaire avec la fonction click $(".theme input[type=checkbox]").click(function() { //variable pour récupérer l'objet value du html et du formulaire var coche = $(this).val(); // selection avec concatenation pour récupérer l'id des articles et récupérer le display du css pour ces mêmes articles. // Condition si le display est none alors on montre sinon on cache if($("#"+coche).css("display")=="none") $("#"+coche).fadeIn(); else $("#"+coche).fadeOut(); })
Si je ne me trompe pas deux grandes actions : la boucle pour cacher (dû à l’absence du css peut être).
La fonction click. Par contre, j'ai une interrogation. Comment fait-il le lien entre le formulaire et les sous formulaires ?
A aucun moment, nous avons spécifié que value = id par exemple. C'est surement par le "this" qui récupère le formulaire pour le récupérer dans le sous formulaire avec l'identifiant de ce dernier, si je ne m'abuse.

En tout cas, merci, je mets en résolu.

Bonne soirée.

14/08/2015, 10h24
Darkauron

En effet, tes commentaires sont justes.

Pour la boucle qui cache le sous formulaire, tu peux effectivement le retirer si tu mets du CSS pour le faire.

Concernant l'ID, $(this) récupère l'objet sur lequel tu cliques, donc ta checkbox de ton premier formulaire, dont la value correspond à l'ID du sous-formulaire attaché.

Petite information que je viens de voir, tu as 2 <form> dans ton HTML, tu ne dois en mettre qu'un seul. Tu devrais englobé la totalité de tes 2 formulaires dans une balise <form>.
Par contre, dans ce cas, lors de la validation, il faudra vérifier si les coches du sous formulaire sont envoyé lorsqu'elles sont cachées. Si je ne suis pas clair, n'hésite pas à demander.
16/08/2015, 09h13
matvib1983

Bonjour Darkauron,

Hum, hum, englober les deux formulaires en un seul. Ce qu'il y a c'est que j'en ai plus de deux aussi.:roll:

Un premier pour le formulaire des thèmes principaux
Un pour chaque sous thème : tu verras, il y a un form pour chaque sous-thème.
De plus, ce formulaire ne sera envoyé en requête POST puisqu'il agira que côté client. Il s'agit que l'utilisateur ne voit que les thèmes et les sous-thèmes qu'il souhaite.

Ensuite, le fait de cocher le sous-theme lance une rêquete ajax qui va référencer l'ensemble de ou des colonnes de ou des tables sélectionnés sur le territoire voulue (commune, canton,département,etc.).:aie:

Ensuite l'utilisateur par un drag and drop ou autre chose (je suis pas fixé pour l'instant). sélectionnera les colonnes qu'il souhaite.
C'est à ce moment là qu'on enverra du POST pour lancer la réquête récupérant l'information (les lignes dans la base de données).

Du coup je me demande si les checkbox sont vraiment utiles si le onclick avec changement du fond css (en blanc au lieu de noir ou vise versa) n'est pas suffisant sur des div qui remplacerait les inputs.

Merci beaucoup pour cette remarque et ton aide. Je vais essayer d'être conforme également au w3c.

A ta dispos :D si j'ai pas été très clair.

Bonne journée.