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

**matvib1983** · 12/08/2015, 16h33

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 :

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

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

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

**Darkauron** · 12/08/2015, 16h48

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.

**Darkauron** · 12/08/2015, 16h59

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 ?

**matvib1983** · 13/08/2015, 14h15

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 :

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

Je pense que j'ai pigé

grâce aux modérateurs.

Matthieu.

**matvib1983** · 13/08/2015, 14h23

Bonjour Darkauron et merci pour ta réponse,

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

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

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

**Darkauron** · 13/08/2015, 14h31

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.

**matvib1983** · 13/08/2015, 16h01

Merci beaucoup,

J'essaie tout cela et je reviens vers toi

.

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

jQuery

Vue hybride

Discussions similaires

Partager

Partager