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.

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager