Discussion :

[fabrice91]

Bonjour,

J'ai une page html qui est un tableau (lignes x colonnes) et je voudrais sortir sous forme excel les lignes que l'utilisateur aura coché.
J'ai donc un formulaire avec plein de checkbox.Chacune est en tête d'une ligne dans la table.
Voici le onclick de mon formulaire : "getChecked(this);this.parentNode.submit()"
Le submit() lance un script Perl défini dans le "action" du formulaire.
Lorsque l'on clique une ou plusieurs checkbox, puis que l'on clique sur "submit",cela lance un petit script javascript qui récupère les indices des lignes cochées, construis un input de type hidden que j'ajoute au formulaire puis qui lance un script Perl par la commande javascript this.parentNode.submit()
Au premier tour tout va bien.
L'utilisateur sélectionne les lignes 3 et 4 : elles sont bien retrouvées dans le document Excel généré.
L'utilisateur ajoute ensuite la ligne 8 puis refait un submit : c'est toujours les lignes 3 et 4 qui sortent dans le document Excel !
L'utilisateur décoche tout puis coche la ligne 1 : c'est encore les lignes 3 et 4 qui sortent !
Comment se fait-il que mon getChecked(this) ne prenne pas en compte les nouvelles lignes cochées ?
Je pourrais faire un script pour tout décocher mais si mon utilisateur a coché 25 éléments, sorti une première feuille Excel, puis veut ajouter 5 éléments pour sortir une deuxième feuille, je ne veux pas lui faire tout recocher ensuite !!!
Donc ma principale question est pourquoi mon script ne prend pas en compte les cases cochées/décochées après le premier submit.
Voici le code ma fonction.
Le paramètre "elt" en argument est le formulaire lui-même.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function getChecked(elt) {
    var checkboxes = document.getElementsByName('chkbx') ;
    var tab = new Array ;
    for (var i=0; i<checkboxes.length; i++) {
        if ( checkboxes[i].checked == true ) tab.push(checkboxes[i].value) ;
    }
    var ret = tab.join('|') ;
    var field = document.createElement("input");
    field.type = "hidden";
    field.name = "list" ;
    field.value = ret ; 
    elt.appendChild(field) ;
}

Merci pour vos lumières !

[SpaceFrog]

Code :

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

 field.name = "list" ;

avant IE 8 ça c'est vain ...

cf. http://www.developpez.net/forums/d53...ynamique-form/

[fabrice91]

Code :

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

 field.name = "list" ;

avant IE 8 ça c'est vain ...

cf. http://www.developpez.net/forums/d53...ynamique-form/

Merci pour ta réponse, mais je ne la comprends pas.
J'ai regardé ton lien, c'est une succession de réponses entre Rédacteur/Modérateur, trop pointu pour moi !!!
Et je n'y ai pas vu de rapport avec mon problème donc si tu peux être plus explicite, merci.
De plus nous fonctionnons en interne avec Firefox.
Crois-tu que le problème vienne de

Code :

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

field.name = "list" ;

?
Parce que dans mon script Perl derrière, je récupère bien un paramètre "list" avec mes données, mais cela ne fonctionne qu'au premier tour, le paramètre n'est pas mis à jour ensuite...

[SpaceFrog]

tu incrémentes le name coté serveur ?

[fabrice91]

tu incrémentes le name coté serveur ?

euh, non je n'incrémente pas le name, je récupère juste sa valeur.
C'est une chaine de caractères : des éléments séparés par un |
Ce sont en fait les indices de mes checkbox.

[SpaceFrog]

oui mais si tu rajoutes un element coté client , cote serveur tu auras un name de plus ..

[fabrice91]

Non, non, tout est dans le name : c'est une concaténation des indices de mes checkbox !
Si je sélectionne les checkbox 1,3 et 5, name vaudra : b1|b3|b5
Côté serveur je fais un split pour retrouver les valeurs.
Si l'utilisateur modifie ensuite les checkbox cochées en ajoutant 8 par exemple, je devrais envoyer name avec b1|b3|b5|b8
Le name précédent n'existe plus.
Et côté serveur, le script qui recois les paramètres ne se souvient pas de ce qu'il a recu au premier tour.
Le problème c'est qu'au deuxième tour c'est encore b1|b3|b5 qui est envoyé au lieu de b1|b3|b5|b8 !!!
Comme si fa fonction getChecked ne gardait en mémoire que les premières box checkées...

[RomainVALERI]

On dirait qu'à partir du deuxième passage il crée un nouveau champ hidden contenant les nouvelles valeurs cochées, mais que le précédent champ hidden existe toujours, et avec le même "name". Je pense que c'est ce que soupçonnait SF, d'où sa question. ^^

Fais un essai en supprimant un éventuel champ hidden préexistant avant de le créer.

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
function getChecked(elt) {
    var ex = document.getElementById("hiddenCheck");
    if (ex) elt.removeChild(ex);
    var checkboxes = document.getElementsByName('chkbx') ;
    var tab = new Array ;
    for (var i=0; i<checkboxes.length; i++) {
        if ( checkboxes[i].checked == true ) tab.push(checkboxes[i].value) ;
    }
    var ret = tab.join('|') ;
    var field = document.createElement("input");
    field.type = "hidden";
    field.name = "list" ;
    field.id = "hiddenCheck"
    field.value = ret ; 
    elt.appendChild(field) ;
}

[SpaceFrog]

oui desolé je me suis mal exprimé ...

tu incrémentes le name coté serveur ?

tu ajoutes un champs !!! le champs précédent demeure

pourqoui ne pas voie le champs hidden et modifier juste son value

[RomainVALERI]

oui desolé je me suis mal exprimé ...

tu ajoutes un champs !!! le champs précédent demeure

He he je suis un expert en SpaceFrogScript

pourqoui ne pas voie le champs hidden et modifier juste son value

Heu... c'est tout-à-fait juste, je n'y avais même pas pensé, mais ma modif était effectivement un peu alambiquée...
Simplifions :

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
function getChecked(elt) {
    var ex = document.getElementById("hiddenCheck");
    var checkboxes = document.getElementsByName('chkbx') ;
    var tab = new Array ;
    for (var i=0; i<checkboxes.length; i++) {
        if ( checkboxes[i].checked == true ) tab.push(checkboxes[i].value) ;
    }
    var ret = tab.join('|') ;
    if (ex) ex.value = ret;
    else {
        var field = document.createElement("INPUT");
        field.type = "hidden";
        field.name = "list" ;
        field.id = "hiddenCheck"
        field.value = ret ; 
        elt.appendChild(field) ;
    }
}

Mieux ?

[fabrice91]

tu ajoutes un champs !!! le champs précédent demeure

Ah oui c'est pas bête ça...
Mais comme le nouveau champ a le même nom que le précédent, "list" je pensais que l'ancienne valeur était écrasée...
Je vais voir si je supprime le champs d'abord ce que ça donne...

[fabrice91]

Voilà, j'ai ajouté un removeChild de l'input si celui-ci existe et du coup, hop c'est bon !!!
Merci beaucoup pour cette piste fructueuse !

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
function getChecked(elt) {
    var checkboxes = document.getElementsByName('chkbx') ;
    var tab = new Array ;
    for (var i=0; i<checkboxes.length; i++) {
        if ( checkboxes[i].checked == true ) tab.push(checkboxes[i].value) ;
    }
    var ret = tab.join('|') ;
    var toRemove = document.getElementById("list") ;
    if ( toRemove != null) {
        elt.removeChild(toRemove) ;
    }
    var field = document.createElement("input");
    field.type = "hidden";
    field.name = "list" ;
    field.id = "list" ;
    field.value = ret ; 
    elt.appendChild(field) ;
}

Merci à Romain également, c'est bizarre je n'ai pas vu tes messages tout à l'heure, l'un s'est "inséré" entre celui de Frog et le mien pendant que je déjeunais !!!
Ou alors c'est moi qui fatigue...déjà un lundi, ça promet...

[fabrice91]

Bon du coup, après avoir lu la deuxième réponse de Romain, j'ai adopté celle-ci, plus sexy et moins perturbante peut être pour le DOM !!!
A force d'ajouter et supprimer...je ne sais pas quels pourraient être les effets de bords...