ESP8266 Community Forum

Posted: **Mon Aug 03, 2015 3:02 am**

How do you make a webpage on the server with a text input field, the data from which would be stored in a string variable.
The code I managed to write/copy/paste to this point:

Code: Select all

#include <ESP8266WiFi.h>
#include <WiFiClient.h> 
#include <ESP8266WebServer.h>

const char *ssid = "ESPap";
const char *password = "thereisnospoon";

ESP8266WebServer server(80);

void handleRoot() {
  int sec = millis() / 1000;
   int min = sec / 60;
   int hr = min / 60;
        char temp[420];
   snprintf ( temp, 400,

"<html>\
  <head>\
    <title>ESP8266 Demo</title>\
    <style>\
      body { background-color: #cccccc; font-family: Arial, Helvetica, Sans-Serif; Color: #000088; }\
    </style>\
  </head>\
  <body>\
    <h1>Hello from ESP8266!</h1>\
    <p>Uptime: %02d:%02d:%02d</p>\
    <form action='http://192.168.4.1' method='get'>\
    F_name: <input type='text' name='fname'><br>\
    <input type='submit' value='Submit'>\
</form>\
  </body>\
</html>",

      hr, min % 60, sec % 60
   );
  server.send(200, "text/html", temp);
}

void setup() {
  delay(1000);
  WiFi.softAP(ssid, password);
  while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); }
  server.on("/", handleRoot);
  server.begin();
}

void loop() {
   server.handleClient();
}

It creates an html form that doesn't do much, but I couldn't find what the snprintf() function is supposed to do and what aruments it needs. Most importantly - I couldn't find any info on how to implement the form to have the input data stored in a string after the user clicks the submit button. I saw people doing similar stuff with client.println(), client.read(), but I still couldn't figure it out. Thanks!

Posted: **Mon Aug 03, 2015 8:29 am**

Howdy Alex,
The function called "snprintf" should take a specification string with template parameters in it plus the actual parameters and format those into a resulting string. The "n" in snprintf specifies that there is a maximum length of the output string and don't over-run it. So:

char temp[50];
snprintf(temp, 50, "Here is my data %s ....", "hello world");

would place "Here is my data hello world ...." into the temp storage area for a maximum of 50 bytes.

As for the submission of a form ... that is a whole world of story ... which I can't answer here. What you have to do is go study browser, HTML, JavaScript and web server theory (sorry ... there really is no softer answer). At a high level, when a browser request arrives at the ESP, it returns an HTML stream that is interpreted by the browser. If the browser sees the user press a submit button, it executes a second request to the web sever (ESP in our case) using an HTTP POST. All that is standard Web technology ... and not related to ESP ...

Neil

Posted: **Mon Aug 03, 2015 9:17 am**

For submitting the form values, you need a separate URL for the POST (adjust your form action as followed) :

Code: Select all<form action='http://192.168.4.1/submit' method='POST'>

And add a new handler for it :

Code: Select allserver.on("/submit", handleSubmit);

Then, in your handlerSubmit, you will get values by parsing arguments :

Code: Select all

if (server.args() > 0 ) {
    for ( uint8_t i = 0; i < server.args(); i++ ) {
      if (server.argName(i) == "fname") {
         // do something here with value from server.arg(i);
      }
   }
}

Posted: **Sun Oct 04, 2015 7:49 am**

Hey, were you able to figure this out? Would love some assistance on this.
Thanks!

ESP8266 Community Forum

HTML form input to a string

HTML form input to a string

Re: HTML form input to a string

Re: HTML form input to a string

Re: HTML form input to a string