Formater les données d'un formulaire et les transmettre au serveur

**mormic** · 31/10/2024, 19h37

Bonjour à tous.
J'ai créé une page HTML formulaire qui après avoir été saisi doit être transmis vers le serveur.
Toutes les informations sont chargées dans des variables JS:
codeMem: 1 lettre
manipNum: 1 nombre de 0 à 99
carteNum: 1 nombre de 0 à 9
capteurNum: 1 nombre de 0 à 9
commandeM: 1 lettre
parMVal: un nombre de 0 à 999
seuilM: un nombre de 0 à 9999
la lettre P
commandeP: 1 lettre
parPVal: un nombre de 0 à 999
seuilP: un nombre de 0 à 9999
J'arrive à transmettre toutes ces données en les mettant à la queue leuleu dans un string mais j'ai beaucoup de mal à les récupérer côté serveur.
Comment les formater élégamment (en JSON par exemple) pour les décoder plus facilement sur le serveur?

**domi65** · 01/11/2024, 11h55

On suppose que tu les envoies via AJAX (fetch ?)
Connais-tu les Formdata ?

**mormic** · 01/11/2024, 12h40

oui je les envoie par Ajax.
Non je ne connais pas FormData. J'ai bien compris la méthode pour l'envoi de l'objet. Par contre je ne vois pas comment créer tous les champs de données:
par la méthode 'append'?
Merci de ton aide.

**domi65** · 01/11/2024, 18h45

Envoyé par mormic

oui je les envoie par Ajax.
je ne vois pas comment créer tous les champs de données:
par la méthode 'append'?

la seule méthode append que je connaisse ajoute des éléments dans le document. Je ne vois pas pourquoi il faudrait ajouter des éléments.
Les variables que tu veux envoyer, elles viennent d'où ?
Donne-nous ce qu'il faut de ton code (html, js) pour qu'on comprenne ce que tu veux faire.

**mormic** · 01/11/2024, 19h12

voilà mon 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
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!--******************************************************************
********* Formulaire Domotique Mormic avec asycWebServer sur ESP32 *****
********* Déclaration des évènements capteurs
******************************************Michel MORICE octobre 2024**-->
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Gestion domotique Mormic</title>
        <link rel="icon" href="data:,">
        <link href="styleEvent.css" rel="stylesheet" type="text/css">       
        <script src="codeEvent.js" async></script> 
    </head>
    <body>
        <h2>Evenements Capteurs</h2>
        <label>Validation</label>
        <button id="sRAM" class="bouton">RAM</button>
        <button id="sMEM" class="bouton">MEM</button>
        <button id="sMOD" class="bouton">MODIF</button>
        <button id="sFIN" class="bouton">FIN</button>
        <button id="sANU" class="bouton">ANNUL</button>
        <br><br>
        <fieldset id="ref_manip">
            <legend>Références</legend>
            <div  id="zone0">
                <label for="man">N° de manip</label>
                <input required  type="number" id="man" min="00" max="98" step="2"/>
                <label for="car" id="lcar">N° de Carte
                    <input required type="number" id="car" min="0" max="9" />
                    <span id="poscart">carte</span>
                </label>
            </div>
            <br><br>
            <input type="radio" id="tempe" name="capt" value="0"/>
            <label for="tempe">Température</label>
            <input type="radio" id="humide" name="capt" value="1"/>
            <label for="humide">Humidité</label>
            <input type="radio" id="presse" name="capt" value="2"/>
            <label for="presse">Pression</label>
            <input type="radio" id="lume" name="capt" value="3"/>
            <label for="lume">Luminosité</label>
        </fieldset>
        <br><br><br>
        <fieldset class="'action" id="action_moins">
            <legend>Action si inférieur au seuil</legend>
            <div id="zoneM1">            
                <input type="radio" id="ouvM" name="commandeM" value="O"/>
                <label for="ouv">Ouvre_Volet</label>
                <input type="radio" id="ferM" name="commandeM" value="F"/>
                <label for="fer">Ferme_Volet</label>
                <input type="radio" id="basM" name="commandeM" value="B"/>
                <label for="base-">Relais_Base</label>
                <input type="radio" id="disM" name="commandeM" value="D"/>
                <label for="dis">Relais_Distant</label>
                <label for="carRelM" class="carRelDis">de la carte N°
                    <input type="number" id="carRelDisM"/>
                </label>
             </div>
            <br>
            <div class="zone" id="zoneM2">
                <label for="equipM" class="labEquip">Equipement</label>
                <input type="number" id="equipM" min="0" max="9"/>
                <input type="radio" id="RonM" name="RcommandeM" value="O"/>
                <label for="RonM">On_Relais</label>
                <input type="radio" id="RofM" name="RcommandeM" value="F"/>
                <label for="RofM">Of_Relais</label>
                <span class="reldis">
                    <input type="radio" id="RdelM" name="RcommandeM" value="T"/>
                    <label for="RdelM">Relais_Tempo</label>
                </span>
                <span id="temporise">
                    <label for="tempoRel">temporisé</label>
                    <input type="checkbox" id="tempoRel"/>
                </span>    
            </div>
            <br>
            <section id="zoneM3">
                <label for="paramM" class="labParam">Paramètre
                    <input type="number" class="param" id="paramM" min="1" max="100"/>
                    <span class="parunit"></span>
                </label>
                <label for="valeM" class="position">Valeur de seuil M
                    <input type="number" class="param" id="valeM" min="1" max="1050"/>
                </label>
                    <span class="unit">unite</span>
            </section>
        </fieldset>
        <br><br><br>
        <fieldset class="'action"  id="action_plus">
            <legend>Action si supérieur au seuil</legend>
            <div id="zoneP1">
                <input type="radio" id="ouvP" name="commandeP" value="O"/>
                <label for="ouvP">Ouvre_Volet</label>
                <input type="radio" id="ferP" name="commandeP" value="F"/>
                <label for="ferP">Ferme_volet</label>
                <input type="radio" id="basP" name="commandeP" value="B"/>
                <label for="basP">Relais_Base</label>
                <input type="radio" id="disP" name="commandeP" value="D"/>
                <label for="disP">Relais_Distant</label>
                <label for="carRelP" class="carRelDis">de la carte N°
                    <input type="number" id="carRelDisP"/>
                </label>
 
            </div>
            <br>
            <div class="zone" id="zoneP2">
                <label for="equipP" class="labEquip">Equipement</label>
                <input type="number" id="equipP" min="0" max="9"/>
                <input type="radio" id="RonP" name="RcommandeP" value="O"/>
                <label for="RonP">On_Relais</label>
                <input type="radio" id="RofP" name="RcommandeP" value="F"/>
                <label for="RofP">Of_Relais</label>
                <span class="reldis">
                    <input type="radio" id="RdelP" name="RcommandeP" value="T"/>
                    <label for="RdelP">Relais_Tempo</label>
                </span>
            </div>
            <br>
            <section id="zoneP3">
                <label for="paramP" class="labParam">Paramètre
                    <input type="number" class="param" id="paramP" min="1" max="100"/>
                    <span class="parunit"></span>
                </label>    
 
                <label for="valeP" class="position">Valeur de seuil P
                    <input type="number" class="param" id="valeP" min="1" max="1050"/>
                </label>
                <span class="unit">unite</span>
            </section>
        </fieldset>

Pour déclencher la lecture de la saisie et envoyer le post:

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
let listeBouton = document.querySelectorAll(".bouton");     //tous les boutons de la page
listeBouton.forEach(function(k){
    k.addEventListener("click", function(f){
        touche = f.target.innerHTML;
        if(touche=="RAM"){
            lectureSaisie('B');
            prgServeur("/CapteurPost");
            sauvegardeOk=true;
            window.close();
        }
        else if(touche=="MEM"){
            lectureSaisie('E');
            prgServeur("/CapteurPost");
            sauvegardeOk=true;
        }
        else if(touche=="FIN"){
            if(!sauvegardeOk) alert("La sauvegarde n'est pas faite");
            else alert("retour à la domotique Mormic");
            window.close();
        }

Puis je viens d'imaginer faire un formData ainsi:

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
29
30
31
32
33
34
35
36
37
38
//**********************lecture de la saisie*********************************************
function lectureSaisie(codeMem){
   let x=document.querySelectorAll('[name=RcommandeM]').forEach(function(z){
        if(z.checked) mouveM=z.value;
    })
    let v=document.querySelectorAll('[name=RcommandeP]').forEach(function(w){
        if(w.checked) mouveP=w.value;
    })
    let formData = new FormData();
    formData.append('codeMem', codeMem);
    formData.append('manipNum',document.getElementById("man").value);
    formData.append('carteNum',carteNum);
    formData.append('capteurNum', capteurNum);
    formData.append('commandeM',commandeM);
    formData.append('carRelDisNumM',document.getElementById("carRelDisM").value);    
    formData.append('equipNumM',document.getElementById("equipM").value);
    formData.append('mouveM',mouveM);
    formData.append('parValM',document.getElementById("paramM").value);
    formData.append('seuilM',seuilM);
    formData.append('commandeP',commandeP);
    formData.append('carRelDisNumP',document.getElementById("carRelDisP").value);
    formData.append('equipNumP',document.getElementById("equipP").value);
    formData.append('mouveP',mouveP);
    formData.append('parValP',document.getElementById("paramP").value);
    formData.append('seuilP',seuilP);
}
//************************envoi de la saisie**********************************************
function prgServeur(url) {
    fetch(url, {
        method: 'POST',
        headers: {'Content-Type' : 'multipart/form-data'},
        body: formData
     })
        .then(response => response.ok ? response.text() : Promise.reject("Reponse non valide"))
        .then(data => console.log("Reponse: ", data))
        .catch(error => alert("Erreur1: " , error))
 
}

Est-ce la bonne méthode?

**domi65** · 02/11/2024, 14h49

Bonjour.
Ah oui, bien sûr, suis-je bête, les append se rapportent formData et non à document.
Ils ne sont pas nécessaires. Il suffit de placer les contrôles dans un form (façon normale de travailler, du reste)

Voici un exemple simple (le form a comme name formu)

Code html :

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

1
2
3
4
5
6
<form name=formu>
    <input name=un value="a"><br>
    <input name=deux value="b"><br>
    <input id=trois value="c"><br>
    <p><input type=submit value=Enregistrer></p>
</form>

Pour simplifier cet exemple, je demande une réponse textuelle

Code javascript :

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

1
2
3
4
5
6
7
8
formu.onsubmit = async (e) => {
    e.preventDefault();
    let response = await fetch('traitement.php', {
      method: 'POST', body: new FormData(formu)
    });
    let result = await response.text(); 	// texte renvoyé.
    alert(result);
}

Page de traitement

Code php :

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

 print_r($_POST);

texte obtenu et mis dans l'alerte JS :

Array
(
    [un] => a
    [deux] => b
)

On donne un name aux champs qui doivent être envoyés (usage standard). Le troisième champ ayant un ID et non un name peut être manipulé par JS mais n'est pas inclus dans l'envoi.

**mormic** · 02/11/2024, 19h34

Merci pour cette réponse mais j'en suis tout à fait perdu.
J'ai bien compris que lorsqu'on a un formulaire simple: nom, prénom, adresse, date de naissance, etc il est facile d'organiser cela avec <form> et un name à chaque champ. Mais avec les boutons radio qui ont tous le même name comment fait-on pour connaître celui qui est checked. Et si des radios boutons servent à montrer des options de saisie, mais ne doivent pas être transmis. Et si un élément est le résultat d'une opération, par exemple un champ à 100 doit être transmis à '00'.
De plus, je n'utilise pas php (je ne le connaîs pas encore) ni JQuery(il prend trop de place dans mon microcontroller)
Enfin j'ai plutôt peur de remettre tout à plat car j'ai 400 lignes de code JS pour la présentation de la feuille HTML qui, en fonction des options sélectionnées, affiche ou cache des éléments de saisie. Je sais que cela devrait être géré par CSS, mais pas facile non plus.
Je suis donc un peu dépité, surtout qu'il me faut encore développer côté serveur.
Ce que j'ai fait avec les formData.append() est certe plutôt lourd mais fonctionne.

Cordialement

**domi65** · 02/11/2024, 20h47

avec les boutons radio qui ont tous le même name comment fait-on pour connaître celui qui est checked.

Par sa value. Lorsque plusieurs boutons radio ont le même name, seul celui qui est checked est transmis

si des radios boutons servent à montrer des options de saisie, mais ne doivent pas être transmis. Et si un élément est le résultat d'une opération, par exemple un champ à 100 doit être transmis à '00'.

Comme dit plus haut, les contrôles qui n'ont pas de name ne sont pas transmis

Enfin j'ai plutôt peur de remettre tout à plat car j'ai 400 lignes de code JS pour la présentation de la feuille HTML qui, en fonction des options sélectionnées, affiche ou cache des éléments de saisie.

Pas besoin d'y toucher.

Je sais que cela devrait être géré par CSS

Pas forcément, le CSS ne répondant pas au clic. Et même si, ce n'est qu'une question de préférence. Si le JS est désactivé (ce qui n'arrive jamais), un AJAX est de toute façon impossible.

Ce que j'ai fait avec les formData.append() est certe plutôt lourd mais fonctionne.

Tu disais « je ne vois pas comment créer tous les champs de données » et je t'ai répondu que ce n'est pas une manip obligatoire (je ne le fais jamais). Fais comme tu l'entends, pas de problème, pourvu que tu y trouves ton compte. Et si ça fonctionne, alors tout va bien.

il me faut encore développer côté serveur.

Bon développement !

**mormic** · 03/11/2024, 12h14

Merci pour toutes ces précisions.
J'ai suivi tes conseils, j'ai vérifié que tous les éléments nécessaires portaient un name.
Dans le HTML j'ai entouré le formulaire par <form id="formulaire"> .....</form>
Je déclenche l'envoi par:

Code :

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

1
2
3
4
5
6
7
8
9
10
let listeBouton = document.querySelectorAll(".bouton");
listeBouton.forEach(function(k){
    k.addEventListener("click", function(f){
        touche = f.target.innerHTML;
        if(touche=="RAM"){
            actionServeur='B';
            prgServeur("/CapteurPost");
            sauvegardeOk=true;
            window.close();
        }

Puis j'exécute la fonction:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function prgServeur(url) {
    fetch(url, {
        method: 'POST',
        headers: {'Content-Type' : 'multipart/form-data'},
        body: new FormData(document.getElementById('formulaire'))
     })
        .then(response => response.ok ? response.text() : Promise.reject("Reponse non valide"))
        .then(data => console.log("Reponse: ", data))
        .catch(error => alert("Erreur1: " , error))
 
}

Q'en penses-tu?

Formater les données d'un formulaire et les transmettre au serveur

JavaScript

Discussions similaires

Partager

Partager