HTML form input to a string

Post topics, source code that relate to the Arduino Platform
 Reply

User avatar

HTML form input to a string

By AlexPilk
- Mon Aug 03, 2015 3:02 am #24865 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!
User avatar

Re: HTML form input to a string

By kolban
- Mon Aug 03, 2015 8:29 am #24894 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
User avatar

Re: HTML form input to a string

By martinayotte
- Mon Aug 03, 2015 9:17 am #24902 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 allif (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);
      }
   }
}
 Reply
Return to Arduino