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

Version imprimable

31/10/2024, 19h37
mormic

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

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?
01/11/2024, 11h55
domi65

On suppose que tu les envoies via AJAX (fetch ?)
Connais-tu les Formdata ?
01/11/2024, 12h40
mormic

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.
01/11/2024, 18h45
domi65

Citation:

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.

voilà mon HTML:

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

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:

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?

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:

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:

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:

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.

02/11/2024, 19h34
mormic

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
02/11/2024, 20h47
domi65

Citation:

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

Citation:

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

Citation:

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.

Citation:

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.

Citation:

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.

Citation:

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

Bon développement !

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:

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:

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?