HTML et Javascript Exporter données formulaire par ElsaRicot - page 1

Bonjour,

Dans le cadre du boulot, je suis chargée d'automatiser un système d'éclairage via un ESP32 mais je suis pas du tout formée dans la programmation, j'ai juste quelques compétences acquises sur le tas et je suis bloquée sur une étape qui ne me semble pourtant pas particulièrement compliquée:

La lumière doit être contrôlable par une interface web, un fichier HTML qui sera stocké directement sur le contrôleur.

Le gros du code est en C++ et un fichier Javascript me sert d'interface entre les deux.

Nous avons 5 chambres de culture, composée de 12 lampes chacune, chaque lampe doit pouvoir être contrôlée individuellement donc j'ai pensé judicieux de faire un formulaire avec des boutons radios.

<!DOCTYPE html>
<html lang="fr">

    <head>
        <title>document</title>
        <meta name="viewport" content="width=device-width, initial-scale=1"charset="UTF-8" />
        <link rel="stylesheet" type="text/css" href="w3.css">
        <script type="text/javascript" src="script.js"></script>
    </head>
    
    <form class="w3-margin" method="get" action="#">
        <div class="w3-card w3-red w3-padding-small w3-center">
            <h1>Choisissez une Lampe</h1>
        </div>
        <body><div style="float:left;width:40%;"><label>
            <h2>Chambre:</h2></label> 
        <input type="radio" name="chambre" value="1" /> 1 <br />
        <input type="radio" name="chambre" value="2" /> 2 <br />
        <input type="radio" name="chambre" value="3" /> 3 <br />
        <input type="radio" name="chambre" value="4" /> 4 <br />
        <input type="radio" name="chambre" value="5" /> 5 <br />
    
        <label>
            <h2>Lampe(s):</h2>
        </label> 
        <input type="radio" name="lampe" value="0" /> Toutes <br />
        <input type="radio" name="lampe" value="1" /> 1 <br />
        <input type="radio" name="lampe" value="2" /> 2 <br />
        <input type="radio" name="lampe" value="3" /> 3 <br />
        <input type="radio" name="lampe" value="4" /> 4 <br />
        <input type="radio" name="lampe" value="5" /> 5 <br />
        <input type="radio" name="lampe" value="6" /> 6 <br />
        <input type="radio" name="lampe" value="7" /> 7 <br />
        <input type="radio" name="lampe" value="8" /> 8 <br />
        <input type="radio" name="lampe" value="9" /> 9 <br />
        <input type="radio" name="lampe" value="10" /> 10 <br />
        <input type="radio" name="lampe" value="11" /> 11 <br />
        <input type="radio" name="lampe" value="12" /> 12 <br /> <br /></div>
        
    
       <div style="float:left;width:60%;">
        <label>
            <br/><h2>Intensite:</h2>
        </label> 
        <input type="radio" name="intensite" value="102" /> Ne pas changer <br />
        <input type="radio" name="intensite" value="10" /> 10% <br />
        <input type="radio" name="intensite" value="20" /> 20% <br />
        <input type="radio" name="intensite" value="30" /> 30% <br />
        <input type="radio" name="intensite" value="40" /> 40% <br />
        <input type="radio" name="intensite" value="50" /> 50% <br />
        <input type="radio" name="intensite" value="60" /> 60% <br />
        <input type="radio" name="intensite" value="70" /> 70% <br />
        <input type="radio" name="intensite" value="80" /> 80% <br />
        <input type="radio" name="intensite" value="90" /> 90% <br />
        <input type="radio" name="intensite" value="100" /> 100% <br /> <br />

        <h2>Consigne:</h2>
        <input type="radio" name="consigne" value="1" /> Allumer <br />
        <input type="radio" name="consigne" value="2" /> Eteindre <br />
        <input type="radio" name="consigne" value="3" /> Lumiere <br />
        <input type="radio" name="consigne" value="4" /> Etat <br />

        <input type="submit" value="Valider" onclick="Formulaire()"/>

    
    </form>
    
</body>
</html>

function Formulaire()
{
    fetch("index.html");
    var consigne = document.getElementsByName("consigne").value;
    var chambre = document.getElementsByName("chambre").value;
    var lampe = document.getElementsByName("lampe").value;
    var intensite = document.getElementsByName("intensite").value;
    console.log(consigne, chambre, lampe, intensite);
    
}

La console du site web me renvoie "undefined" pour les quatres variables donc il manque visiblement quelquechose pour que le transfert de données fonctionne mais je n'arrive pas à comprendre quoi.

Est-ce que le fonctionnement que j'essaie de mettre en place (Javascript pour transmettre les données) vous parait pertinent ou est-ce que je devrais m'intéresser à une autre méthode?
Qu'est-ce que je devrais rajouter pour que ça fonctionne?

Merci beaucoup et bonne journée à vous!

Bonjour,

Pour commencer je pense que ton sujet serait plus à sa lace dans le forum JS mais on va laisser aux modérateurs le choix de le déplacer ou non.

Certaines choses me gênent dans ton code.

Premièrement, l'appel à ton script est dans le head de ton HTML. Le navigateur lit ton fichier de haut en bas donc il essaye de chercher les éléments avec les noms "consigne", "chambre", "lampe, etc avant que ces derniers ne soient créés dans la page.

En procédant ainsi tu essayes d'appliquer ton script à des éléments qui n'existent pas encore dans ta page. Je te conseille donc de respecter la bonne pratique consistant à placer l'appel à ton script en bas de page, juste avant la fermeture du body.

Ensuite, "document.getElementsByName()" ne renvoie pas un élément mais une liste d'éléments (voir documentation : https://developer.mozilla.org/fr/docs/Web/API/Document/getElementsByName). Tu vas donc devoir utiliser des boucles pour récupérer chaque élément de ces listes.

-
Edité par Mewen_bzh 12 septembre 2022 à 17:07:02

HTML et Javascript Exporter données formulaire

HTML et Javascript Exporter données formulaire

Supprimer

Modérer

Signaler le message aux modérateurs