1

I am a newbie to programming. I have made an HTML code and prepared a JavaScript code to write a JSON string. this is my page code:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
  </head>

  <script>
    var button_1_status = 0;
    var button_2_status = 0;
    var button_3_status = 0;
    var button_4_status = 0;
    var button_5_status = 0;
    function erase()
    {
      button_1_status = 0;
      button_2_status = 0;
      button_3_status = 0;
      button_4_status = 0;
      button_5_status = 0;
    }
    function button_1_on()
    {
      erase();
      button_1_status = 1; 
      console.log("Button 1 is ON");
      send_data();
    }
    function button_2_on()
    {
      erase();
      button_2_status = 1;
      console.log("Button 2 is ON");
      send_data();
    }
    function button_3_on()
    {
      erase();
      button_3_status = 1;
      console.log("Button 3 is ON");
      send_data();
    }
    function button_4_on()
    {
      erase();
      button_4_status = 1;
      console.log("Button 4 is ON");
      send_data();
    }
    function button_5_on()
    {
      erase();
      button_5_status = 1; 
      console.log("Button 5 is ON");
      send_data();
    }
    function send_data()
    {
      var full_data = '{"Forward" :'+button_1_status+',"Right":'+button_2_status+',"Stop" :'+button_3_status+',"Left" :'+button_4_status+',"Backward" :'+button_5_status+'}';
    }
    </script>


  <body>
  <form action="connect.php" method="POST">
  <div class="container">
  <button class="btn" id="Forward" value="1" name="Forward" onclick="button_1_on()">FORWARD</button><br />
  <button class="btn" id="Left" value="1" name="Left" onclick="button_2_on()">LEFT</button>
  <button class="btn" id="Stop" value="1" name="Stop" onclick="button_3_on()">STOP</button>
  <button class="btn" id="Right" value="1" name="Right" onclick="button_4_on()">RIGHT</button><br />
  <button class="btn" id="Backward" value="1" name="Backward" onclick="button_5_on()">BACKWARD </button>
</div>
  </body>
</html>

I am using a local host at the moment, how I can send this JSON file to ESP? I saw some videos uses

xhr.open and .setRequestHeader and .send

but I didn't know what parameters to insert they sent it to php file while I want to send it to ESP maybe by POST so I can use GET method to receive the JSON file. I have been lost for a while, I will be thankful for your help. I am using Arduino IDE and C++

Jonas
  • 121,568
  • 97
  • 310
  • 388
Yaser
  • 21
  • 6
  • I'm not too sure about the broader path, of how you want to recieve the HTTP POST and send it to the Arduino/ESP. But I think something like https://stackoverflow.com/a/39519299/1275942 is probably what you want. https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest is an overview that probably goes into more depth than you need. – Kaia Aug 11 '21 at 06:29

1 Answers1

0

maybe try: https://randomnerdtutorials.com/esp32-web-server-websocket-sliders/ i think it will work but for me is more simple to add code to ide like: https://randomnerdtutorials.com/esp32-websocket-server-arduino/

saso6
  • 1
  • 1