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

AJAX Discussion :

Grouper les champs d'un formulaire


Sujet :

AJAX

  1. #1
    Membre régulier
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    Mai 2008
    Messages
    219
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux

    Informations forums :
    Inscription : Mai 2008
    Messages : 219
    Points : 76
    Points
    76
    Par défaut Grouper les champs d'un formulaire
    Bonjour à tous,

    J'ai un formulaire html qui me sert pour saisir des commandes et je souhaite permettre l'enregistrement de la saisie sans avoir un recharger la page. Chaque ligne de saisie est composé de plusieurs champs (référencé, quantité, prix...) avec autant de groupe de champ que de ligne ajouté par l'utilisateur.

    Mon problème est comment récupérer les données pour pouvoir les exploiter côté serveur en php.

    Le formulaire 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
    <button type="button" id="btRegisterProposition" onclick="portail.crm.registerProposition()">Enregistrer</button>
     
    !-- Groupe 1 --!
    <button id="removeRow" type="button" onclick="portail.crm.removeRow(&quot;pro-1&quot;)">Supprimer</button>
    0-10418<input type="text" id="itmref" name="itmref" value="0-10418">
    <input type="text" id="prolin" name="prolin" value="1">
    <input type="text" id="qty" name="qty">
     
    <input type="text" id="discrgval1" name="discrgval1">
    <input type="text" id="discrgval2" name="discrgval2">
    <input type="text" id="discrgval3" name="discrgval3">
    <input type="text" id="discrgval4" name="discrgval4">
     
    <textarea id="commentaire" name="commentaire"></textarea>
     
    !-- Groupe 2 --!
    BIW-HD120<input type="text" id="itmref" name="itmref" value="BIW-HD120">
    <input type="text" id="prolin" name="prolin" value="2">
    <input type="text" id="qty" name="qty">
     
    <input type="text" id="discrgval1" name="discrgval1">
    <input type="text" id="discrgval2" name="discrgval2">
    <input type="text" id="discrgval3" name="discrgval3">
    <input type="text" id="discrgval4" name="discrgval4">
     
    <textarea id="commentaire" name="commentaire"></textarea>
     
    !-- Groupe x --!
    ....

    J'ai cherché sur le net et avec l'aide du mal (chatGPT) je suis arrivé avec ce code

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
      publics.registerProposition = function() {
        var formData = new FormData($('#formCreateProposition')[0]);
     
        var formDataObject = {};
        formData.forEach(function(value, key) {
          formDataObject[key] = value;
        });
     
        var groupes = {};
        groupes[formDataObject['prolin']] = formDataObject;
     
        console.log(groupes);
    }
    Le critère de regroupe des champs est la valeur du champ "prolin", c'est presque ça mais comme il n'y a pas de lien dans le formulaire html entre les champs d'un même groupe du coups côté javascript c'est pas top :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    {
      "itmref": "0-10418",
      "prolin": "2",
      "qty": "",
      "discrgval1": "",
      "discrgval2": "",
      "discrgval3": "",
      "discrgval4": "",
      "commentaire": "",
      "itmref-2": "BIW-HD120"
    }
    Pas vraiment exploitable, j'aimerais un tableau sous cette forme (la représentation n'est pas forcément juste en terme de syntaxe, mais c'est pour imager ce que j'aimerais) :

    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
    {
      [1] { <---- correspond à la valeur du champ prolin
        "itmref":"0-1418",
        "qty": "",
        "discrgval1": "",
        "discrgval2": "",
        "discrgval3": "",
        "discrgval4": "",
        "commentaire": ""
      },
      [2] { <---- correspond à la valeur du champ prolin
        "itmref":"BIW-HD120",
        "qty": "",
        "discrgval1": "",
        "discrgval2": "",
        "discrgval3": "",
        "discrgval4": "",
        "commentaire": ""
      }
    }
    Je débute en jquery/ajax, du coups un peu d'indulgence

    Est-ce que vous avez une idée ?
    Merci d'avance.

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 190
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 190
    Points : 15 462
    Points
    15 462
    Par défaut
    vous pouvez nommer les champs comme indiqué sur la page suivante et vous récupèrerez les données rangées dans un tableau dans $_POST :
    https://www.php.net/manual/fr/faq.ht...elect-multiple

  3. #3
    Membre régulier
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    Mai 2008
    Messages
    219
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux

    Informations forums :
    Inscription : Mai 2008
    Messages : 219
    Points : 76
    Points
    76
    Par défaut
    Nickel cela marche avec votre proposition.

    En plus, par le passé, j'ai déjà utilisé cette méthode mais ma mémoire de poisson rouge est passé par là

    Le code final si une personne a le même problème :

    Formulaire
    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
    <form method="#" name="formCreateProposition" id="formCreateProposition">
    	<input type="text" id="itmref" name="sproposition["1"][itmref]" value="">
    	<input type="text" id="prolin" name="sproposition["1"][prolin]" value="">
    	<input type="text" id="qty" name="sproposition["1"][qty]">
    	<input type="text" id="discrgval1" name="sproposition["1"][discrgval1]">
    	<input type="text" id="discrgval2" name="sproposition["1"][discrgval2]">
    	<input type="text" id="discrgval3" name="sproposition["1"][discrgval3]">
    	<input type="text" id="discrgval4" name="sproposition["1"][discrgval4]">
     
    	<input type="text" id="itmref" name="sproposition["2"][itmref]" value="">
    	<input type="text" id="prolin" name="sproposition["2"][prolin]" value="">
    	<input type="text" id="qty" name="sproposition["2"][qty]">
    	<input type="text" id="discrgval1" name="sproposition["2"][discrgval1]">
    	<input type="text" id="discrgval2" name="sproposition["2"][discrgval2]">
    	<input type="text" id="discrgval3" name="sproposition["2"][discrgval3]">
    	<input type="text" id="discrgval4" name="sproposition["2"][discrgval4]">
     
    	[...]
     
    	<button type="button" id="btRegisterProposition" onClick="portail.crm.registerProposition()">Enregistrer</button>
    </form>

    Côté javascript
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
        var data = $('#formCreateProposition').serializeArray();
        console.log(data);
        $.each(data, function(i, field) {
          console.log($("#formCreateProposition").append(field.name + " : " + field.value + " " ));
        });

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Comment récuperer les champs d'un formulaire?
    Par steeves5 dans le forum Langage
    Réponses: 5
    Dernier message: 08/02/2006, 11h54
  2. [DREAMWEAVER 8] Comment tester les champs d'un formulaire
    Par steeves5 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 05/02/2006, 22h43
  3. Réponses: 4
    Dernier message: 16/09/2005, 15h27
  4. Réponses: 18
    Dernier message: 22/10/2004, 15h49

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