Discussion :

[dajdouja]

Bonjour,
Après avoir chercher longtemps chez notre ami google sans trouver de piste je remets entre vos mains mon soucis espérant que quelqu'un y jette un coup d'oeil et me donne une solution.
j'ai crée une liste déroulante avec différentes valeurs, j'obtiens une liste de checkbox differentes pour chaque valeur. J'ai rajouté une fonction javascript qui compte le nombre de cases cochées. et le mets dans un champ texte dont la valeur sera stocké dans la base. Jusque là ça marche.
Mais le souci c'est quand je mets tt ca dans mon application.En sauvegardant le formulaire ou en rafraichissant la page, il garde bien le nombre de cases cochées dans le champ texte mais je ne retrouve pas les cases que j'ai cochées (on saura qu'on a coché deux cases par exemple mais on saura pas lesquelles).voilà mon code:

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
<script>
 
function selectbasic(option)
{
switch(option.value){
case "1":document.getElementById('div-cause').innerHTML = '<input name="text_qte1" type="checkbox" onClick="inc_decr1(this.checked);"/>un</br><input name="text_qte" type="checkbox" onClick="inc_decr1(this.checked);"/>deux</br><input name="text_qte" type="checkbox" onClick="inc_decr1(this.checked);" />trois</br><input  name="text_qte" type="checkbox" onClick="inc_decr1(this.checked);" />quatre</br><input  name="text_qte" type="checkbox" onClick="inc_decr1(this.checked);" />cinq</br><input type="text" id="pertinence" name="pertinence" size="50"value="" />   ';
break;
case "2":document.getElementById('div-cause').innerHTML = '<input name="text_qte" type="checkbox" onClick="inc_decr2(this.checked);"/>1</br><input name="text_qte" type="checkbox" onClick="inc_decr2(this.checked);"/>2</br><input name="text_qte" type="checkbox" onClick="inc_decr2(this.checked);" />3</br><input  name="text_qte" type="checkbox" onClick="inc_decr2(this.checked);" />4</br><input  name="text_qte" type="checkbox" onClick="inc_decr2(this.checked);" />5</br> <input type="text" id="pertinence" name="pertinence" size="50"value="" />  ';
break;
case "3":document.getElementById('div-cause').innerHTML = '<input name="text_qte" type="checkbox" onClick="inc_decr3(this.checked);"/>11</br><input name="text_qte" type="checkbox" onClick="inc_decr3(this.checked);"/>12</br><input name="text_qte" type="checkbox" onClick="inc_decr3(this.checked);" />13</br><input type="text" id="pertinence" name="pertinence" size="50"value="" />   ';
break;
case "4":document.getElementById('div-cause').innerHTML = '<input name="text_qte" type="checkbox" onClick="inc_decr4(this.checked);"/>21</br><input name="text_qte" type="checkbox" onClick="inc_decr4(this.checked);"/>22</br><input name="text_qte" type="checkbox" onClick="inc_decr4(this.checked);" />23</br><input  name="text_qte" type="checkbox" onClick="inc_decr4(this.checked);" />24</br> <input type="text" id="pertinence" name="pertinence" size="50"value="" />  ';
break;
default:document.getElementById('div-cause').innerHTML = '';break;
}
}
var compteur1 = 0;
var compteur2 = 0;var compteur3 = 0;var compteur4 = 0;var compteur5 = 0;
function inc_decr1(val_input) {
 
if (val_input) {
 
compteur1++;
}else{
compteur1--;
}
if (compteur1<=0) {
document.getElementById('pertinence').value = "Aucune case cochée/Pertinence est égale à 0";
}else{
document.getElementById('pertinence').value = compteur1 + " case(s) cochée(s)"+"la pertinence est égale à : "+(compteur1/5);
}
}
function inc_decr2(val_input) {
 
if (val_input) {
 
compteur2++;
}else{
compteur2--;
}
if (compteur2<=0) {
document.getElementById('pertinence').value = "Aucune case cochée/Pertinence est égale à 0";
}else{
document.getElementById('pertinence').value = compteur2 + " case(s) cochée(s)"+"la pertinence est égale à : "+(compteur2/5);
}
}
function inc_decr3(val_input) {
 
if (val_input) {
 
compteur3++;
}else{
compteur3--;
}
if (compteur3<=0) {
document.getElementById('pertinence').value = "Aucune case cochée/Pertinence est égale à 0";
}else{
document.getElementById('pertinence').value = compteur3 + " case(s) cochée(s)"+"la pertinence est égale à : "+(compteur3/5);
}
}
function inc_decr4(val_input) {
 
if (val_input) {
 
compteur4++;
}else{
compteur4--;
}
if (compteur4<=0) {
document.getElementById('pertinence').value = "Aucune case cochée/Pertinence est égale à 0";
}else{
document.getElementById('pertinence').value = compteur4 + " case(s) cochée(s)"+"la pertinence est égale à : "+(compteur4/3);
}
}
function inc_decr5(val_input) {
 
if (val_input) {
 
compteur5++;
}else{
compteur5--;
}
if (compteur5<=0) {
document.getElementById('pertinence').value = "Aucune case cochée/Pertinence est égale à 0";
}else{
document.getElementById('pertinence').value = compteur5 + " case(s) cochée(s)"+"la pertinence est égale à : "+(compteur5/4);
}
}
 
</script>
	<tr>
  	<td width="30%">
      <div style="text-align: left; font-weight: bold;">Type&nbsp;</div>
    </td>
    <td >
    	<select class="inputbox" name="type" onchange="selectbasic(this);">
    	<option value="">-</option>
     	<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="4">4</option>
    	</select>
    	<br>
		<div id="div-cause"><input type="text" id="pertinence" name="pertinence" size="5" value="" ></div>
 
    </td>
  </tr>

J'ai pensé crée des sessions en php mais mais j'ai pas vu comment mettre ça en place.
si vous avez des pistes en javascript ou peut importe ça m'aidera bcp.
Merci bcp.

[andry.aime]

Salut,
Utilises DOM pour créer des éléments dynamique et non pas innerHTML;

switch(option.value)

Code :

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

switch(option.options[option.selectedIndex].value)

je ne retrouve pas les cases que j'ai cochées

Tu parles des cases créer avec javascript?
Si c'est le cas, c'est à cause de ses créations avec innerHTML.

[dajdouja]

Merci pour ta réponse andry.aime.
j'ai essayé de créer un checkbox de cette manière:

Code :

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

1
2
3
4
5
6
7
8
9
10
 
var nouveauInput = document.createElement('input');
nouveauInput.name = 'nouveau';
nouveauInput.id = 'nouveauId';
nouveauInput.type = 'checkbox';
switch(option.options[option.selectedIndex].value){
case "1":document.getElementById('div-cause').appendChild(nouveauInput) ;
break;
case "2":document.getElementById('div-cause').appendChild(nouveauInput) ;
break;}

Mais ça ne me donne pas ce que je veux, les cases ne reste pas cochés quand je choisis une nouvelle valeur dans la liste et que je décide après de revenir vers la liste de checkbox où j'ai coché des cases.

En fait j'ai une liste déroulante avec des valeurs (vêtement, vaisselle..). Je veux avoir pour chaque valeur de la liste, une liste de chekbox différente( nombre et label différents). Et à coté un compteur qui s' incrémente à chaque fois que je coche une case et se décrémente quand je décoche( le but c'est de stocker le nombre de cases cochées dans ma base sql pour la valeur de la liste déroulante choisie).
Pour l'instant je réussis à avoir une liste de checkbox différente pour chaque valeur. Mais le problème c quand je coche des cases et après je change valeur dans la liste. Si je retourne vers la liste précédente de checkbox je vois que toutes les cases sont décoché.

Je vous remercie de m'aider ça fais une semaine que je cherche et j'arrive pas à trouver. Je débute en javascript. Si qlq peut me donner un coup de main. Merci

[dajdouja]

Merci pour ton aide mais j'ai pas réussir à faire marcher ce que tu m'a proposé par contre j'ai modifié le code et maintenant mon problème est résolu à moitié. En fait j'ai crée pour chaque valeur de la liste un div différent contenant une liste de checkbox différente.
la fonction javascript:
Code Javascript :

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
 
 
function selectbasic(option)
 
{
 
switch(option.options[option.selectedIndex].value){
 
case "2":document.getElementById('div-cause1').style.display='';document.getElementById('div-cause2').style.display='none';document.getElementById('div-cause3').style.display='none';document.getElementById('div-cause4').style.display='none';
 
break;
 
case "3":document.getElementById('div-cause2').style.display='';document.getElementById('div-cause1').style.display='none';document.getElementById('div-cause3').style.display='none';document.getElementById('div-cause4').style.display='none'; 
 
break;
 
case "4":document.getElementById('div-cause3').style.display='';document.getElementById('div-cause2').style.display='none';document.getElementById('div-cause1').style.display='none';document.getElementById('div-cause4').style.display='none';
 
break;
 
default:document.getElementById('div-cause4').style.display='';document.getElementById('div-cause1').style.display='none';document.getElementById('div-cause3').style.display='none';document.getElementById('div-cause2').style.display='none';
 
break;
 
}
 
}

le formulaire html:
Code HTML :

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
30
31
32
33
34
35
36
37
38
39
40
 
<tr>
 
  	<td width="30%">
 
      <div style="text-align: left; font-weight: bold;">Type&nbsp;</div>
 
    </td>
 
    <td >
 
    	<select class="inputbox" name="type" onchange="selectbasic(this);">
 
    	<option value="">-</option>
 
     	<option value="1">1</option>
 
		<option value="2">2</option>
 
		<option value="3">3</option>
 
		<option value="4">4</option>
 
    	</select>
 
    	<br>
 
		<div id="div-cause1" style="display:none"><input name="text_qte" type="checkbox" onClick="inc_decr2(this.checked);"/>1</br><input name="text_qte" type="checkbox" onClick="inc_decr2(this.checked);"/>2</br><input name="text_qte" type="checkbox" onClick="inc_decr2(this.checked);" />3</br><input  name="text_qte" type="checkbox" onClick="inc_decr2(this.checked);" />4</br><input  name="text_qte" type="checkbox" onClick="inc_decr2(this.checked);" />5</br></div>
 
		<div id="div-cause2" style="display:none"><input name="text_qte" type="checkbox" onClick="inc_decr3(this.checked);"/>11</br><input name="text_qte" type="checkbox" onClick="inc_decr3(this.checked);"/>12</br><input name="text_qte" type="checkbox" onClick="inc_decr3(this.checked);" />13</br></div>
 
		<div id="div-cause3" style="display:none"><input name="text_qte" type="checkbox" onClick="inc_decr4(this.checked);"/>21</br><input name="text_qte" type="checkbox" onClick="inc_decr4(this.checked);"/>22</br><input name="text_qte" type="checkbox" onClick="inc_decr4(this.checked);" />23</br><input  name="text_qte" type="checkbox" onClick="inc_decr4(this.checked);" />24</br></div>
 
		<div id="div-cause4" style="display:none">Ben y a rien hi hi</div>
 
	</td>
 
 
 
  </tr>

le soucis maintenant c'est quand je sauvegarde mon formulaire, quand je veux aller vers la liste de checkbox que j'ai coché. Les cases que j'ai coché ne sont plus visibles.
Svp si quelqu'un veut bien me filer un coup de main. comment pourrais je sauvegarder les données de mon div pour l'appeler après la sauvegarde?

[kodeya]

Lors de la sauvegarde du formulaire le navigateur garde dans le cache des données de certains champs ( textarea par exemple ) mais pas des éléments générés par JS.

Tu peux mettre dans la session les données du formulaire ( avec PHP ) ou dans un cookie avec JS . Et quand tu reviens sur ta page tu refais à nouveau tes checkbox en prennant les données sauvegardées dans la session ou dans un cookie.

[dajdouja]

Salut
Merci pour vos réponses.
Mon problème est à moitié réglé. j'ai du créer un div invisible avec mes valeurs à cocher pour chaque valeur de la liste déroulante. je rends ensuite visible le div correspondant à la valeur sélectionné. Puis je parcours la liste des case et je stocke la valeur de chaque case cochée dans un tableau (qui est aussi un champs dans ma table.) Et après l'enregistrement pour afficher à nouveau les cases déjà cochées je lui demande de comparer la valeur de chaque case avec les valeurs du tableau avec in_array. Si jamais il trouve une valeur, à l'affichage elle sera cochée.
Maintenant ce que je veux faire c'est compter le nombre de cases cochées. J'ai essayé de faire une fonction javascript que j'ai mis à l'événement onClick et je lui demande de m'afficher le nombre dans un champ texte. Il me renvoie bien le nombre de cases cochées mais une fois que j'enregistre et que je décide de cocher de nouvelles cases il reprends le compte depuis le début. c'est normal c'est un peu ce que je lui demande dans mon code:
Code Javascript :

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
 
var compteur1 = 0;
 
 
 
function inc_decr1(val_input) {
 
if (val_input) {
compteur1++;
}else{
 
compteur1--;
 
}
 
if (compteur1<=0) {
 
document.getElementById('pertinence').value = "Pertinence est égale à 0";
 
}else{
 
document.getElementById('pertinence').value = "la pertinence est égale à : "+(compteur1/5);
 
}
 
}

le champ text où il va afficher le résulat:
Code HTML :

Code :

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

1
2
3
4
5
 
<input type="checkbox" id= "id" 
			value="value" name="name"  onClick="inc_decr1(this.checked);"
			<?php if (in_array(id,$criteretype)) echo "checked"; ?>/>
		<input type="text" id="pertinence" name="pertinence" size="50"value="<?php echo $db->f("pertinence") ?>" />

Je veux lui dire de parcourir la liste des cases s'il y a une case cochée il doit la compter avec les nouvelles cases que je vais cocher et si je la décoche il décrémente le compteur.

Merci pour votre aide