Taking String Input from NodeMCU Webpage and Printing it on Serial Monitor

Question

I've started working with NodeMCU recently. I've very little knowledge about this device and how a website works. I'm trying to take a long string input from a website hosted by NodeMCU, store it on a variable and then print in on NodeMCU Serial Monitor.

I've got the following program. Here I only have created a text box for typing. But I don't know how to take that input inside a variable and use it later for serial printing.

#include <ESP8266WiFi.h>

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

WiFiServer server(80);

void setup() {
Serial.begin(115200);
delay(10);

WiFi.begin(ssid, password);

while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
    } 
    server.begin(); 
}

void loop() {
    WiFiClient client = server.available();
    if (!client) {
    return;
    }

    Serial.println("new client");
    while(!client.available()){
    delay(1);
    }

    String request = client.readStringUntil('\r');
    Serial.println(request);
    client.flush();

    client.println("HTTP/1.1 200 OK");
    client.println("Content-Type: text/html");
    client.println("");  

    client.println("<!DOCTYPE HTML>");
    client.println("<html>");

    client.println("<label for='name'>Serial Printer (Put Text here: ): </label>");
    client.println("<br><br>");
    client.println("<input type='text' id='name' name='name' required minlength='0' maxlength='800' size='100'>");
    client.println("</html>");

    delay(1);
    Serial.println("Client disonnected");
    Serial.println("");

}

You first need to learn about HTML forms. You need more than just an input tag. — Majenko
– Majenko, Commented Dec 15, 2018 at 17:10
use ESP8266WebServer and see the SimpleAuthentification example — Juraj
– Juraj ♦, Commented Dec 15, 2018 at 17:16

Rudy · Accepted Answer · 2018-12-15 19:52:37Z

Try this. It uses the webserver library. I thought it was cleaner code. I also have a nicer way to include the pure html code.

For your original form go to yourIPaddress/single

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

const char* ssid = "MTS61752";
const char* password = "6900979039";

ESP8266WebServer webserver(80);

//------------------------------------------------
static const char PROGMEM singleLine[] = R"rawliteral(  
<!DOCTYPE html>
<html>
<head>
<title>Single Line Input</title>
</head>
<body>
<form method="post" action="/save" >
<label for='name'>Serial Printer (Put Text here: ): </label>
<br><br>
<input type='text' id='name' name='name' required minlength='0' maxlength='800' size='100'>
<input type="submit" name="clk_action" value="accept">
</form>
</body>
</html>
)rawliteral";

//------------------------------------------------
static const char PROGMEM INDEX_HTML[] = R"rawliteral(  
<!DOCTYPE html>
<html>
<head>
<title>Clock Settings</title>
</head>
<body>
<form method="post" action="/save" >
Turn on time:<br><input name="onTime" type="text" size="16" value="" ><br><br>
Turn off time:<br><input name="offTime" type="text" size="16" value="" ><br><br> 
<input type="submit" name="clk_action" value="accept">
</form>
</body>
</html>
)rawliteral";

//------------------------------------------------
void handleRoot() {
  webserver.send(200, "text/html", INDEX_HTML);
}

//------------------------------------------------
void handleNotFound() {
  webserver.send(404, "text/plain", "Page not found ...");
}

//------------------------------------------------
void handleSave() {
  String str = "Settings Saved ...\r\n";

  Serial.print("number of arguments "); 
  Serial.println(webserver.args());                    // number of arguments

  if (webserver.args() > 0 ) {
    for ( uint8_t i = 0; i < webserver.args(); i++ ) {
      str += webserver.argName(i) + " = " + webserver.arg(i) + "\r\n";

      Serial.println("Arg "+ String(i)+"="+ webserver.argName(i));     
      Serial.println("Arg "+ String(i)+"="+ webserver.arg(i));
    }
  }
  webserver.send(200, "text/plain", str.c_str());
}

//------------------------------------------------
void handleSingleLine() {
  webserver.send(200, "text/html", singleLine);
}

//------------------------------------------------
void setup() {
  Serial.begin(115200);
  WiFi.begin(ssid, password);
  Serial.println("");

  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());


  webserver.on("/", handleRoot);
  webserver.on("/save", handleSave);
  webserver.onNotFound(handleNotFound);
  webserver.on("/single", handleSingleLine);

  webserver.begin();
  Serial.println("Web server has started");
}

//------------------------------------------------
void loop() {
  webserver.handleClient();

}

Can you be more specific. I can't see anything missing closing tags. — Rudy
– Rudy, Commented Dec 15, 2018 at 20:53
<input> </input> stackoverflow.com/a/13232170/6544572 --- These are void elements. This means they aren't designed to contain text or other elements, and as such do not need — and in fact, cannot have — a closing tag in HTML. ----- I did some searching and it seems that XHTML uses </input> but I have found any documentation that specifies its use in HTML. (note, my HTML knowledge is limited) On </br> w3c.github.io/html-reference/br.html#br — Rudy
– Rudy, Commented Dec 15, 2018 at 22:45

Stack Exchange Network

Taking String Input from NodeMCU Webpage and Printing it on Serial Monitor

1 Answer 1

Your Answer

Hot Network Questions

Taking String Input from NodeMCU Webpage and Printing it on Serial Monitor

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions