Tableaux dans un formulaire : serialize en JavaScript

Version imprimable

18/06/2019, 20h00
L'AMI Yves

Tableaux dans un formulaire : serialize en JavaScript

Bonjour à tous.

Comme la plupart d'entre vous, je suppose, j'avance dans mes projets par vagues d'extensions successives. C'est cela qui m'amène ce soir : j'ai créé un site (utilisation sur mon réseau local exclusivement) servant d'interface avec une base MySQL : il y a donc plein de html/css/javascript, et plain de php/mysql.

Pour représenter un enregistrement de la base, j'ai un formulaire avec des 'input' ou des 'select', et des boutons variés pour faire tout ce qu'on peut imaginer dans la base.

Voici la nouvelle complication : certains enregistrement d'une certaine table sont liés à plusieurs enregistrements d'une autre table.
La page HTML qui représente ce cas contient un certain nombre de champs de la première table, et des listes pour les champs des enregistrements liés dans l'autre table (j'espère être assez clair !).

Le dialogue entre le navigateur et le serveur se fait par formulaires, method='post'. J'ai vu dans la doc PHP que pour passer un tableau par $_POST, il fallait utiliser la fonction serialize au départ, et unserialize à l'arrivée. OK, je me suis dit, on va faire ça.

Mais au moment de mettre les mains dans le cambouis, je m'aperçois que la fonction "serialize", elle s'exécute côté client, donc c'est pas du PHP ! J'ai déjà des paquets de javascript dans mon projet, mais existe-t-il un moyen de faire l'équivalent de "serialize" en javascript ?

A vrai dire, j'ai demandé à Google, et j'ai bien vu qu'il existe des choses, mais je préfère m'adresser à des spécialistes français, à qui je pourrai demander de préciser ce que j'ai du mal à comprendre.

Voici donc ma question : quelle est la méthode la plus simple en javascript pour mettre un tableau de mots dans une variable de formulaire "post".

Merci d'avance.

AMIcalement.
18/06/2019, 20h45
danielhagnoul

:salut:

Voir : Utilisation des objets FormData
19/06/2019, 15h09
L'AMI Yves

Merci Daniel.

Mais quand-même, je trouve que c'est un peu... concis ! Peux-tu donner quelques exemples ? C'est le format que j'utilise pour télécharger des fichiers, mais là, c'est quand même pas tout à fait pareil...

Je m'attendais à une fonction javascript qui ferait le même boulot que le "serialize" de PHP. Il me semble en avoir vu (superficiellement) chez Google, mais ça m'a paru très compliqué, et c'était pareil : il n'y avait pas d'exemple.

Mais au moins, on dirait qu'il y a des solutions...

Encore merci

AMIcalement.
20/06/2019, 12h43
bm

Faut aussi trouver un compromis avec la bdd : mettre des data sous forme de vue pour commencer un tri

Sur ma base , j'ai une vue qui reprend des data dans des tables "mensuel" pour un bilan et avec une vue "annuel"

:mrgreen:
20/06/2019, 19h51
L'AMI Yves

@bm : je ne vois pas le rapport avec mon problème : je cherche à programmer un formulaire en HTML/javascript permettant de "fabriquer" les données telles que décrites au début du fil. Il y a donc une série de "<input>" pour les données de l'enregistrement principal, et une table à deux dimensions, dans laquelle chaque ligne est constituée des "<input>" pour les données d'un enregistrement dépendant.

Dans la gestion du formulaire, s'il y a une suite de caractères par input, je sais programmer le module php qui va les recevoir en "$_POST" et créer un unique enregistrement dans la BDD, mais là, dans chaque variable "$_POST", il faut mettre un tableau. Normalement, le module php va devoir faire un "unserialize" pour recréer le tableau. La question posée était : comment fait-on en javascript la transformation qui transforme un tableau de string pour le mettre dans le "<input>" que le formulaire va transmettre par la méthode "POST".

Merci à ceux qui essaient de m'aider.

AMIcalement.
22/06/2019, 00h39
bm

Ok , d'autres feront mieux
Je ne sais pas aider quand il n'y a aucune ligne de code
22/06/2019, 23h31
Watilin

@L’AMI Yves tu veux dire que tu as des chaînes sérialisées dans les inputs ? Peux-tu nous montrer un exemple ?
24/06/2019, 19h24
L'AMI Yves

@Watilin
Eh bien non; c'est le contraire : dans mon formulaire, je vais remplir un tableau, mettons trois lignes de quatre cases, et j'aurai quatre "inputs" dans lesquels je devrai mettre la "sérialsation" de mes quatre colonnes de trois cases. Ainsi, dans le php destinataire, je ferai "unserialize" dessus, et je récupérerai mes trois lignes de quatre cases, pour créer mes trois enregistrements "dépendants" dans la base de données.

Et, pour toi et bm : je ne peux pas donner de code, puisque c'est justement l'objet de ma question.

Merci de continuer à me lire.

AMIcalement.
25/06/2019, 15h31
Watilin
Je ne suis toujours pas sûr de comprendre ton problème, aussi je vais tenter de répondre un peu au pif à tes différentes questions :

Citation:

Envoyé par L'AMI Yves

J'ai vu dans la doc PHP que pour passer un tableau par $_POST, il fallait utiliser la fonction serialize au départ, et unserialize à l'arrivée.

La doc PHP ne fait pas de supposition sur la technologie disponible côté client. Je suppose que la solution proposée repose sur l’envoi de formulaire classique. Tu as vu ça sur quelle page de doc ?

Citation:

Envoyé par L'AMI Yves

Voici donc ma question : quelle est la méthode la plus simple en javascript pour mettre un tableau de mots dans une variable de formulaire "post".

Si par « tableau de mots » tu entends un array contenant des string, tu peux simplement appeler sa méthode .toString() :
Code:

1 2 console.log([ "a", "b", "c", 1, 2, 3 ].toString()); // a,b,c,1,2,3
Mais on perd les informations de types, et ça ne marche plus dès qu’il y a des objets (on obtient des [object Object], peu utile).

Citation:

Envoyé par L'AMI Yves

existe-t-il un moyen de faire l'équivalent de "serialize" en javascript ?

La fonction serialize() de PHP utilise une représentation non documentée, bien que connue et prévisible. En fait, si on prend la définition, « sérialiser » ça veut dire quelque chose comme « mettre sous une forme qu’on peut stocker ou transmettre », et la forme en question est laissée à notre préférence.
JavaScript ne sait pas sérialiser dans le format utilisé par PHP, mais tu peux par exemple choisir JSON, que PHP connaît également : json_encode() / json_decode().

Fait étrange, j'ai récemment pondu un truc pour ça:

Code:

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>JS Serialize</title>
  <style>
    fieldset {
      border: 1px solid lightblue;
      margin: .3em;
    }
    label {
      display: block;
      float: left;
      clear: both;
      min-width: 10em;
      margin-bottom: .1em
    }
    input[type=text] {
      display: block;
      float: left;
    }
  </style>
</head>
<body>
  <form id="My-Form">
    <fieldset>
      <label> Nom : </label><input type="text" name="leNom" value="">
      <label> Prénom: </label><input type="text" name="lePrenom" value="">
    </fieldset>
    <fieldset>
      <legend>1/ Pratiquez-vous le sport VTT ?</legend>
      <label><input type="radio" name="sport" value="VTT" checked="checked"> Vrai </label>
      <label><input type="radio" name="sport" value="pas VTT"> Faux</label>
    </fieldset>
    <fieldset>
      <legend>2/ Quelle est votre préférence dans un petit déjeuner ? [1 choix]</legend>
      <label><input type="radio" name="dej" value="banane" checked="checked"> Une banane</label>
      <label><input type="radio" name="dej" value="croissant" /> Un croissant</label>
      <label><input type="radio" name="dej" value="cake" /> Un cake</label>
    </fieldset>
    <fieldset>
      <legend>3/ Quel est votre opinion éthique et sécuritaire à pied ou en deux roues : [choix multiple]</legend>
      <label> <input type="checkbox" name="secu1" value="casque"> Je porte un casque</label>
      <label> <input type="checkbox" name="secu2" value="11"> Je saute les trottoirs</label>
      <label> <input type="checkbox" name="secu3" value="22"> J'ai une béquille pour un arrêt rapide</label>
      <label> <input type="checkbox" name="secu4" value="33"> J'utilise un porte bagage</label>
      <label> <input type="checkbox" name="secu5" value="44"> Je me protège le visage les jours de pollution</label>
    </fieldset>
    <button type="submit">Envoyer</button>
    <button type="reset">Effacer</button>
  </form>
 
  <script>
    const myForm    = document.querySelector("#My-Form")
    ,     FormNames = Array.from(myForm.elements).reduce((a,n)=>{if(n.name){if(!a.includes(n.name))a.push(n.name)}return a}, [])
    ;
 
    myForm.onsubmit=e=>{
      e.preventDefault()
 
      let saisie = {}
      for (let elm of FormNames) {
 
        if (myForm[elm].type==='checkbox')
          { saisie[elm] = myForm[elm].checked ?  myForm[elm].value : null }
        else
          { saisie[elm] = myForm[elm].value }
      }
 
      myForm.reset()
    // console.clear()
      console.log('Result= ', saisie )
    }
  </script>
</body>
</html>

mais apres coup je me suis rendu compte que j'avais "presque" réinventé la roue : https://github.com/maxatwork/form2js

27/06/2019, 10h03
NoSmoking

Bonjour,
d'un autre côté il existe

Citation:

Envoyé par danielhagnoul

Voir : Utilisation des objets FormData

donc pourquoi tant de haine envers ce constructeur qui fait très bien le job, non restrictif qui plus est, et ce depuis pas mal de temps (~2013).
27/06/2019, 12h07
psychadelic

Citation:

Envoyé par NoSmoking

Bonjour,
d'un autre côté il existe FormData
donc pourquoi tant de haine envers ce constructeur qui fait très bien le job, non restrictif qui plus est, et ce depuis pas mal de temps (~2013).

parce qu'il est tout sauf simple à utiliser, que j'ai jamais réussi à lui faire prendre automatiquement tout les champs d'entrée d'un formulaire, même s'il couvre un domaine bien plus large que le sérialize de jQuery.

FormaData est à ranger dans la liste des grands génies incompris :zoubi:

Citation:

Envoyé par psychadelic

FormaData est à ranger dans la liste des grands génies incompris :zoubi:

:koi: il n'y a rien de plus trivial

Sur base de ce formulaire simple, prérempli pour l'exemple

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<form id="formulaire" action="action.php" method="POST">
  <p>
    <label>Nom :</label>
    <input type="text" name="nom" value="dubois">
  </p>
  <p>
    <label>Prénom:</label>
    <input type="text" name="prenom" value="robin">
  </p>
  <p>
    <label>Adresse :</label>
    <input type="text" name="adresse" value="au tir à l'arc">
  </p>
  <p>
    <input type="submit" name="btn-submit" value="Envoyer">
  </p>
</form>

Le code JavaScript associé pour un envoi par Ajax pourrait être le suivant

Code:

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
"use strict";
function ajaxPost( oForm, callback) {
  // récup des données formulaire
  const urlAction = oForm.action;
  const datas = new FormData(oForm);
  // objet XMLHttpRequest
  const oXhr = new XMLHttpRequest();
  oXhr.open("POST", urlAction);
  oXhr.onload = function() {
    if (this.status === 200) {
      callback(this.responseText);
    }
    else {
      console.error(this.status + " " + this.statusText + " " + urlAction);
    }
  }
  // envoi datas
  oXhr.send(datas);
}
 
const oBtn = document.querySelector("[name='btn-submit']");
oBtn.onclick = function(e) {
  e.preventDefault();
  const oForm = this.form;
  ajaxPost( oForm, function(reponse) {
    document.getElementById("result").textContent = reponse;
  });
};

On note que la fonction d'envoi n'a vraiment rien d'exceptionnelle !

Si l'on a un fichier action.php minimal comme suit

Code:

1
2
3
4
<?php
header('Content-type: text/HTML; charset=UTF-8');
var_dump( $_POST);
?>

Le retour Ajax serait, dans le cas du présent exemple

Code:

1
2
3
4
5
6
7
8
array(3) {
  ["nom"]=>
  string(6) "dubois"
  ["prenom"]=>
  string(5) "robin"
  ["adresse"]=>
  string(15) "au tir à l'arc"
}

Le retour par soumission direct, sans JavaScript activé donc, serait

Code:

1
2
3
4
5
6
7
8
9
10
array(4) {
  ["nom"]=>
  string(6) "dubois"
  ["prenom"]=>
  string(5) "robin"
  ["adresse"]=>
  string(15) "au tir à l'arc"
  ["btn-submit"]=>
  string(7) "Envoyer"
}

dans ce cas l'information sur le bouton submit apparaît en sus et permet de choisir le retour à faire côté serveur.

ben, j'ai essayé ton code en retiant la partie ajax,juste pour voir si on avait bien l'équivalent d'un sérialize jQuery:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<form id="formulaire" action="action.php" method="POST">
  <p>
    <label>Nom :</label>
    <input type="text" name="nom" value="dubois">
  </p>
  <p>
    <label>Prénom:</label>
    <input type="text" name="prenom" value="robin">
  </p>
  <p>
    <label>Adresse :</label>
    <input type="text" name="adresse" value="au tir à l'arc">
  </p>
  <p>
    <button type="submit">Envoyer</button>
  </p>
</form>

Code:

1
2
3
4
5
6
7
8
9
10
11
"use strict";
 
const Form = document.getElementById('formulaire')
 
Form.onsubmit = function(e){
  e.preventDefault()
 
  const datas = new FormData(Form)
 
  console.log(datas) //=> les saisies sont nulles part 
};

et la pour moi, c'est du Chinois...
Qu'est-ce que j'ai raté ?

C'est mieux de débuter avec ce résumé : :mrgreen:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<form id="formulaire" action="action.php" method="get">
  <p>
    <label>Nom :</label>
    <input type="text" name="nom" value="dubois">
    <br>
    <label>Prénom:</label>
    <input type="text" name="prenom" value="robin">
    <br>
    <label>Adresse :</label>
    <input type="text" name="adresse" value="smoke dans l'eau propre">
    <br><br>
    <hr>
    <input type="submit" value="Envoyer" />
    <br>
    <input type="reset" value="Effacer" />
    <br><br>
  </p>
</form>

action.php :

Code:

1
2
3
4
5
6
<?php
header('Content-type: text/HTML; charset=UTF-8');
echo "<br> Vous avez donné comme nom : ".$_GET["nom"]."<br/>";
echo "Vous avez donné comme prénom : ".$_GET["prenom"]."<br/>";
echo "Vous avez donné comme adresse : ".$_GET["adresse"]."<br/>";
?>

Même pas besoin d’ajax, FormData est itérable :

Code:

1
2
3
4
Array.from(
  new FormData(leFormulaire),
  (entry) => encodeURIComponent(entry[0]) + "=" + encodeURIComponent(entry[1])
).join("&")

Citation:

Envoyé par Watilin

Même pas besoin d’ajax, FormData est itérable 

Ah, ça, je comprends mieux ! :plusser:
donc pour obtenir l'èquivalent de la méthode jQuery .serialize() il faut coder :
Code:

1 2 3 4 5 6 7 8 9 10 const Form = document.getElementById('formulaire') Form.onsubmit = function(e){ e.preventDefault() let saisie = {} Array.from( new FormData(Form), (entry) => { saisie[ entry[0] ] = entry[1]} ) console.log(saisie) };

28/06/2019, 16h28
NoSmoking
Citation:

Même pas besoin d’ajax, ...

Que cela soit jQuery.serialize ou formData leur rôle premier est quand même de les utiliser pour du transfert de données via Ajax.

Citation:

Envoyé par psychadelic

console.log(datas) //=> les saisies sont nulles part

Comme l'a dit Watilin formData est itérable et il n'est qu'à regarder dans la console pour voir que l'on a à disposition certaines méthodes intéressantes comme forEach ou encore entries.
Code:

1 2 3 4 5 function formDataToObject(data) { data.forEach((value, key) => { console.log(key, "=", value); }); }
Code:

1 2 3 4 5 function getFormDataEntries(data) { for (const entry of data.entries()) { console.log(entry[0] + ', ' + entry[1]); } }
Citation:

Envoyé par psychadelic

donc pour obtenir l'èquivalent de la méthode jQuery .serialize() il faut coder :

non car en cas de name de « forme tableau » tu écrases les entrées existantes.

Pour en revenir au soucis de L'AMI Yves, bien que je ne suis pas sûr d'avoir vraiment compris, je dirais justement pourquoi ne pas passer par de s name sous « forme de tableau » et de faire le traitement côté serveur, mais c'est sous réserve.

PS :
@bm : Toujours pas compris où tu veux en venir !?!
29/06/2019, 19h42
L'AMI Yves

@tous Merci de vos réponses, et excusez-moi d'avoir été absent quelques jours.

Tout ce que vous m'indiquez me semble extrêmement compliqué ! A première vue, ce que je souhaite faire me semble pouvoir se faire avec toString pour mettre chaque tableau dans son '<input>' du formulaire, puis je devrais pouvoir reconstituer les différents tableaux avec 'split' côté 'dest'... J'étais plutôt parti sur l'idée de faire ça en php, mais s'il faut le faire en javascript, je devrais pouvoir y arriver... Par contre, je ne suis pas très chaud pour ajouter de l'Ajax dans mes programmes.

Il reste quand-même un point délicat : si je dois utiliser 'toString' et 'split', il ne faut pas que mes tableaux contiennent de point-virgule. Est-ce que cette difficulté est résolue en les échappant ("toto\; lulu"), ou bien faut-il aller encore plus loin ?

Encore merci.

AMIcalement.
29/06/2019, 20h06
bm

PS :
@bm : Toujours pas compris où tu veux en venir !?!
--------------------------------------------------------------------------------------

Le post initial de L'AMI Yves, ne lui permet pas d'écrire du code. Cela permet différentes options , et ma proposition
initiale a été de poster un formulaire en HTML.
Immédiatement ce post a été effacé , comme cela c'est déjà produit, et souvent le modérateur NoSmoking
fait parti de la discussion.

Je ne vais pas en rajouter sur cette méthode de censure qui va se développer autour de Ajax.
Alors que le post initial n'en fait pas la demande.
L'AMI Yves peut clôturer par RESOLU ou bien attendre 3 mois jusqu'à la prochaine version de son
site qui est créé et encore invisible !

Citation:

Envoyé par bm

Le post initial de L'AMI Yves, ne lui permet pas d'écrire du code. Cela permet différentes options , et ma proposition
initiale a été de poster un formulaire en HTML.
Immédiatement ce post a été effacé , comme cela c'est déjà produit, et souvent le modérateur NoSmoking
fait parti de la discussion.

Le code recherché par l’AMI Yves est un code JavaScript de transformation des données et non un code HTML d’affichage.
Je te propose de relire attentivement son post #8.

Tes propositions sont donc hors sujet, cela peut arriver à tous, mais je ne comprendrais jamais ton animosité !

Concernant la deuxième partie de la citation ci-dessus, je t’engage fortement à relire très attentivement : Les règles du club http://club.developpez.com/regles/

Citation:

Envoyé par bm

Je ne vais pas en rajouter sur cette méthode de censure qui va se développer autour de Ajax.
Alors que le post initial n'en fait pas la demande.

L’emploi d’Ajax ou non n’est pas la question.

Nous n’avons fait qu’échangé différentes propositions sur la récupération des données du formulaire, même si on a légèrement digressé sur ces méthodes ce qui reste enrichissant pour tous.

Il est d’autant plus surprenant que tu écrives cela à la lecture de ta signature, je te cite « Il vaut mieux proposer des solutions alternatives que de chercher le consensus général ».

Si l’on veut concevoir une page avec un formulaire, il faut pour qu’elle fonctionne correctement, que le résultat via Ajax soit le même, ou proche, de celui d’une soumission traditionnelle, et inversement, en cas de désactivation du JavaScript.

La structure et le choix des NAME de la forme name="param[]" permet de gérer le cas présent très bien côté serveur et ce depuis la nuit des temps.

Pour aller plus loin, avec une structure HTML du type
Code:

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 30 31 32 33 34 35 <form id="formulaire" action="action.php" method="POST"> <table> <thead> <th>Col #1</th> <th>Col #2</th> <th>Col #3</th> <th>Col #4</th> </thead> <tbody> <tr> <td><input name="row_1[]" value="Colonne 1 Ligne 1"></td> <td><input name="row_1[]" value="Colonne 2 Ligne 1"></td> <td><input name="row_1[]" value="Colonne 3 Ligne 1"></td> <td><input name="row_1[]" value="Colonne 4 Ligne 1"></td> </tr> <tr> <td><input name="row_2[]" value="Colonne 1 Ligne 2"></td> <td><input name="row_2[]" value="Colonne 2 Ligne 2"></td> <td><input name="row_2[]" value="Colonne 3 Ligne 2"></td> <td><input name="row_2[]" value="Colonne 4 Ligne 2"></td> </tr> <tr> <td><input name="row_3[]" value="Colonne 1 Ligne 3"></td> <td><input name="row_3[]" value="Colonne 2 Ligne 3"></td> <td><input name="row_3[]" value="Colonne 3 Ligne 3"></td> <td><input name="row_3[]" value="Colonne 4 Ligne 3"></td> </tr> </tbody> <tfoot> <tr> <td colspan="3"><input type="submit" name="btn-submit" value="Envoyer"></td> </tr> </tfoot> </table> </form>
...on obtient côté serveur avec un simple fichier, comme déjà mis
Code:

1 2 3 4 <?php header('Content-type: text/HTML; charset=UTF-8'); var_dump( $_POST); ?>
... les informations suivantes :
Code:

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 30 31 32 33 34 35 36 37 array(4) { ["row_1"]=> array(4) { [0]=> string(17) "Colonne 1 Ligne 1" [1]=> string(17) "Colonne 2 Ligne 1" [2]=> string(17) "Colonne 3 Ligne 1" [3]=> string(17) "Colonne 4 Ligne 1" } ["row_2"]=> array(4) { [0]=> string(17) "Colonne 1 Ligne 2" [1]=> string(17) "Colonne 2 Ligne 2" [2]=> string(17) "Colonne 3 Ligne 2" [3]=> string(17) "Colonne 4 Ligne 2" } ["row_3"]=> array(4) { [0]=> string(17) "Colonne 1 Ligne 3" [1]=> string(17) "Colonne 2 Ligne 3" [2]=> string(17) "Colonne 3 Ligne 3" [3]=> string(17) "Colonne 4 Ligne 3" } ["btn-submit"]=> string(7) "Envoyer" }
Le but est donc atteint, on obtient un tableau par ligne avec les contenus de chacune des cellules de la ligne.
Inutile donc de sérialiser quoique ce soit.