📅 Thu, Sep 19, 2019 ⏲️ ~ 4 minutes

How to receive data from a web form with ESP8266 or ESP32

We continue with the tutorials of the ESP8266 and ESP32 acting as a server seeing how to send data from a static Web page through a form.

We will refer to the ESP8266, but the same code is compatible with the ESP32, adjusting the name of the libraries. At the end you have the code for both the ESP8266 and the ESP32.

After a short break to see the OTA programming over WiFi (which will be very useful for testing in the following entries) we continue with the ESP8266 acting as a server, which we left in the last entry seeing how to set up an asynchronous server with ESPAsyncServer.

As we were saying, the “preferred” way to serve content on the ESP8266 is from the SPIFFS memory. The content served is ‘static’, in the sense that it does not change between server calls. Serving truly dynamic content is normally almost exclusively reserved for endpoints.

However, as we already mentioned, the fact that the content is ‘static’ does not mean that “it does nothing”.

There are multiple ways to exchange information between the frontend and the backend (forms, ajax, websockets). We will see all of them, and we will start with the simplest (and oldest), the simple and simple forms.

In this day and age, using forms may seem ancient. But, you have to start somewhere, and it is best not to start building a house from the roof. We will see the more advanced (and complex) forms in the following entries.

main.ino

Our main program remains unchanged from the ESPAsyncServer example

#include <ESP8266WiFi.h>
#include <ESPAsyncWebServer.h>
#include <FS.h>

#include "config.h"  // Replace with your network data
#include "Server.hpp"
#include "ESP8266_Utils.hpp"

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

  InitServer();
}

void loop(void)
{
}

Server.hpp

The changes are in the definition of the server behavior in the ‘Server.hpp’ file. In addition to the usual function to serve content from the SPIFFS, we have added routing for the URL ‘/SetText’ for POST requests, associated with the ‘handleFormText’ function. That is, we have defined a ‘mini API’ in the backend with a single Endpoint.

AsyncWebServer server(80);

void handleFormText(AsyncWebServerRequest *request)
{
 String MiText = request->arg("miText");
 
 Serial.print("MiText:\t");
 Serial.println(MiText);

 //String response = "<a href='/'> Go Back </a>";
 //request->send(200, "text/html", response);

 // direct redirection
 request->redirect("/");
}

void InitServer()
{
  server.serveStatic("/", SPIFFS, "/").setDefaultFile("index.html");

  server.on("/SetText", HTTP_POST, handleFormText);

  server.onNotFound([](AsyncWebServerRequest *request) {
    request->send(400, "text/plain", "Not found");
  });

  server.begin();
    Serial.println("HTTP server started");
}

In this example, in the handleFormText function we are simply going to print the text received by the serial port and redirect the client to the form page. (In the same code you have an example commented out where it returns an html code with a link to go back)

On the other hand, inside the ‘data’ folder we create a single file called ‘index.html’, with the following content.

index.html

<!DOCTYPE html>
<html class="no-js" lang="">
   <head>
      <meta charset="utf-8">
      <meta http-equiv="x-ua-compatible" content="ie=edge">
      <title>ESP8266 Forms</title>
      <meta name="description" content="">
      <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
 
   <body>
    <h1>Form example</h1>
        <form action="/SetText" method="post">
      Text:<br>
      <input type="text" name="miText" value="MiText"><br>
      <button type="submit" value="Submit">Send</button>
    </form> 
    </body>
</html>

Result

This very simple web page only contains a form whose ‘Submit’ function is associated with the ‘/SetText’ Endpoint under the POST method. Remember that methods (or verbs) in a web API mean things. We are using POST because we are emulating an action that we execute on the backend. If we were making a request we would use a GET method.

If you have doubts about the correct use of methods in a Web API, check the entry on types of requests and parameters, or how to set up a Rest API in NodeJs.

Once everything is loaded, we access the ESP8266 and we will see our simple (and, let’s face it, ugly) web page.

esp8266-formulario-web-html

If we write some text and click the ‘submit’ button, we can see that, indeed, the ESP8266 correctly receives the text we sent and displays it by serial port. In a real project, it would be a matter of processing the text and doing whatever is appropriate.

esp8266-formulario-web-serial-port

In future entries, we will see much more convenient ways to exchange information. This is a simple but very useful example that has allowed us to introduce the concepts (and vocabulary) of web methods, backend, frontend, endpoint. We are starting to get into the thick of it!

In the next entry, we will see a variation of this example where we will see how to apply what we have seen to turn on and off an LED connected to the ESP8266 through a form, for example, to vary the light intensity on an LED. See you soon!

Result

Download the code