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 !