[PHP-JS] Données des cases à cocher perdues

Version imprimable

02/01/2008, 14h19
NinieAlucard

[PHP-JS] Données des cases à cocher perdues

Bonjour,

C'est mon premier post ici, désolée si je fais quelques erreurs !

Alors, je m'explique, pour l'intranet que je développe, j'ai un formulaire sous forme d'arborescence dynamique, avec des checkbox, je m'explique, j'ai 4 grandes catégories, on peut les ouvrir chacune, ça montre les sous catégories de celle ouverte, puis les sous-sous, puis enfin la liste des options à cocher ou non, avec pour chacune, un champ texte associé.

La liste est trèèèès longue, donc j'utilise pour chaque option des DIV, en invisible et réduit à l'arrivée, qui apparaissent ou non en fonction des actions de l'utilisateur. Mes items sont générés dynamiquement à partir de ma base de données MySQL.

Aucun soucis au niveau de l'arborescence dynamique, tout se génère bien, le soucis, c'est au niveau du script PHP qui récupère les données, par un POST. Apparemment, il ne récupère aucun CHECKBOX faisant partie des DIV, si je fait un CHECKBOX en dehors d'un des DIV, il est bien transférer. Mais chose étrange, les champs texte, qui sont juste après chaque CHECKBOX sont bien transférés.

J'ai essayé par un GET ou un POST, j'ai essayé de jouer sur les noms des CHECKBOX, avec un premier temps, tous le même nom suivi de [], puis avec un nom unique pour chacun. Rien n'y fait, je ne récupère aucune données de mes CHECKBOX qui se trouvent dans mes DIV.

Autre chose aussi, j'avais eut un soucis pour mon bouton SUBMIT, quand il se trouvait dans un de mes DIV, il ne "submitait" pas. (Oui, car en plus de la liste dynamique, j'ai deux sortes d'onglets pour switcher entre la liste, et le récapitulatif, dans lequel je voulais mettre mon bouton valider.

Une chose que je ne comprends pas, j'ai un autre formulaire, plus long, avec beaucoup plus de champs, des RADIO, TEXT, SELECT, TEXTAREA, qui fonctionne sur le même fonctionnement d'onglets, avec les mêmes fonctions Javascript pour switcher, et il fonctionne sans soucis, avec le bouton SUBMIT dans un des DIV invisible.

Quelqu'un a une petite idée de ce qui peut provoquer ce genre de choses, où alors je dois repenser mon formulaire car les CHECKBOX n'aiment pas être invisibles ? (Et encore, j'ai essayé en validant le formulaire avec les CHECKBOX cochées en visible ou invisible, mais rien n'y fait !).

Merci d'avance.

Virginie.
02/01/2008, 14h41
uado

Bonjour,

Comment "caches-tu" tes DIV ? CSS, JavaScript, rechargement de page ?

Si tu fais un vardump($_POST) ? Est-ce que les variables sont retournées ?

Mets un petit bout de code pour nous aiguiller.

Autre chose, si ton appli est compliquée au développement, elle le sera peut-être également à l'utilisation. Pense aux utilisateurs finaux ;)

Bonne journée,

uado

Ma page n'est jamais rechargée en fait, mes DIV sont tous sur la page, avec comme class CSS :

Code:

1
2
3
4
5
6
7
 
#div1, #div2, #div3, #div4, #div5, #div6, #div7, #div8{
visibility: hidden;
height: 0px;
width: 0px;
display: none;
}

Ensuite, j'ai des "liens" pour les afficher du genre :

Code:

1
2
3
4
5
6
7
8
<table align="center">
    <tr>
      <td>
      <label class="onglet" onClick="chg_div('div1');">Rapport&nbsp;|&nbsp;</label> 
      <label class="onglet" onClick="chg_div('div2');">R&eacute;capitulatif</label> 
      </td>
    </tr>
    </table>

Et la fonction chg_div() est :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function chg_div(id)
{
	var main = document.getElementById("main");
	if (main.currentid)
	{
		var save = document.getElementById(main.currentid);
		save.innerHTML = main.innerHTML;
	}	
	var div = document.getElementById(id);
	main.innerHTML = div.innerHTML;
	main.currentid = id;
}

J'ai une petite fonction en début qui affiche le "div1".

Ca, ce sont pour mes deux grands onglets.

Ensuite, dans mon arborescence, en simplifier, c'est plutôt :

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
<form name="insert_rapport_com" action="insert_rapport_com_sql.php" method="POST">
 
<fieldset>
   <legend>
      <table>
         <tr>
            <td>
               <img alt="" src="images/flecheg.jpg" id="img_H" onClick="aff('H',5)">
            </td>
            <td>
               Hôtellerie
               <input type="hidden" id="inp_H" value="0">
            </td>
         </tr>
      </table>
   </legend>
 
<div id="H1" class="rapportcom">
   <input type="hidden" id="inp_H1" value="0">
      <table style="border-collapse:collapse;">
         <tr>
            <td>
               <img src="images/flecheg.jpg" alt="" id="img_H1" onClick="aff('H1',5)">
            </td>
            <td>
               <strong>H 1 : Chargement...</strong>
            </td>
         </tr>
      </table>
 
   <div id="H11" class="rapportcom">
      <table style="border-collapse:collapse;">
         <tr>
            <td>
               <input type="hidden" id="inp_H11" value="0">
               &nbsp;&nbsp;&nbsp;
               <img src="images/flecheg.jpg" alt="" id="img_H11" onClick="aff('H11',2)">
            </td>
            <td>
               H 1.1 : Retard de mise à bord
            </td>
         </tr>
      </table>
 
   <div id="H111" class="rapportcom">
      <table style="border-collapse:collapse;">
         <tr>
            <td width="300">
               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
               <input type="checkbox" name="chk_1" value="1" id="chk_1" onClick="recap(1);">
               H 1.1.1 : Arrivée tardive catreur
            </td>
            <td>
               &nbsp;&nbsp;&nbsp;
               <input type="text" name="txt_1" id="txt_1" size="15" maxlength="25" onChange="maj_txt(1);">
            </td>
         </tr>
      </table>
   </div>
   </div>
   </div>
</fieldset>
<input type="submit" value="Valider">
</form>

Je vous ai copié la source et seulement un item, car le soucis ne semble pas au niveau de la génération de la liste (compte en tout plus de 100 items).

Et pour afficher les différent divs, la fonction :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function aff(id,nbr){
 
var img = document.getElementById('img_'+id);
var etat = document.getElementById('inp_'+id).value;
 
if(etat==0){
 
	for(i=1; i<=nbr ;i++){
		var td = document.getElementById(id+i);		
		td.style.visibility="visible";
		td.style.display="inline";
	}
	document.getElementById('inp_'+id).value = 1;
}
 else{
	for(i=1; i<=nbr ;i++){
		var td = document.getElementById(id+i);
		td.style.visibility="hidden";
		td.style.display="none";
	}
	document.getElementById('inp_'+id).value = 0;
 }
}

Pour moi, tout ceci ne m'a pas semblé compliqué à faire, et au final, ça rend la chose assez simple à utiliser (je fais valider tous mes formulaires par des utilisateurs futurs de l'application avant de m'attaquer à l'enregistrement des données).

J'espère que ça reste clair tout de même, j'avoue que quand je suis dans ma tête, tout me semble si facile à comprendre, mais pas forcément pour les autres.