![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/08\/ESP32-ESP8266-Input-Fields-HTML-Form-Arduino-IDE.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nProject Overview<\/h2>\n\n\n\n
In this tutorial, we’ll build an asynchronous web server using the ESPAsyncWebServer library<\/a> that displays three input fields to pass values that you can use in your code to update variables.<\/p>\n\n\n\n We’ll take a look at two similar examples. The following figure illustrates how the first example works. <\/p>\n\n\n You have a web page with three input fields that you can access with any browser in your network. When you type a new value and press the “Submit” button, your ESP will update a variable with the new value.<\/p>\n\n\n\n If you ever needed to update a variable through an ESP web server, you should follow this project. With this method, you avoid hard coding variables because you can create an input field in a web page to update any variable with a new value. This can be specially useful to set threshold values, set SSID\/password, change API Keys, etc…<\/p>\n\n\n\n Later, we’ll also show you how to save those variables permanently using LittleFS and how to access them. Here’s how this second example works.<\/p>\n\n\n This web page allows you to enter three types of variables: String, Int and Float. Then, every time you submit a new value, that value is stored in a file in the LittleFS filesystem. This web page also contains a placeholder to show the current values.<\/p>\n\n\n\n Make sure you check all the prerequisites in this section before continuing with the project in order to compile the code.<\/p>\n\n\n\n We’ll program the ESP32 and ESP8266 using Arduino IDE. So, you must have the ESP32 or ESP8266 add-on installed. Follow one of the next tutorials to install the ESP add-on:<\/p>\n\n\n\n To build the web server you need to install the following libraries:<\/p>\n\n\n\n You can install those libraries in the Arduino IDE Library Manager. Go to Sketch <\/strong>> Include Library<\/strong> > Manage Libraries<\/strong> and search for the libraries’ names.<\/p>\n\n\n\n To follow this tutorial you just need an ESP32<\/a> or ESP8266<\/a> (read ESP32 vs ESP8266<\/a>). There’s no circuit for this project.<\/p>\n\n\n\n Copy the following code to the Arduino IDE. Then, type your network credentials (SSID and password) to make it work for you.<\/p>\n\n\n View raw code<\/a><\/p>\n\n\n\n Let’s take a quick look at the code and see how it works.<\/p>\n\n\n\n First, include the necessary libraries. You include different libraries depending on the board you’re using. If you’re using an ESP32, the code loads the following libraries:<\/p>\n\n\n\n If you’re using an ESP8266, you include these libraries:<\/p>\n\n\n\n Don’t forget to insert your network credentials in the following variables, so that the ESP32 or ESP8266 can connect to your network.<\/p>\n\n\n\n First, let’s take a look at the HTML that we need to display the input fields. <\/p>\n\n\n\n In our example, we display three input fields and each field has a “Submit” button. When the user enters data and presses the “Submit” button, that value is sent to the ESP and updates the variable.<\/p>\n\n\n\n For that, create three forms:<\/p>\n\n\n\n In HTML, the <form><\/span><\/span> tag is used to create an HTML form for user input. In our case, the form should contain an input field and a submit button. <\/p>\n\n\n Let’s take a look at the first form to see how it works (the other forms work in a similar way).<\/p>\n\n\n\n The action<\/span> attribute specifies where to send the data inserted on the form after pressing submit. In this case, it makes an HTTP GET request to \/get?input1=value<\/span>. The value<\/span> refers to the text you enter in the input field.<\/p>\n\n\n\n Then, we define two input fields: one text field and one submit button.<\/p>\n\n\n\n The following line defines a one line text input field.<\/p>\n\n\n\n The type<\/span> attribute specifies we want a text input field, and the name<\/span> attribute specifies the name of the input element. <\/p>\n\n\n\n The next line defines a button for submitting the HTML form data. <\/p>\n\n\n\n In this case, the type<\/span> attribute specifies you want a submit button, and the value<\/span> specifies the text on the button. <\/p>\n\n\n\n In the setup()<\/span>, connect to your local network.<\/p>\n\n\n\n Then, you need to handle the HTTP GET requests.<\/p>\n\n\n\n When, you access the route URL, you send the HTML page to the client. In this case, the HTML text is saved on the index_html<\/span> variable.<\/p>\n\n\n\n Then, you need to handle what happens when you receive a request on the \/get<\/span> routes.<\/p>\n\n\n\n We create two variables: inputMessage<\/span> and inputParam<\/span> to save the input value and the input field.<\/p>\n\n\n\n Then, we need to check whether the HTTP GET request contains the input1<\/span>, input2<\/span>, or input3<\/span> parameters. These are saved on the PARAM_INPUT_1<\/span>, PARAM_INPUT_2<\/span> and PARAM_INPUT_3<\/span> variables.<\/p>\n\n\n\n If the request contains the PARAM_INPUT_1<\/span> (i.e. input1<\/span>), we set the inputMessage<\/span> to the value inserted in the input1 field.<\/p>\n\n\n\n Now you have the value you’ve just inserted on the first form saved on the inputMessage<\/span> variable.<\/p>\n\n\n\n Then, set the inputParam<\/span> variable to PARAM_INPUT_1<\/span> so that we know where the input value comes from.<\/p>\n\n\n\n When you submit the form, you get a message saying the value you’ve inserted and in which field. We also display a link to get back to the route URL (Home Page).<\/p>\n\n\n\n If you make a request on an invalid URL, we call the notFound()<\/span> function, defined at the beginning of the sketch.<\/p>\n\n\n\n Finally, start the server to handle clients.<\/p>\n\n\n\n After uploading code to your board, open your Arduino IDE Serial Monitor at a baud rate of 115200 to find the ESP IP address.<\/p>\n\n\n Then, open your browser and type the IP address. This web page should load:<\/p>\n\n\n For example, type 123456<\/strong> on input1<\/span> field, then press the “Submit” button. A new page should load saying that value 123456 <\/strong>was sent to your ESP:<\/p>\n\n\n Now, let’s proceed to the second example. This example saves the data inserted on the input fields permanently on LittleFS. We’ve also added placeholders on the web page to show the current values.<\/p>\n\n\n\n Copy the following sketch to Arduino IDE. Then, before uploading type your network credentials (SSID and password). <\/p>\n\n\n View raw code<\/a><\/p>\n\n\n\n This code is very similar with the previous one with a few tweaks. Let’s take a quick look at it and see how it works.<\/p>\n\n\n\n The code loads the following libraries if you’re using the ESP32. You need to load the LittleFS library to write to the LittleFS filesystem.<\/p>\n\n\n\n If you’re using an ESP8266, you need to include the following libraries instead.<\/p>\n\n\n\n In this example, when you submit the values, a window opens saying the value was saved to LittleFS, instead of being redirected to another page as in the previous example.<\/p>\n\n\n\n For that, we need to a add a JavaScript function, in this case it’s called submitMessage()<\/span> that pops an alert message saying the value was saved to LittleFS. After that pop up, it reloads the web page so that it displays the current values.<\/p>\n\n\n\n The forms are also a bit different from the previous ones. Here’s the form for the first input.<\/p>\n\n\n\n In this case, the target<\/span> attribute and an <iframe><\/span><\/span> are used so that you remain on the same page after submitting the form.<\/p>\n\n\n\n The name that shows up for the input field contains a placeholder %inputString%<\/span> that will then be replaced by the current value of the inputString<\/span> variable.<\/p>\n\n\n\n The onclick=”submitMessage()”<\/span> calls the submitMessage()<\/span> JavaScript function after clicking the “Submit” button.<\/p>\n\n\n\n Then, we have some functions to read and write from LittleFS.<\/p>\n\n\n\n The readFile()<\/span> reads the content from a file:<\/p>\n\n\n\n The writeFile()<\/span> writes content to a file:<\/p>\n\n\n\n The processor()<\/span> is responsible for searching for placeholders in the HTML text and replacing them with actual values saved on LittleFS.<\/p>\n\n\n\n Handling the HTTP GET requests works the same way as in the previous example, but this time we save the variables on LittleFS.<\/p>\n\n\n\n For example, for the inputString<\/span> field:<\/p>\n\n\n\n When the request contains inputString<\/span> (i.e. PARAM_STRING<\/span>), we set the inputMessage<\/span> variable to the value submitted on the inputString form.<\/p>\n\n\n\n Then, save that value to LittleFS.<\/p>\n\n\n\n A similar process happens for the other forms.<\/p>\n\n\n\n In the loop()<\/span>, we demonstrate how you can access the variables.<\/p>\n\n\n\n For example, create a String variable called yourInputString<\/span> that reads the content of the inputString.txt<\/span> file on LittleFS.<\/p>\n\n\n\n Then, print that variable in the Serial Monitor.<\/p>\n\n\n\n After uploading code to your board, open your Arduino IDE Serial Monitor at a baud rate of 115200 to find the ESP IP address.<\/p>\n\n\n Open your browser and type the IP address. A similar web page should load (at first your current values will be blank).<\/p>\n\n\n Type a String in the first input field and press “Submit”, repeat the same process for the Int and Float input values. Every time you press the Submit button for a field, you’ll see an alert message like this:<\/p>\n\n\n Press the “OK” button to reload the web page and see the current values updated.<\/p>\n\n\n\n If you have your Arduino IDE Serial Monitor open, you’ll see that the stored values are being printed over and over again:<\/p>\n\n\n For a final project, you can delete all those lines in your loop()<\/span> that print all stored values every 5 seconds, we just left them on purpose for debugging.<\/p>\n\n\n\n In this tutorial, you’ve learned how to handle input fields on a web page to update the ESP variable values. You can modify this project to set thresholds, change API Key values, set a PWM value, change a timer, set SSID\/password, etc.<\/p>\n\n\n\n Here are other projects that you might like:<\/p>\n\n\n\n Learn more about the ESP32 with our best-selling course:<\/p>\n\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/08\/ESP32-ESP8266-HTML-Form-Input-Data-Project-Overview.png?resize=948%2C506&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/ESP32-ESP8266-HTML-Form-Input-Data-Project-Overview-LittleFS.png?resize=1024%2C574&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nPrerequisites<\/h2>\n\n\n\n
1. Install ESP32\/ESP8266 Board in Arduino IDE<\/h3>\n\n\n\n
\n
2. Installing Libraries<\/h3>\n\n\n\n
\n
3. Parts Required<\/h3>\n\n\n\n
\n\n\n\n1. ESP32\/ESP8266 Handle Input Fields on Web Page with HTML Form<\/h2>\n\n\n\n
\/*********\n Rui Santos & Sara Santos - Random Nerd Tutorials\n Complete project details at https:\/\/RandomNerdTutorials.com\/esp32-esp8266-input-data-html-form\/\n Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.\n The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n*********\/\n\n#include <Arduino.h>\n#ifdef ESP32\n #include <WiFi.h>\n #include <AsyncTCP.h>\n#else\n #include <ESP8266WiFi.h>\n #include <ESPAsyncTCP.h>\n#endif\n#include <ESPAsyncWebServer.h>\n\nAsyncWebServer server(80);\n\n\/\/ REPLACE WITH YOUR NETWORK CREDENTIALS\nconst char* ssid = "REPLACE_WITH_YOUR_SSID";\nconst char* password = "REPLACE_WITH_YOUR_PASSWORD";\n\nconst char* PARAM_INPUT_1 = "input1";\nconst char* PARAM_INPUT_2 = "input2";\nconst char* PARAM_INPUT_3 = "input3";\n\n\/\/ HTML web page to handle 3 input fields (input1, input2, input3)\nconst char index_html[] PROGMEM = R"rawliteral(\n<!DOCTYPE HTML><html><head>\n <title>ESP Input Form<\/title>\n <meta name="viewport" content="width=device-width, initial-scale=1">\n <\/head><body>\n <form action="\/get">\n input1: <input type="text" name="input1">\n <input type="submit" value="Submit">\n <\/form><br>\n <form action="\/get">\n input2: <input type="text" name="input2">\n <input type="submit" value="Submit">\n <\/form><br>\n <form action="\/get">\n input3: <input type="text" name="input3">\n <input type="submit" value="Submit">\n <\/form>\n<\/body><\/html>)rawliteral";\n\nvoid notFound(AsyncWebServerRequest *request) {\n request->send(404, "text\/plain", "Not found");\n}\n\nvoid setup() {\n Serial.begin(115200);\n WiFi.mode(WIFI_STA);\n WiFi.begin(ssid, password);\n if (WiFi.waitForConnectResult() != WL_CONNECTED) {\n Serial.println("WiFi Failed!");\n return;\n }\n Serial.println();\n Serial.print("IP Address: ");\n Serial.println(WiFi.localIP());\n\n \/\/ Send web page with input fields to client\n server.on("\/", HTTP_GET, [](AsyncWebServerRequest *request){\n request->send(200, "text\/html", index_html);\n });\n\n \/\/ Send a GET request to <ESP_IP>\/get?input1=<inputMessage>\n server.on("\/get", HTTP_GET, [] (AsyncWebServerRequest *request) {\n String inputMessage;\n String inputParam;\n \/\/ GET input1 value on <ESP_IP>\/get?input1=<inputMessage>\n if (request->hasParam(PARAM_INPUT_1)) {\n inputMessage = request->getParam(PARAM_INPUT_1)->value();\n inputParam = PARAM_INPUT_1;\n }\n \/\/ GET input2 value on <ESP_IP>\/get?input2=<inputMessage>\n else if (request->hasParam(PARAM_INPUT_2)) {\n inputMessage = request->getParam(PARAM_INPUT_2)->value();\n inputParam = PARAM_INPUT_2;\n }\n \/\/ GET input3 value on <ESP_IP>\/get?input3=<inputMessage>\n else if (request->hasParam(PARAM_INPUT_3)) {\n inputMessage = request->getParam(PARAM_INPUT_3)->value();\n inputParam = PARAM_INPUT_3;\n }\n else {\n inputMessage = "No message sent";\n inputParam = "none";\n }\n Serial.println(inputMessage);\n request->send(200, "text\/html", "HTTP GET request sent to your ESP on input field (" \n + inputParam + ") with value: " + inputMessage +\n "<br><a href=\\"\/\\">Return to Home Page<\/a>");\n });\n server.onNotFound(notFound);\n server.begin();\n}\n\nvoid loop() {\n \n}\n<\/code><\/pre>\n\tHow the code works<\/h3>\n\n\n\n
Including libraries<\/h4>\n\n\n\n
#include <WiFi.h>\n#include <AsyncTCP.h>\n#include <ESPAsyncWebServer.h><\/code><\/pre>\n\n\n\n#include <ESP8266WiFi.h>\n#include <ESPAsyncTCP.h>\n#include <ESPAsyncWebServer.h><\/code><\/pre>\n\n\n\nNetwork credentials<\/h4>\n\n\n\n
const char* ssid = \"REPLACE_WITH_YOUR_SSID\";\nconst char* password = \"REPLACE_WITH_YOUR_PASSWORD\";<\/code><\/pre>\n\n\n\nHTML Forms and Input Fields<\/h4>\n\n\n\n
<form action=\"\/get\">\n input1: <input type=\"text\" name=\"input1\">\n <input type=\"submit\" value=\"Submit\">\n<\/form><br>\n<form action=\"\/get\">\n input2: <input type=\"text\" name=\"input2\">\n <input type=\"submit\" value=\"Submit\">\n<\/form><br>\n<form action=\"\/get\">\n input3: <input type=\"text\" name=\"input3\">\n <input type=\"submit\" value=\"Submit\">\n<\/form><\/code><\/pre>\n\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/08\/input_web_browser-2.png?resize=571%2C356&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n<form action=\"\/get\">\n input1: <input type=\"text\" name=\"input1\">\n <input type=\"submit\" value=\"Submit\">\n<\/form><\/code><\/pre>\n\n\n\ninput1: <input type=\"text\" name=\"input1\"><\/code><\/pre>\n\n\n\n<input type=\"submit\" value=\"Submit\"><\/code><\/pre>\n\n\n\nConnect to your network<\/h4>\n\n\n\n
Serial.begin(115200);\nWiFi.mode(WIFI_STA);\nWiFi.begin(ssid, password);\nif (WiFi.waitForConnectResult() != WL_CONNECTED) {\n Serial.println(\"WiFi Failed!\");\n return;\n}\nSerial.println();\nSerial.print(\"IP Address: \");\nSerial.println(WiFi.localIP());<\/code><\/pre>\n\n\n\nHandle HTTP GET requests<\/h4>\n\n\n\n
server.on(\"\/\", HTTP_GET, [](AsyncWebServerRequest *request){\n request->send_P(200, \"text\/html\", index_html);\n});<\/code><\/pre>\n\n\n\nserver.on(\"\/get\", HTTP_GET, [] (AsyncWebServerRequest *request) {<\/code><\/pre>\n\n\n\ninputMessage = request->getParam(PARAM_INPUT_1)->value();<\/code><\/pre>\n\n\n\nrequest->send(200, \"text\/html\", \"HTTP GET request sent to your ESP on input field (\" \n + inputParam + \") with value: \" + inputMessage +\n \"<br><a href=\\\"\/\\\">Return to Home Page<\/a>\");<\/code><\/pre>\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/08\/input_web_browser-3.png?resize=666%2C356&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nvoid notFound(AsyncWebServerRequest *request) {\n request->send(404, \"text\/plain\", \"Not found\");\n}<\/code><\/pre>\n\n\n\nserver.begin();<\/code><\/pre>\n\n\n\nDemonstration<\/h3>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/08\/ESP32-ESP8266-IP-Address-Arduino-IDE-Serial-Monitor.png?resize=601%2C477&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/08\/ESP32-ESP8266-HTML-Form-Input-Data-save.png?resize=571%2C356&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/08\/ESP32-ESP8266-HTML-Form-Input-Data-demonstration.png?resize=666%2C356&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n
\n\n\n\n2. ESP32\/ESP8266 Save Input Fields to LittleFS<\/h2>\n\n\n\n
\/*********\n Rui Santos & Sara Santos - Random Nerd Tutorials\n Complete project details at https:\/\/RandomNerdTutorials.com\/esp32-esp8266-input-data-html-form\/\n Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.\n The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n*********\/\n#include <Arduino.h>\n#ifdef ESP32\n #include <WiFi.h>\n #include <AsyncTCP.h>\n #include <LittleFS.h>\n#else\n #include <ESP8266WiFi.h>\n #include <ESPAsyncTCP.h>\n #include <Hash.h>\n #include <LittleFS.h>\n#endif\n#include <ESPAsyncWebServer.h>\n\nAsyncWebServer server(80);\n\n\/\/ REPLACE WITH YOUR NETWORK CREDENTIALS\nconst char* ssid = "REPLACE_WITH_YOUR_SSID";\nconst char* password = "REPLACE_WITH_YOUR_PASSWORD";\n\nconst char* PARAM_STRING = "inputString";\nconst char* PARAM_INT = "inputInt";\nconst char* PARAM_FLOAT = "inputFloat";\n\n\/\/ HTML web page to handle 3 input fields (inputString, inputInt, inputFloat)\nconst char index_html[] PROGMEM = R"rawliteral(\n<!DOCTYPE HTML><html><head>\n <title>ESP Input Form<\/title>\n <meta name="viewport" content="width=device-width, initial-scale=1">\n <script>\n function submitMessage() {\n alert("Saved value to ESP LittleFS");\n setTimeout(function(){ document.location.reload(false); }, 500); \n }\n <\/script><\/head><body>\n <form action="\/get" target="hidden-form">\n inputString (current value %inputString%): <input type="text" name="inputString">\n <input type="submit" value="Submit" onclick="submitMessage()">\n <\/form><br>\n <form action="\/get" target="hidden-form">\n inputInt (current value %inputInt%): <input type="number " name="inputInt">\n <input type="submit" value="Submit" onclick="submitMessage()">\n <\/form><br>\n <form action="\/get" target="hidden-form">\n inputFloat (current value %inputFloat%): <input type="number " name="inputFloat">\n <input type="submit" value="Submit" onclick="submitMessage()">\n <\/form>\n <iframe style="display:none" name="hidden-form"><\/iframe>\n<\/body><\/html>)rawliteral";\n\nvoid notFound(AsyncWebServerRequest *request) {\n request->send(404, "text\/plain", "Not found");\n}\n\nString readFile(fs::FS &fs, const char * path){\n Serial.printf("Reading file: %s\\r\\n", path);\n File file = fs.open(path, "r");\n if(!file || file.isDirectory()){\n Serial.println("- empty file or failed to open file");\n return String();\n }\n Serial.println("- read from file:");\n String fileContent;\n while(file.available()){\n fileContent+=String((char)file.read());\n }\n file.close();\n Serial.println(fileContent);\n return fileContent;\n}\n\nvoid writeFile(fs::FS &fs, const char * path, const char * message){\n Serial.printf("Writing file: %s\\r\\n", path);\n File file = fs.open(path, "w");\n if(!file){\n Serial.println("- failed to open file for writing");\n return;\n }\n if(file.print(message)){\n Serial.println("- file written");\n } else {\n Serial.println("- write failed");\n }\n file.close();\n}\n\n\/\/ Replaces placeholder with stored values\nString processor(const String& var){\n \/\/Serial.println(var);\n if(var == "inputString"){\n return readFile(LittleFS, "\/inputString.txt");\n }\n else if(var == "inputInt"){\n return readFile(LittleFS, "\/inputInt.txt");\n }\n else if(var == "inputFloat"){\n return readFile(LittleFS, "\/inputFloat.txt");\n }\n return String();\n}\n\nvoid setup() {\n Serial.begin(115200);\n \/\/ Initialize LittleFS\n #ifdef ESP32\n if(!LittleFS.begin(true)){\n Serial.println("An Error has occurred while mounting LittleFS");\n return;\n }\n #else\n if(!LittleFS.begin()){\n Serial.println("An Error has occurred while mounting LittleFS");\n return;\n }\n #endif\n\n WiFi.mode(WIFI_STA);\n WiFi.begin(ssid, password);\n if (WiFi.waitForConnectResult() != WL_CONNECTED) {\n Serial.println("WiFi Failed!");\n return;\n }\n Serial.println();\n Serial.print("IP Address: ");\n Serial.println(WiFi.localIP());\n\n \/\/ Send web page with input fields to client\n server.on("\/", HTTP_GET, [](AsyncWebServerRequest *request){\n request->send(200, "text\/html", index_html, processor);\n });\n\n \/\/ Send a GET request to <ESP_IP>\/get?inputString=<inputMessage>\n server.on("\/get", HTTP_GET, [] (AsyncWebServerRequest *request) {\n String inputMessage;\n \/\/ GET inputString value on <ESP_IP>\/get?inputString=<inputMessage>\n if (request->hasParam(PARAM_STRING)) {\n inputMessage = request->getParam(PARAM_STRING)->value();\n writeFile(LittleFS, "\/inputString.txt", inputMessage.c_str());\n }\n \/\/ GET inputInt value on <ESP_IP>\/get?inputInt=<inputMessage>\n else if (request->hasParam(PARAM_INT)) {\n inputMessage = request->getParam(PARAM_INT)->value();\n writeFile(LittleFS, "\/inputInt.txt", inputMessage.c_str());\n }\n \/\/ GET inputFloat value on <ESP_IP>\/get?inputFloat=<inputMessage>\n else if (request->hasParam(PARAM_FLOAT)) {\n inputMessage = request->getParam(PARAM_FLOAT)->value();\n writeFile(LittleFS, "\/inputFloat.txt", inputMessage.c_str());\n }\n else {\n inputMessage = "No message sent";\n }\n Serial.println(inputMessage);\n request->send(200, "text\/text", inputMessage);\n });\n server.onNotFound(notFound);\n server.begin();\n}\n\nvoid loop() {\n \/\/ To access your stored values on inputString, inputInt, inputFloat\n String yourInputString = readFile(LittleFS, "\/inputString.txt");\n Serial.print("*** Your inputString: ");\n Serial.println(yourInputString);\n \n int yourInputInt = readFile(LittleFS, "\/inputInt.txt").toInt();\n Serial.print("*** Your inputInt: ");\n Serial.println(yourInputInt);\n \n float yourInputFloat = readFile(LittleFS, "\/inputFloat.txt").toFloat();\n Serial.print("*** Your inputFloat: ");\n Serial.println(yourInputFloat);\n delay(5000);\n}\n<\/code><\/pre>\n\tHow the Code Works<\/h3>\n\n\n\n
Including libraries<\/h4>\n\n\n\n
#include <WiFi.h>\n#include <ESPAsyncWebServer.h>\n#include <AsyncTCP.h>\n#include <LittleFS.h><\/code><\/pre>\n\n\n\n#include <ESP8266WiFi.h>\n#include <ESPAsyncWebServer.h>\n#include <ESPAsyncTCP.h>\n#include <Hash.h>\n#include <LittleFS.h><\/code><\/pre>\n\n\n\nHTML Form<\/h4>\n\n\n\n
<script>\n function submitMessage() {\n alert(\"Saved value to ESP LittleFS\");\n setTimeout(function(){ document.location.reload(false); }, 500);\n }\n<\/script><\/code><\/pre>\n\n\n\n<form action=\"\/get\" target=\"hidden-form\">\n inputString (current value %inputString%): <input type=\"text\" name=\"inputString\">\n <input type=\"submit\" value=\"Submit\" onclick=\"submitMessage()\">\n<\/form><\/code><\/pre>\n\n\n\nRead and Write to LittleFS<\/h4>\n\n\n\n
String readFile(fs::FS &fs, const char * path){\n Serial.printf(\"Reading file: %s\\r\\n\", path);\n File file = fs.open(path, \"r\");\n if(!file || file.isDirectory()){\n Serial.println(\"- empty file or failed to open file\");\n return String();\n }\n Serial.println(\"- read from file:\");\n String fileContent;\n while(file.available()){\n fileContent+=String((char)file.read());\n }\n Serial.println(fileContent);\n return fileContent;<\/code><\/pre>\n\n\n\nvoid writeFile(fs::FS &fs, const char * path, const char * message){\n Serial.printf(\"Writing file: %s\\r\\n\", path);\n File file = fs.open(path, \"w\");\n if(!file){\n Serial.println(\"- failed to open file for writing\");\n return;\n }\n if(file.print(message)){\n Serial.println(\"- file written\");\n } else {\n Serial.println(\"- write failed\");\n }\n}<\/code><\/pre>\n\n\n\nprocessor()<\/h4>\n\n\n\n
String processor(const String& var){\n \/\/Serial.println(var);\n if(var == \"inputString\"){\n return readFile(LittleFS, \"\/inputString.txt\");\n }\n else if(var == \"inputInt\"){\n return readFile(LittleFS, \"\/inputInt.txt\");\n }\n else if(var == \"inputFloat\"){\n return readFile(LittleFS, \"\/inputFloat.txt\");\n }\n return String();\n}<\/code><\/pre>\n\n\n\nHandle HTTP GET requests <\/h4>\n\n\n\n
if (request->hasParam(PARAM_STRING)) {\n inputMessage = request->getParam(PARAM_STRING)->value();\n writeFile(LittleFS, \"\/inputString.txt\", inputMessage.c_str());\n}<\/code><\/pre>\n\n\n\ninputMessage = request->getParam(PARAM_STRING)->value();<\/code><\/pre>\n\n\n\nwriteFile(LittleFS, \"\/inputString.txt\", inputMessage.c_str());<\/code><\/pre>\n\n\n\nAccessing the variables<\/h4>\n\n\n\n
String yourInputString = readFile(LittleFS, \"\/inputString.txt\");<\/code><\/pre>\n\n\n\nSerial.println(yourInputString);<\/code><\/pre>\n\n\n\nDemonstration<\/h3>\n\n\n\n
<\/figure><\/div>\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/08\/ESP32-ESP8266-HTML-Form-Input-Data-Save-to-SPIFFS-variables-files.png?resize=669%2C431&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/ESP32-html-form-web-server-save-data-to-littlefs.png?resize=769%2C438&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/08\/ESP32-ESP8266-Input-Fields-Demonstration-Arduino-IDE-Serial-Monitor.png?resize=601%2C477&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nWrapping Up<\/h2>\n\n\n\n
\n