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);andrequest->send(200, "text/plain", "message received");together insideserver.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)
/, 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.