ESP32 HTML Form

[tkjax]

Hi there, the image attached is what I intend to achieve. I've been trying to get my ESP32 to display a HTML form intaking 2 variables: Drill Bit Size and Hole Number. I'm intending to have my ESP32 store both input variables while constantly displaying the stored values of the variables on the HTML page through 2 functions per variable: save_1() & save_2() to store the input values, and display_1() & display_2() to display both values on the HTML page. I've set the page to refresh every 30 seconds to ensure the updated values for both variables get displayed. However, I am unable to do so with both functions as they refuse to show the updated values or even save any of the values.

Here's my code:

#include <Arduino.h>
#ifdef ESP32
#include <WiFi.h>
#include <AsyncTCP.h>
#else
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#endif
#include <ESPAsyncWebServer.h>

AsyncWebServer server(80);

// REPLACE WITH YOUR NETWORK CREDENTIALS
const char* ssid = "TYK-ZEN";//AIDriversSG - 2.4G,Galaxy Note20 Ultra 5Gbf6b//
const char* password = "7414040h";//@1Drivers75,gffq0604//

const char* DRILL_BIT_SIZE = "input1";
const char* HOLE_NUMBER = "input2";
char* DRILLBITSIZE;
char* HOLENUMBER;

String readString;

// HTML web page to handle 2 input fields (input1, input2)
const char index_html[] PROGMEM = R"rawliteral(

ESP Input Form

Drill Bit Size:

Hole Number: Submit )rawliteral";

void notFound(AsyncWebServerRequest *request) {
request->send(404, "text/plain", "Not found");
}

void setup() {
Serial.begin(115200);
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
if (WiFi.waitForConnectResult() != WL_CONNECTED) {
Serial.println("WiFi Failed!");
return;
}
Serial.println();
Serial.print("IP Address: ");
Serial.println(WiFi.localIP());

// Send web page with input fields to client
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html);
});

server.onNotFound(notFound);
server.begin();
}

void loop() {

}

ESP32_OnlineV2.ino (5.01 KB)

[PaulRB]

Can you post your code between code tags please? Can't open a .ino file on my tablet...

[Coding_Badly]

Please do not cross-post. Other thread removed.

[hendrocah]

if you deal with javascript don't use duplicat id, if more than 1 element with the same id the getElementById() will returns the first element in your html.

[Kiwi_Bloke]

Have you tried Googling ESP32 HTML Form? I have and the first result was Random Nerd Tutorials who happen to be my go to for things ESP32 They have well laid out examples for this kind of question.