Discussion :

[L'AMI Yves]

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.

[danielhagnoul]

Voir : Utilisation des objets FormData

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

[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"

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

[bm]

Ok , d'autres feront mieux
Je ne sais pas aider quand il n'y a aucune ligne de code

[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 ?

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

[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 :

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 ?

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

[psychadelic]

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

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

[NoSmoking]

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

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

[psychadelic]

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

[NoSmoking]

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

il n'y a rien de plus trivial

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

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

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
"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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[psychadelic]

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

Sélectionner tout - Visualiser dans une fenêtre à part

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é ?

[bm]

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

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

Sélectionner tout - Visualiser dans une fenêtre à part

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/>";
?>

[Watilin]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[psychadelic]

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[NoSmoking]

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.

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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 !?!

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

[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 !