Discussion :

[flipflip]

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.

[mathieu]

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

[flipflip]

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 + " " ));
    });