-1

I am trying to figure out how to get requests (or whatever they are called) to display in the serial monitor, yet not change the HTML page bodies.

The user selects their choices in the submenu (selection). Once clicking the submit button there, they return to the original main index menu and simultaneously the query parameters are sent to the ESP32 of the user's selections.

Based off another very similar question I asked, it works so that the query parameters (in the URL) can be seen in the serial monitor. Although, then the main menu is cleared out and left with "message sent".

Alternatively, the main menu can remain the same, but the query parameters are not sent. So one works but not the other, and vise versa.

The files are below and here: https://github.com/adamelli/MinimalExamples/tree/main/22-1-25_query_parameters_submitButton

File structure

sketch (folder)

  • sketch.ino
  • data (folder)
    • index.html
    • selection.html

sketch.ino

#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <SPIFFS.h>
#include <painlessMesh.h>

const char* ssid = "Wireless Controller";
const char* password = "12345678";

// User stub
void sendMessage() ; // Prototype so PlatformIO doesn't complain

Task taskSendMessage( TASK_SECOND * 1 , TASK_FOREVER, &sendMessage );

void sendMessage() {
  taskSendMessage.setInterval( random( TASK_SECOND * 1, TASK_SECOND * 5 ));
}

AsyncWebServer server(80);

void notFound(AsyncWebServerRequest *request) {
    request->send(404, "text/plain", "Not found");
}
IPAddress IP(192, 168, 1, 1);
IPAddress gateway(192, 168, 1, 1);
IPAddress subnet(255, 255, 255, 0);

void setup()
{
  Serial.begin(115200);



  // Initialize SPIFFS
  if (!SPIFFS.begin(true))
  {
    Serial.println("An Error has occurred while mounting SPIFFS");
    return;
  }



  WiFi.softAP(ssid, password);
  delay(500);
  WiFi.softAPConfig(IP, gateway, subnet);
  IPAddress IP = WiFi.softAPIP();
  Serial.print("AP IP address: ");
  Serial.println(IP);










  server.on("/selection.html", HTTP_GET, [](AsyncWebServerRequest * request) {
    request->send(SPIFFS, "/selection.html", String(), false );
  });


    

// Main menu index page works
//  server.on("/", HTTP_GET, [](AsyncWebServerRequest * request) {
//    request->send(SPIFFS, "/index.html", String(), false );
//  });





// Query parameters works
  server.on("/", HTTP_GET, [](AsyncWebServerRequest * request)
  {

    int paramsNr = request->params();
    Serial.println(paramsNr);

    for (int i = 0; i < paramsNr; i++)
    {
      AsyncWebParameter* p = request->getParam(i);
      Serial.print("Param name: ");
      Serial.println(p->name());
      
      Serial.print("Param value: ");
      Serial.println(p->value());
      
      Serial.println("------");
    }

    request->send(200, "text/plain", "message received");
  });






  server.begin();
}



void loop() {}

index.html

<!DOCTYPE html>
<html>
<body>

  <h1>Main Menu</h1>
  

<p><a href="/selection.html"><button class="button">Selection</button></a></p>

<p><a href="/notMinimal.html"><button class="button">Oblivion</button></a></p>


</body>
</html>

selection.html

<!DOCTYPE html>
<html>
<body> 
<!-- -->
<form action="/" method="get"> 



    <label for="size" style="font-size: 22px">Shape Size:</label>

    <select name="size" id="size" style="font-size: 22px;">
      <option value="1"> 1   </option>
      <option value="2"> 1/2 </option> 
        </select>


    <p><label for="speed" style="font-size: 22px">Speed:</label>
    
    <select name="speed" id="speed" style="font-size: 24px">
      <option value="1">          Slowest </option>
      <option value="2" selected> Regular </option>
    </select></p>




  <p><a href="/selection"><button class="submit" name="circle" value="3">Circle</button></a></p>
  
  <p><a href="/selection"><button class="submit" name="square" value="4">Square</button></a></p>



</form>

</body>
</html>

The data files must be uploaded via "Tools" → "ESP32 Sketch Data Upload".

How can the definitions, server.on("/" be combined so the data (size/speed/shape) is viewable in the serial monitor AND where the main and submenu remain the same (with their buttons)?

I have tried...

  • putting request->send(SPIFFS, "/selection.html", String(), false); and request->send(200, "text/plain", "message received"); together inside server.on("/", HTTP_GET, [](AsyncWebServerRequest * request)

  • sending different stuff for request->send(200, "text/plain", "message received"); even though I still do not understand how to get it to submit data, and return to the main menu, without clearing it out with a new message (various trial and error combinations either did not allow it to compile or just made one of the pages "Not found")

  • messing with HTML stuff (nothing changed)

5
  • So - if I understand you correctly - you want to just normally serve your index.html, until parameters are provided with the request. Then you want to output them to serial and serve the "message received" text. Is that correct?
    – chrisl
    Commented Jan 27, 2022 at 20:06
  • Nope. The user selects their choices in the submenu (selection). Once clicking the submit button there, they return to the original main index menu and simultaneously (in the background) the query parameters are sent to the ESP32 of their selections. (When I replace "message received" with "" it just shows a blank main index menu.)
    – Adam
    Commented Jan 27, 2022 at 20:10
  • 1
    This is nothing to do with Arduino. This is all about Javascript and XMLHttpRequest calls.
    – Majenko
    Commented Jan 27, 2022 at 23:43
  • 1
    Please don't repost, does this answer your question?
    – hcheung
    Commented Jan 28, 2022 at 1:51
  • 1
    According to your original post arduino.stackexchange.com/questions/88538/…, you had a duplicate route handler for /, what you need to do is to change your param handling route to something else , say, server.on("/submit" and also change your form submission action on selection.html to <form action="/submit" method="get">. It will shows it on Serial Monitor as what you are asking.
    – hcheung
    Commented Jan 28, 2022 at 2:01

1 Answer 1

1

This is not an answer per se.

Posted as an answer because of attached images.

It is unclear what you are actually asking.

I ran a python minimal web server in the same folder as index.html.

Here is the trace from the server.

C:\Users\qwerty\Desktop2\MinimalExamples-main\22-1-25_query_parameters_submitButton\data>py3 -m http.server 80
Serving HTTP on :: port 80 (http://[::]:80/) ...
::1 - - [27/Jan/2022 15:43:23] "GET / HTTP/1.1" 200 -
::1 - - [27/Jan/2022 15:43:24] code 404, message File not found
::1 - - [27/Jan/2022 15:43:24] "GET /favicon.ico HTTP/1.1" 404 -
::1 - - [27/Jan/2022 15:43:25] "GET /selection.html HTTP/1.1" 200 -
::1 - - [27/Jan/2022 15:43:32] "GET /?size=2&speed=1&circle=3 HTTP/1.1" 200 -
::1 - - [27/Jan/2022 15:43:34] code 404, message File not found
::1 - - [27/Jan/2022 15:43:34] "GET /notMinimal.html HTTP/1.1" 404 -
::1 - - [27/Jan/2022 15:43:39] "GET /?size=1&speed=2&circle=3 HTTP/1.1" 200 -
::1 - - [27/Jan/2022 15:45:07] "GET /?size=1&speed=2&square=4 HTTP/1.1" 200 -
::1 - - [27/Jan/2022 15:52:46] code 404, message File not found
::1 - - [27/Jan/2022 15:52:46] "GET /notMinimal.html HTTP/1.1" 404 -
::1 - - [27/Jan/2022 15:53:02] "GET /?size=2&speed=1&square=4 HTTP/1.1" 200 -

This is what index.html is called with. The data is available to index.html. You only have to parse it from the URL.

enter image description here

enter image description here

Not the answer you're looking for? Browse other questions tagged or ask your own question.