IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

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


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Homme Profil pro
    Inscrit en
    Février 2007
    Messages
    46
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 46
    Points : 21
    Points
    21
    Par défaut [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é , 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 ).

    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 ^^

  2. #2
    Expert confirmé
    Avatar de emmanuel.remy
    Inscrit en
    Novembre 2005
    Messages
    2 855
    Détails du profil
    Informations personnelles :
    Âge : 55

    Informations forums :
    Inscription : Novembre 2005
    Messages : 2 855
    Points : 4 045
    Points
    4 045
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    Quand une tête pense seule, elle devient folle.

  3. #3
    jnore
    Invité(e)
    Par défaut
    Citation Envoyé par chicna Voir le message
    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é , 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 ).

    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 ?

  4. #4
    Membre averti
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    319
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2006
    Messages : 319
    Points : 351
    Points
    351
    Par défaut
    Citation Envoyé par jnore Voir le message
    [...]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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : 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
     
    /*
        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...

  5. #5
    jnore
    Invité(e)
    Par défaut
    Citation Envoyé par Oscar Hiboux Voir le message
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

  6. #6
    Membre averti
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    319
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2006
    Messages : 319
    Points : 351
    Points
    351
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    pouet.request("http://pouet/handleForm.php");
    On peut même y ajouter des propriétés additionnelles :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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...

  7. #7
    jnore
    Invité(e)
    Par défaut
    Citation Envoyé par Oscar Hiboux Voir le message
    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 Voir le message
    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....

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

  8. #8
    Membre averti
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    319
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2006
    Messages : 319
    Points : 351
    Points
    351
    Par défaut
    Citation Envoyé par jnore Voir le message
    Coté serveur on est d'accord, par contre coté client, pas vraiment.
    Citation Envoyé par jnore Voir le message
    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 Voir le message
    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 Voir le message
    Qui plus est je ne suis pas sûr que chicna soit une équipe de développement à lui tout seul....
    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 Voir le message
    Autre chose, si vraiment chicna avait voulu utiliser Prototype, il aurrait posté dans "Bibliothèques & Frameworks " et non dans "Javascript"....
    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 ?

  9. #9
    Expert confirmé
    Avatar de emmanuel.remy
    Inscrit en
    Novembre 2005
    Messages
    2 855
    Détails du profil
    Informations personnelles :
    Âge : 55

    Informations forums :
    Inscription : Novembre 2005
    Messages : 2 855
    Points : 4 045
    Points
    4 045
    Par défaut
    Citation Envoyé par Oscar Hiboux Voir le message
    É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
    Quand une tête pense seule, elle devient folle.

  10. #10
    Membre à l'essai
    Homme Profil pro
    Inscrit en
    Février 2007
    Messages
    46
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 46
    Points : 21
    Points
    21
    Par défaut
    Rebonjour !

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

    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 ).

    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.

    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 , 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')))).

    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.

    Tu peux te faire une petite fonction comme ceci pour camouffler ça un peu :
    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
     
    /*
        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

    En ajax, il faut organiser les variables et leurs valeurs de la façon suivante:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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 très pratique cette librairie) pour plus de précisions mais cette instruction retourne une chaine semblable.

    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 , 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

    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 , et oui, c'est exactement cela mon problème .

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

  11. #11
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 637
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 637
    Points : 66 662
    Points
    66 662
    Billets dans le blog
    1
    Par défaut
    un petit match sur un regExp suivi d'une boucle sur la longueur de l'array reultant
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

Discussions similaires

  1. transformer une chaine de caracteres en image
    Par jsunnyduckk dans le forum 2D
    Réponses: 7
    Dernier message: 16/02/2007, 14h51
  2. transformer une chaine de caracteres en du code
    Par giova_fr dans le forum C++
    Réponses: 6
    Dernier message: 15/01/2006, 16h37
  3. Réponses: 2
    Dernier message: 03/10/2005, 16h23
  4. [JDBC]comment transformer une inpustream en un BLOB
    Par lalakers dans le forum JDBC
    Réponses: 8
    Dernier message: 18/08/2005, 19h56
  5. Réponses: 2
    Dernier message: 14/01/2005, 15h40

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo