[DOM] Transformer une chaine "form[blob][truc][pwal]" en un tableau javascript

Version imprimable

07/05/2009, 17h35
Chicna

[DOM] Transformer une chaine "form[blob][truc][pwal]" en un tableau javascript

Bonjour bonjour !

Je travaille en ce moment sur de gros formulaires et afin de bien structurer les données validées dès la réception, j'ai nommé mes champs de la manière suivante :

name="form1[client][nom]"
name="form1[client][prenom]"

name="form1[bidules][0][numero]"
name="form1[bidules][0][nom]"

name="form1[bidules][1][numero]"
name="form1[bidules][1][nom]"

...et ainsi de suite. Petit problème : php transforme très bien tout ça en un tableau a multidimension et balance tout ça dans $_POST, mais avec javascript c'est une autre histoire.

Or, j'effectue pour chaque champ avec l'attribut "onblur" une vérification a la volée.
Il est possible de tout recupérer, mais cela donne toujours un tableau simple, avec pour clé "form1[bidules][0][numero]" et valeur "truc1454" par exemple.

Bon évidemment c pas un problème majeur, c plus par curiosité :P, j'essaye de travailler dessus mais avant ça j'aimerais savoir si vous avez deja eu affaire à ce genre de souci ou si vous avez deja une solution simple et pas trop lourde (si possible bien sur :lol:).

Pour l'instant j'ai essayer plein de trucs, du genre faire un split sur chaque name, parcourir leur résultat, et essayer de former un nouveau tableau, mais j'y arrive pas, l'objet javascript Array est un peu chiant a gérer a mon gout, c'est assez byzarre.

Voila voila merci d'avance pour vos réponses ^^

Salut,

Marrant comme problème. Une première approche (simple, il sera toujours temps de faire compliquer ;) ) pourrait être celle-ci par des eval:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 var form1= new Array(); //faudra bien le créer quelque part ... name="form1['client']= [];" name2="form1['client']['nom']='olivier';"; name3="form1['client']['prenom']='Fafa';" eval(name); eval(name2); eval(name3); alert(form1['client']['nom']); alert(form1['client']['prenom']);
Je sais que ce la ne correspond pas exactement à ce que tu recherches mais c'est une piste ! (on doit pouvoir passer par des objets pour supprimer les quotes).

ERE

07/05/2009, 21h07
jnore

Citation:

Envoyé par chicna

Bonjour bonjour !

Je travaille en ce moment sur de gros formulaires et afin de bien structurer les données validées dès la réception, j'ai nommé mes champs de la manière suivante :

name="form1[client][nom]"
name="form1[client][prenom]"

name="form1[bidules][0][numero]"
name="form1[bidules][0][nom]"

name="form1[bidules][1][numero]"
name="form1[bidules][1][nom]"

...et ainsi de suite. Petit problème : php transforme très bien tout ça en un tableau a multidimension et balance tout ça dans $_POST, mais avec javascript c'est une autre histoire.

Or, j'effectue pour chaque champ avec l'attribut "onblur" une vérification a la volée.
Il est possible de tout recupérer, mais cela donne toujours un tableau simple, avec pour clé "form1[bidules][0][numero]" et valeur "truc1454" par exemple.

Bon évidemment c pas un problème majeur, c plus par curiosité :P, j'essaye de travailler dessus mais avant ça j'aimerais savoir si vous avez deja eu affaire à ce genre de souci ou si vous avez deja une solution simple et pas trop lourde (si possible bien sur :lol:).

Pour l'instant j'ai essayer plein de trucs, du genre faire un split sur chaque name, parcourir leur résultat, et essayer de former un nouveau tableau, mais j'y arrive pas, l'objet javascript Array est un peu chiant a gérer a mon gout, c'est assez byzarre.

Voila voila merci d'avance pour vos réponses ^^

Bonsoir,

ce qui serait interessant c'est de savoir comment php réceptionne les données-->Montre nous ton script.
Autre chose, ta méthode d'envoi se fait en POST, mais le fais-tu via Ajax ou de façon traditionnelle par validation de formulaire ?

Citation:

Envoyé par jnore

[...]via Ajax ou de façon traditionnelle par validation de formulaire ?

Dans l'une et l'autre j'imagine qu'il appellera le même service du côté serveur et qu'il aura la même tambouille à faire du côté client. La différence n'est qu'une question de séquences. :)

Sinon, pour ma part j'ai du mal à saisir à quoi tu veux parvenir, chicha. Si ton objectif est de pouvoir accéder à tes champs d'une manière hiérarchisée peut-être que tu peux le faire comme ça, en admettant que tu aies regroupé tes champs dans des sections de formulaires à l'aide d'éléments div avec une classe "section" et une autre pour le nom de la sectoin :
Code:

1 2 3 4 // prototype.js var form = ...; // ton formulaire (élément DOM); var field = form.down("div.section.bidules input[name='nom']");
Tu peux te faire une petite fonction comme ceci pour camouffler ça un peu :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 /* Exemples : getField("form1", "prenom", {name: "client"}); getField("form1", "numero", {name: "bidules", index: 1}); */ function getField(formName, fieldName, section) { var form = $$("form[name='" + formName + "']")[0]; // ou "document.x.y.z", au choix if(!section) { section = form; } else { section = form.down("div.section" + (section.name || ""), section.index || 0); } var field = section.down("input[name='" + fieldName + "']"); return field.value; }
Que tu te bases sur une ou des variables ou sur le DOM, qui est déjà structuré comme tu l'entends, ça revient pas mal au même. Par contre, si tu as des besoin de performances dignes du temps réel on pourrait en discuter... ;)

08/05/2009, 16h34
jnore
Citation:

Envoyé par Oscar Hiboux

Dans l'une et l'autre j'imagine qu'il appellera le même service du côté serveur et qu'il aura la même tambouille à faire du côté client. La différence n'est qu'une question de séquences. :)

Coté serveur on est d'accord, par contre coté client, pas vraiment.

En ajax, il faut organiser les variables et leurs valeurs de la façon suivante:
Code:

1 2 champ=1&champ2=valeur2&champ3=valeur4.......
Ce qui n'est pas nécessaire dans le cas d'un formulaire classique.

Si j'ai posé cette question, c'est que, pour ma part je fais tout en ajax et je me suis conçu une fonction qui récupére tous les champs et valeurs contenus dans un objet de type DIV ou autre.
La fonction en question s'adapte qu'il s'agisse d'INPUT, de SELECT, de TEXTAREA, de CHECKBOX...et construit une chaine de type nom=valeur comme cité précedemment.

La différence que tu exposes si situe dans l'usage de Form#submit ou d'une requête AJAX. Dans les deux cas c'est exactement la même chose qu'il se produit d'un point de vue communication. Du côté client, ce que tu as à faire et comment tu le fais ne regarde que l'équipe de développement. ;)

En passant, j'en profite pour présenter qq fonctionalités de prototype.js. Ceci retourne une chaîne de caractères appropriée pour passer le contenu d'un formulaire dans une URL.

Code:

Form.serializeElements(pouet.getElements()) // où %pouet% est une référence vers un formulaire

Pour pousser un peu plus loin, on peut utiliser la méthode Form#request pour soumettre simplement un formulaire via AJAX :

Code:

pouet.request("http://pouet/handleForm.php");

On peut même y ajouter des propriétés additionnelles :
Code:

1 2 3 4 5 6 7 pouet.request("http://pouet/handleForm.php", { parameters: { banana: "yellow", kiwi: "green" } });
Ainsi que mettre des fonctions à l'écoute de certains événements (callback) :
Code:

1 2 3 4 5 6 7 8 9 10 pouet.request("http://pouet/handleForm.php", { onComplete: function(response) { }, onException: function(response, exception) { throw exception; // sans plus d'inspiration c'est le minimum à faire ici ^^ }, ... });
En espérant que ça puisse intéresser / aider qqun... :D

08/05/2009, 17h29
jnore

Citation:

Envoyé par Oscar Hiboux

La différence que tu exposes si situe dans l'usage de Form#submit ou d'une requête AJAX. Dans les deux cas c'est exactement la même chose qu'il se produit d'un point de vue communication.

On est complètement d'accord, j'ai comme la vague impression que Monsieur veut me faire un cours...

Citation:

Envoyé par Oscar Hiboux

Du côté client, ce que tu as à faire et comment tu le fais ne regarde que l'équipe de développement. ;)

Ben, il me semble qu'on est sur le forum javascript...Donc on développe coté client, je me trompe ?
Qui plus est je ne suis pas sûr que chicna soit une équipe de développement à lui tout seul....:mouarf:

Autre chose, si vraiment chicna avait voulu utiliser Prototype, il aurrait posté dans "Bibliothèques & Frameworks " et non dans "Javascript"....:roll:
08/05/2009, 19h57
Oscar Hiboux

Citation:

Envoyé par jnore

Coté serveur on est d'accord, par contre coté client, pas vraiment.

Citation:

Envoyé par jnore

On est complètement d'accord, j'ai comme la vague impression que Monsieur veut me faire un cours...

Écoute, tu donnes un argument, j'ai le droit d'y répondre. C'est pas la peine de se braquer. Sinon, finalement, on est d'accord ou pas ?..

Citation:

Envoyé par jnore

Ben, il me semble qu'on est sur le forum javascript...Donc on développe coté client, je me trompe ?

Et, où veux-tu en venir ?

Citation:

Envoyé par jnore

Qui plus est je ne suis pas sûr que chicna soit une équipe de développement à lui tout seul....:mouarf:

Très bien, jouons sur les mots : une équipe de développement ça commence à une personne, n'est-ce pas ? Et le Schmilblick dans tout ça ?..

Citation:

Envoyé par jnore

Autre chose, si vraiment chicna avait voulu utiliser Prototype, il aurrait posté dans "Bibliothèques & Frameworks " et non dans "Javascript"....:roll:

Laisse donc chicna m'envoyer balader s'il juge mon intervention aussi inintéressante que tu la trouves.
On est sur un forum d'entraide et d'apprentissage. Si on ne peut plus présenter des choses aux autres, simplement par plaisir, en rebondissant sur les sujets qui y sont proposés, alors je ne dois plus y remettre les pieds ?
09/05/2009, 01h42
emmanuel.remy

Citation:

Envoyé par Oscar Hiboux

Écoute, tu donnes un argument, j'ai le droit d'y répondre. C'est pas la peine de se braquer. Sinon, finalement, on est d'accord ou pas ?..

Et, où veux-tu en venir ?

Très bien, jouons sur les mots : une équipe de développement ça commence à une personne, n'est-ce pas ? Et le Schmilblick dans tout ça ?..

Laisse donc chicha m'envoyer balader s'il juge mon intervention aussi inintéressante que tu la trouves.
On est sur un forum d'entraide et d'apprentissage. Si on ne peut plus présenter des choses aux autres, simplement par plaisir, en rebondissant sur les sujets qui y sont proposés, alors je ne dois plus y remettre les pieds ?

On se calme ;) . Etant donné les suppositions de chacun sur la finalité que chicna veut atteindre, je propose d'attendre ses précisions.
Ceci étant il me semble que chicna n'a jamais fait allusion à AJAX dans son message original. Personnellement j'ai compris qu'il faisait référence à PHP qui, suite à un post, permet de traiter un tableau de champs html (name="id[]") directement en son équivalent tableau PHP; et de là un parallèle avec Javascript qui lui ne voit pas ces variables id[] comme des tableaux... ce que chicna aimerait bien implanter.

Attendons les précisions de chicna !

ERE

Rebonjour !

Tout d'abord et avant tout, merci d'avoir répondu si vite :mrgreen:

Bon je vois que les esprits ont largement eu le temps de s'échauffer, et j'en suis le premier désolé, le weekend étant arrivé, j'ai un peu oublié mon souci de la semaine, et n'ai pas eu le temps de vérifier s'il y a eu du nouveau en réponse (D'un coté ça fait plaisir, ça intéresse du monde :P).

Citation:

var form1= new Array(); //faudra bien le créer quelque part ...

name="form1['client']= [];"
name2="form1['client']['nom']='olivier';";
name3="form1['client']['prenom']='Fafa';"

eval(name);
eval(name2);
eval(name3);

C'est exactement ce que j'ai essayé de faire emmanuel.remy, mais malheureusement l'objet Array ne permet pas une telle chose (je crois ^^) : on peut faire seulement form1['client'] = new Array(), alors que form1['client']['truc']['bidule'] = 'la_valeur_recherchée" ne marche pas.

Citation:

ce qui serait intéressant c'est de savoir comment php réceptionne les données-->Montre nous ton script.

Ben y a pas grand chose a montrer selon moi, mais voila un exemple d'un bout de mon formulaire si ça peut aider :
Code:

1 2 <input id="devis_etape1_animaux_0_nom" type="text" onblur="doRequestAndXmlResponse('url', Form.serialize(this.form)+'&numAnimal=0&fieldToCheck=nom'); return false;" value="Brutus" name="form1[animaux][0][nom]" title="Nom"/>
Voila un champ texte qui sort sur la page en html grâce a mon code PHP, ce qu'il faut voir et gérer en javascript est le nom et la valeur de cet élément et des autres.
Pour ce qui est de l'événement onblur, j'y applique une méthode de requête AJAX, avec en paramètre toutes les valeurs du formulaire, et 2 paramètres supplémentaires (numAnimal : numéro de l'animal et fieldToCheck : champ a vérifier).
Si mon problème est résolu, je pourrais éviter de balancer toutes les valeurs du formulaires, et seulement celle que je veux, en me basant sur le nom des champs.
Pour ce qui est de comment PHP réceptionne les données, j'en sais rien du tout :lol:, je sais juste qu'on peut nommer les champs de cette manière, et que la variable $_POST renvoi un tableau (mon champ html donnera ça : 'form1' => array('animaux' => array('0' => array('nom' => 'Brutus')))).

Citation:

Autre chose, ta méthode d'envoi se fait en POST, mais le fais-tu via Ajax ou de façon traditionnelle par validation de formulaire ?

Ma méthode d'envoi du formulaire se faire par validation "traditionnelle", en AJAX tout ce que je fais est une vérification d'un champ dès qu'on y perd le focus (avec affichage d'un message d'erreur si le champ est invalide ou obligatoire), d'ailleurs on peut le voir sur le petit bout de code que j'ai mis ci-dessus.
Citation:
Tu peux te faire une petite fonction comme ceci pour camouffler ça un peu :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 /* Exemples : getField("form1", "prenom", {name: "client"}); getField("form1", "numero", {name: "bidules", index: 1}); */ function getField(formName, fieldName, section) { var form = $$("form[name='" + formName + "']")[0]; // ou "document.x.y.z", au choix if(!section) { section = form; } else { section = form.down("div.section" + (section.name || ""), section.index || 0); } var field = section.down("input[name='" + fieldName + "']"); return field.value; }
Que tu te bases sur une ou des variables ou sur le DOM, qui est déjà structuré comme tu l'entends, ça revient pas mal au même. Par contre, si tu as des besoin de performances dignes du temps réel on pourrait en discuter...
Merci pour ton idée, je vais essayer de bosser dessus pour voir ce que ça donne :king:

Citation:

En ajax, il faut organiser les variables et leurs valeurs de la façon suivante:

Code:

champ=1&champ2=valeur2&champ3=valeur4.......

Je transporte aussi mes données vers mes requête AJAX de cette manière grâce à Form.serialize(this.form) en POST cependant, allez voir la librairie Prototype (que j'utilise aussi :mouarf: très pratique cette librairie) pour plus de précisions mais cette instruction retourne une chaine semblable.

Citation:

Autre chose, si vraiment chicna avait voulu utiliser Prototype, il aurrait posté dans "Bibliothèques & Frameworks " et non dans "Javascript"....

Hum...et bien en fait je l'utilise comme vous avez du le voir :lol:, mais selon moi ce n'est pas un problème lié à une libraire spécifique, si la solution est disponible de quelque manière que ce soit, je suis preneur, la seule limite, est que ce soit en javascript bien sur :mrgreen:

Citation:

On se calme . Etant donné les suppositions de chacun sur la finalité que chicna veut atteindre, je propose d'attendre ses précisions.
Ceci étant il me semble que chicna n'a jamais fait allusion à AJAX dans son message original. Personnellement j'ai compris qu'il faisait référence à PHP qui, suite à un post, permet de traiter un tableau de champs html (name="id[]") directement en son équivalent tableau PHP; et de là un parallèle avec Javascript qui lui ne voit pas ces variables id[] comme des tableaux... ce que chicna aimerait bien implanter.

Oui je suis d'accord, il n'y a aucune raison de s'énerver :lol:, et oui, c'est exactement cela mon problème ;).

Bon c'est pas tout mais faut que je dorme. Sur ce, à bientôt !

11/05/2009, 08h30
SpaceFrog

un petit match sur un regExp suivi d'une boucle sur la longueur de l'array reultant