Use input from form submission in the loop

depauw75 · January 14, 2019, 7:47pm

Hey,

I've got this asynchronous webserver started, combined with Wifi manager. I'm using an eample html-page which serves a form with 2 fields. At the moment, when you press the submit button, a popup window is opened and display the input of the form field.

I'd like to use the input of the form field in the loop. So I can have a led switched on or of, or do some caluculations. But how do I do that?

I think I'll need some javascript to let the submit button post the input. And then I think I need some code to grab that input som I can use it in the loop.
Been looking around but haven't fond much at the moment.... I hoping someone can help me out!

Here you will find the sketch-code and the html code.

sketch:

#if defined(ESP8266)
#include "ESP8266WiFi.h"          //https://github.com/esp8266/Arduino
#else
#include "WiFi.h"
#endif

#include "ESPAsyncTCP.h"
#include "ESPAsyncWebServer.h"
#include "FS.h"
#include "ESPAsyncWiFiManager.h"        //https://github.com/tzapu/WiFiManager
#include "NTPtimeESP.h"
#define DEBUG_ON
 

AsyncWebServer server(80);
DNSServer dns;



void setup(){

  // Start serial
  Serial.begin(115200);

  //WiFiManager
    //Local intialization. Once its business is done, there is no need to keep it around
    AsyncWiFiManager wifiManager(&server,&dns);
    //reset saved settings
    //wifiManager.resetSettings();
    //set custom ip for portal
    //wifiManager.setAPConfig(IPAddress(10,0,1,1), IPAddress(10,0,1,1), IPAddress(255,255,255,0));
    //fetches ssid and pass from eeprom and tries to connect
    //if it does not connect it starts an access point with the specified name
    //here  "AutoConnectAP"
    //and goes into a blocking loop awaiting configuration
    wifiManager.autoConnect("AutoConnectAP");
    //or use this for auto generated name ESP + ChipID
    //wifiManager.autoConnect();
    //if you get here you have connected to the WiFi
    Serial.println("connected...yeey :)");
  
  // Connecting to a WiFi network
 // Serial.println();
  //Serial.println();
 // Serial.print("Connecting to "); 
 
  SPIFFS.begin();
 
  // Route for root / web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/index.html", String());
  });


  server.on("/rand", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(200, "text/plain", String(random(1000)));
  });
  
  server.begin();
}

void loop() {
  // put your main code here, to run repeatedly:

}

HTML-page:

<script language = "JavaScript">
    function formToJson(form){
         
        var pass = form.pass.value;
        var ssid = form.ssid.value;
         
        var jsonFormInfo = JSON.stringify({
            pass:pass, 
            ssid: ssid
        });
 
        window.alert(jsonFormInfo);
         
    }
</script>
 
<form onSubmit = "event.preventDefault(); formToJson(this);">
    <label class="label">Network Name</label>
    <input type = "text" name = "ssid"/>
    

    <label>Password</label>
    <input type = "text" name = "pass"/>
    

    <input type="submit" value="Submit">
</form>

Kind regards,
Christophe

Juraj · January 15, 2019, 6:43am

replace form onSubmit with action attribute. for example action="myFormSubmit". in sketch add server.on("/myFormSubmit", ... and in the handler use server.arg function to read the values

see the SimpleAuthentication example of the ESP8266WebServer library

depauw75 · January 15, 2019, 4:20pm

Hello,
I've changed the form action into:

The html now looks like this:

<script language = "JavaScript">
    function formToJson(form){
         
        var pass = form.pass.value;
        var ssid = form.ssid.value;
         
        var jsonFormInfo = JSON.stringify({
            ssid:ssid,
 pass:pass 
            
        });
 
        window.alert(jsonFormInfo);
         
    }
</script>
 
<form action="myFormSubmit" method="post">
    <label class="label">Network Name</label>
    <input type = "text" name = "ssid"/>
    

    <label>Password</label>
    <input type = "text" name = "pass"/>
    

    <input type="submit" value="Submit">
</form>

In the sketch, i've added the following route to see if I can grab one of the inputfield values:
server.on("/myFormSubmit", HTTP_POST, [](AsyncWebServerRequest *request){
request->send(SPIFFS, "text/plain", String(server.arg("ssid")));
});

The sketch now looks like this:

// https://techtutorialsx.com/2018/01/01/esp8266-arduino-asynchronous-http-web-server/
#if defined(ESP8266)
#include "ESP8266WiFi.h"          //https://github.com/esp8266/Arduino
#else
#include "WiFi.h"
#endif

#include "ESPAsyncTCP.h"
#include "ESPAsyncWebServer.h"
#include "FS.h"
#include "ESPAsyncWiFiManager.h"        //https://github.com/tzapu/WiFiManager
#include "NTPtimeESP.h"
#define DEBUG_ON


AsyncWebServer server(80);
DNSServer dns;



void setup(){

  // Start serial
  Serial.begin(115200);

  //WiFiManager
    //Local intialization. Once its business is done, there is no need to keep it around
    AsyncWiFiManager wifiManager(&server,&dns);
    //reset saved settings
    //wifiManager.resetSettings();
    //set custom ip for portal
    //wifiManager.setAPConfig(IPAddress(10,0,1,1), IPAddress(10,0,1,1), IPAddress(255,255,255,0));
    //fetches ssid and pass from eeprom and tries to connect
    //if it does not connect it starts an access point with the specified name
    //here  "AutoConnectAP"
    //and goes into a blocking loop awaiting configuration
    wifiManager.autoConnect("AutoConnectAP");
    //or use this for auto generated name ESP + ChipID
    //wifiManager.autoConnect();
    //if you get here you have connected to the WiFi
    Serial.println("connected...yeey :)");
 
  SPIFFS.begin();
 
  // Route for root / web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/index.html", String());
  });

server.on("/myFormSubmit", HTTP_POST, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "text/plain", String(server.arg("ssid")));
  });

  server.on("/rand", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(200, "text/plain", String(random(1000)));
  });
  
  server.begin();
}

void loop() {
  // put your main code here, to run repeatedly:

}

When I run this, I get this error message:

request->send(SPIFFS, "text/plain", String(server.arg("ssid")));

^*
exit status 1: 'class AsyncWebServer' has no member named 'arg'

Any suggestions?

thanks!!!

Juraj · January 15, 2019, 4:53pm

depauw75:
When I run this, I get this error message:

request->send(SPIFFS, "text/plain", String(server.arg("ssid")));

^*
exit status 1: 'class AsyncWebServer' has no member named 'arg'

Any suggestions?

thanks!!!

it is compilation, not running.
ESP8266WebServer has args
ESPAsyncWebServer has params

read the doc GitHub - me-no-dev/ESPAsyncWebServer: Async Web Server for ESP8266 and ESP32

AsyncWebParameter* getParam(const String& name, bool post=false, bool file=false) const;

server.getParam("ssid", true); // true for POST request

depauw75 · January 17, 2019, 5:19pm

Thanks for the hints and link to resource. With the help of this example esp8266 - How do I get the request params from a ESPAsyncWebServer? - Arduino Stack Exchange I came to this working code!

Html:

<script language = "JavaScript">
    function formToJson(form){
         
        var pass = form.pass.value;
        var ssid = form.ssid.value;
         
        var jsonFormInfo = JSON.stringify({
            ssid:ssid,
			pass:pass 
            
        });
 
        window.alert(jsonFormInfo);
         
    }
</script>
 
<form action="myFormSubmit" method="post">
    <label class="label">Network Name</label>
    <input type = "text" name = "ssid"/>
    

    <label>Password</label>
    <input type = "text" name = "pass"/>
    

    <input type="submit" value="Submit">
</form>

Sketch:

#if defined(ESP8266)
#include "ESP8266WiFi.h"          //https://github.com/esp8266/Arduino
#else
#include "WiFi.h"
#endif

#include "ESPAsyncTCP.h"
#include "ESPAsyncWebServer.h"
#include "FS.h"
#include "ESPAsyncWiFiManager.h"        //https://github.com/tzapu/WiFiManager
#include "NTPtimeESP.h"
#define DEBUG_ON

String netw;
String password;

AsyncWebServer server(80);
DNSServer dns;



void setup(){

  // Start serial
  Serial.begin(115200);

  //WiFiManager
    //Local intialization. Once its business is done, there is no need to keep it around
    AsyncWiFiManager wifiManager(&server,&dns);
    //reset saved settings
    //wifiManager.resetSettings();
    //set custom ip for portal
    //wifiManager.setAPConfig(IPAddress(10,0,1,1), IPAddress(10,0,1,1), IPAddress(255,255,255,0));
    //fetches ssid and pass from eeprom and tries to connect
    //if it does not connect it starts an access point with the specified name
    //here  "AutoConnectAP"
    //and goes into a blocking loop awaiting configuration
    wifiManager.autoConnect("AutoConnectAP");
    //or use this for auto generated name ESP + ChipID
    //wifiManager.autoConnect();
    //if you get here you have connected to the WiFi
    Serial.println("connected...yeey :)");
 
  SPIFFS.begin();
 
  // Route for root / web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/index.html", String());
  });


  server.on("/myFormSubmit", HTTP_POST, [](AsyncWebServerRequest *request) {
    Serial.println("submit hit.");
    //String message;
    int params = request->params();
    Serial.printf("%d params sent in\n", params);
    for (int i = 0; i < params; i++)
    {
        AsyncWebParameter *p = request->getParam(i);
        if (p->isFile())
        {
            Serial.printf("_FILE[%s]: %s, size: %u", p->name().c_str(), p->value().c_str(), p->size());
        }
        else if (p->isPost())
        {
            Serial.printf("_POST[%s]: %s", p->name().c_str(), p->value().c_str());
        }
        else
        {
            Serial.printf("_GET[%s]: %s", p->name().c_str(), p->value().c_str());
        }
    }
    if (request->hasParam("ssid", true) && request->hasParam("pass", true))
    {
        netw = request->getParam("ssid", true)->value();
        password = request->getParam("pass", true)->value();
    }
    else
    {
        netw = "not specified";
        password = "not specified";
    }
    request->send(200, "text/plain", "Submit: " + netw + password);
    Serial.print("Ssid: ");
    Serial.println(netw);
  });

  server.on("/rand", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(200, "text/plain", String(random(1000)));
  });
  
  server.begin();
}

void loop() {
  // put your main code here, to run repeatedly:
  //test = server.arg("ssid");
  //test = getParam("ssid", true)->value();
  Serial.print("ssid is :");
  Serial.println(netw);
  Serial.print("pass is: ");
  Serial.println(password);
  delay(5000);
  
}

thanks for the help and the learning experience!

Topic		Replies	Views
ESP8266 use GET or POST values from webpage in sketch Networking, Protocols, and Devices	3	1198	May 6, 2021
ESP 32 webserver textbox input into variable Programming	2	3877	May 5, 2021
HTML "form" in arduino to "GET" the connected device's user input data. Programming	2	2431	May 5, 2021
how can we feed data to stubborn esp8266 server Programming	19	1724	May 5, 2021
Question regarding ESP8266 Access point and text input forms Programming	9	3791	May 6, 2021

Use input from form submission in the loop

Related topics