Affichage table à partir de 2 boutons radios

**galia** · 19/09/2012, 16h45

Bonjour à tous,

Je travaille en JSP et voila mon problème.
J'ai un formulaire avec 2 boutons radios.

A la suite j'ai bouton "afficher" de type submit pour afficher un tableaux.
En fait, je voudrais qu'une fois que mon utilisateurs aura choisi une option dans "radio" et une dans "radio2", le tableau s'affiche sur le même écran lorsqu'il valide ses choix...

Au final je vais avoir 9 tables possibles, il faut que l'utilisateur fasse un choix entre "tableau" fréquentation" et "datamart" pour le radio et pareil pour le radio2 entre "quotidien", "hebdo" et "mensuel".. il faut forcément les 2 paramètres. puis on affiche en validant les choix avec bouton type submit
Est-ce que cela est réalisable? si oui quelle démarche faut suivre..?
c'est-a-dire comment contraindre l'utilisateur a faire un choix pour chaque radio... et comment on peux afficher..?

Est-ce que le code peut se faire sur la même page?

Merci d'avance..

**NoSmoking** · 19/09/2012, 18h25

Bonjour,
la demande est assez vague mais je me risque à répondre.

Si les données sont importantes il est peut être souhaitable de passer par la technique <edit>Ajax</edit> pour afficher les données sans recharger la page.

Si il n'y a pas mort d'homme dans ce cas tu peux passer par des éléments cachés que tu affiches suivant la sélection.

Je sais, la notion de quantité reste très vague

**galia** · 21/09/2012, 10h43

Merci pour ta réponse...

Je vais essayer d'être plus précise maintenant que j'ai eu des retours de mes supérieurs...

J'ai 2 series de boutons radios, et il faut cocher un truc dans chauqe série poru afficher un tableau..

Voici le code que j'ai pour l'instant.

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
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
<!doctype html>
<html>
<!-- Page du journal. Affichage du bandeau qui permet de visualiser le journal de son choix-->
	<head>
		<title>Outils Pilotage MySys</title>
		<meta charset="ISO-8859-1" />
		<link rel="stylesheet"	href="../../../OPM/css/pageJournal.css"/>
		<link rel="stylesheet" href="../../../OPM/css/general.css"/>
	</head>
	<body>
	<!--Import menu-->
	<%@ include file="menu.jsp"%>
		<form method=post  action="affJournal.jsp"><!--Formulaire avec champs pour choisir un journal-->
			<fieldset class="cadre">
				<legend>Choix du journal</legend>
				<table class="journal">						
					<thead>
						<tr>
							<th class="journal">Choississez une caisse : </th>
							<th class="journal">Choissisez le type du journal:</th>
							<th class="journal">Choissisez la périodicité : </th>
							<th class="journal"></th>
						</tr>
					</thead>					
					<tbody>
						<tr>
							<td class="journal">
								<select> 
									<option value="caisses">Caisses</option>
									<option value="caisse1">Caisse1</option>
									<option value="caisse2">Caisse2</option>
								</select>
							</td>					
							<td class="journal">
								<input type="radio" name="radio" value="tableau" id="tableau" checked/><label for="tableau">Suivi tableaux</label><br>
								<input type="radio" name="radio" value="fréquentation" id="frequentation"/><label for="frequentation">Suivi fréquentation</label><br>
								<input type="radio" name="radio" value="datamart" id="datamart"/><label for="datamart">Suivi datamart </label>
							</td>					
							<td class="journal">
								<input type="radio" class="radio2" name="radio2" value="quotidien" id="quotidien" checked/><label for="quotidien">Quotidien</label><br>
								<input type="radio" class="radio2" name="radio2" value="hebdo" id="hebdo"/><label for="hebdo">Hebdomadaire</label><br>
								<input type="radio" class="radio2" name="radio2" value="mensuel" id="mensuel"/><label for="mensuel">Mensuel</label>
 
							</td>
							<td class="journal">
								<input  type="submit" value="afficher" class="boutonRouge" onclick="affiche();"></input>
							</td>
						</tr>
					</tbody>
				</table>
			</fieldset>
		</form>		
		<section class="journal">
			<img src="../../../OPM/image/journalExemple.PNG" alt="exemple journal">
		</section>
		<script src="../../../OPM/javascript/html5shiv.js"></script><!--Compatibilité IE8 et html5-->
		<script src="../../../OPM/javascript/jquery-1.7.2.js"></script>
		<script src="../../../OPM/javascript/fonctions.js"></script>
		<script type="text/javascript">
		//Couleur du lien du menu
		$(document).ready( function () {
			$('#journal').addClass("actif");
			});
 
	/*--fonction affichage--*/
	function affiche ()
		if(document.getElementById('tableau').checked) 
		{	if(document.getElementById('quotidien').checked) {
 
			}
 
			else if(document.getElementById('hebdo').checked) {
 
			}
 
			else if(document.getElementById('mensuel ').checked) {
 
			}
 
			else{
  			//Aucune valeur sélectionnée
 
  			}
		}
 
		else if(document.getElementById('frequentation').checked) 
		{	if(document.getElementById('quotidien').checked) {
 
			}
 
			else if(document.getElementById('hebdo').checked) {
 
			}
 
			else if(document.getElementById('mensuel ').checked) {
 
			}
 
			else{
  			//Aucune valeur sélectionnée
 
  			}
		}
 
		else if(document.getElementById('datamart ').checked) 
		{	if(document.getElementById('quotidien').checked) {
 
			}
 
			else if(document.getElementById('hebdo').checked) {
 
			}
 
			else if(document.getElementById('mensuel ').checked) {
 
			}
 
			else{
  			//Aucune valeur sélectionnée
 
  			}
		}
 
		else{
  //Aucune valeur sélectionnée
 
		}
		</script>
	</body>
</html>

Mon problème pour l'instant est de remplir la "function affiche ()"...
Je ne sais pas non plus s'il faut l'écrire dans un fichier .JS à part....

Merci de votre aide

**NoSmoking** · 23/09/2012, 11h50

Ma "question initiale" demeure à savoir, d'où viennent les données ?

- sont elles déjà dans la page, cachées dans des DIVs par exemple?
- sont elles récupérées sur le serveur à chaque demande d'affichage?
de cette provenance va dépendre la façon d'aborder le problème.

Autre question, dans ton code 2 radios sont checked par défaut, les données sont elles pour autant affichées au chargement de la page?

**galia** · 24/09/2012, 09h46

sur l'application actuelle, elles sont cachées par des div...
Je souhaiterai récupérer sur le serveur sauf si l'autre méthode est plus facile a coder...

il s'agit d'une application pro, uniquement destinée aux employés.

et pour repondre a ta 2eme question, non rien ne s'affiche au chargement de la page...

**NoSmoking** · 24/09/2012, 19h18

bon partons sur la base que les informations sont misent dans le document dans des DIVs cachées.

Le plus simple, enfin pas sûr, est d'avoir des DIVs avec un identifiant du type de ce que je mets dans le code ci dessous

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
  <div id="div_tableau_quotidien">
    Les données Tableau Quotidien
  </div>
  <div id="div_tableau_hebdo">
    Les données Tableau Hebdo
  </div>
  <div id="div_tableau_mensuel">
    Les données Tableau Mensuel
  </div>
 
  <div id="div_frequentation_quotidien">
    Les données Frequentation Quotidien
  </div>
  <div id="div_frequentation_hebdo">
    Les données Frequentation Hebdo
  </div>
  <div id="div_frequentation_mensuel">
    Les données Frequentation Mensuel
  </div>
 
  <div id="div_datamart_quotidien">
    Les données Datamart Quotidien
  </div>
  <div id="div_datamart_hebdo">
    Les données Datamart Hebdo
  </div>
  <div id="div_datamart_mensuel">
    Les données Datamart Mensuel
  </div>

la DIV div_tableau_mensuel sera affichée si les radios bouton tableau et mensuel sont cochés.

Les données respectives seront donc placées dans chacune de ces DIVs.

Concernant le code javascript, et compte-tenu que tu utilises jQuery, on va continuer avec et initialiser après chargement les différents radios bouton.

Plutôt qu'un long discourt je te place le code ci dessous

Code javascript :

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
$(document).ready( function () {
  $('#journal').addClass("actif");
  // masquage de toutes les div div_xxxx
  $( 'div[id^="div_"]').hide();
  // recup des radio
  var oRadio = $('input[name*="radio"]');
  // affecte fonction à chacun sur le clic
  $.each( oRadio, function( ind, elem){
    $(elem).on( 'click', function(e){
      // recup des champs checked de la form sous forme d'un Array
      var champ = $( 'form').serializeArray();
      var retour = [];
      $.each( champ, function( ind, data){
        retour[ind] = data.value;
        // retour.push(data.value); // meme chose que ci dessus
      });
      // affiche la bonne DIV
      showDiv(  retour);
    });
  });
});

en gros à chaque clic sur un radio on récupère la valeur des éléments cochés, attention néanmoins si il devait y avoir d'autre contrôles identifiés dans la FORM.

La fonction est des plus simple, merci jQuery, voir les commentaires inside

Code javascript :

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

1
2
3
4
5
6
7
8
function showDiv( data){
  // recup id de la DIV a afficher
  var idDiv = '#div_' +data.join('_');
  // masquage de toutes les div div_xxxx
  $( 'div[id^="div_"]').hide();
  // affiche la bonne
  $( idDiv).show();
}

voilà à toi d'adapter à ton besoin.

L'autre méthode serait sur base d'Ajax, mais pas bien plus complexe, cela dépendrait donc du volume de données à manipuler.

Compte tenu de la tournure de la discussion, je déplace sur le forum jquery

Affichage table à partir de 2 boutons radios

jQuery

Vue hybride

Discussions similaires

Partager

Partager