Hi Guys
I am trying to send data entered on a HTML textbox to a NodeMCU esp8266 server, to be displayed by the serial monitor, Does any of you have got experience on this ?
Thanks Guys
The nodeMCU esp8266 is serving up a web page which includes a text box. From a web browser, you are calling that page and entering text into the text box. You would like to see that text displayed on the esp8266 serial console when that page is submitted. Is that right ?
Maybe look at an example which does something similar. You'll have to parse the data to find the text box and contents: Arduino/server-examples.rst at master · esp8266/Arduino · GitHub
The ESP8266WebServer library offers many convenient functions to read POST and GET data. No need to do any string manipulation to get to the data.
You can check this GitHub repository , Here I have hosted a web server as well as posting sensor readings to cloud using Thing Speak API.
I have an SHT31 I2C compatible temperature and Humidity sensor and I am posting these reading to cloud and Web server. I have used ESP8266WebServer library for this task
Hope it helps you.
6v6gt:
The nodeMCU esp8266 is serving up a web page which includes a text box. From a web browser, you are calling that page and entering text into the text box. You would like to see that text displayed on the esp8266 serial console when that page is submitted. Is that right ?Maybe look at an example which does something similar. You'll have to parse the data to find the text box and contents: Arduino/doc/esp8266wifi/server-examples.rst at master · esp8266/Arduino · GitHub
Yes that's Correct, I have been finding a lot of stuff on ajax with xml, but I don' really understand how it works yet, on the link you have posted the user doesnt enter any data on the page .
wvmarle:
The ESP8266WebServer library offers many convenient functions to read POST and GET data. No need to do any string manipulation to get to the data.
I believe I can use the POST action, However I don't know how to implement it yet, perhaps you can help me , here is skech
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>
const char* WifiName="*****";
const char* WifiPass="******";
String LEDstate, webPage,notice;
ESP8266WebServer server(80);
const char htmlPage[]PROGMEM=R"=====(
<!DOCTYPE html>
<html>
<body>
<h3>Electronic Notice Board </h3>
<FORM METHOD="POST"action="/">
<input type="text" name="myText" value="Write your Notice...">
<p>Click the "Post" button to send your notice </p>
<button onclick="myFunction()"> Post Notice </button>
<p id="demo"></p>
<script>
var x;
function myFunction() {
x = document.getElementById("myText").value
}
</script>
</FORM>
</body>
</html>
)=====";
void handleRoot()
{
webPage=htmlPage;
notice=server.arg("myText");
Serial.print("Argument Received");
}
void setup()
{
Serial.begin(115200);
delay(10);
Serial.println();
Serial.print("Connecting");
WiFi.begin(WifiName,WifiPass);
while(WiFi.status()!= WL_CONNECTED)
{
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.print("Wi-Fi Connected");
Serial.println("IP Address is:");
Serial.println(WiFi.localIP());
server.on("/",handleRoot);
server.begin();
Serial.println("HTTP Server Started");
// put your setup code here, to run once:
}
void loop() {
server.handleClient();
// put your main code here, to run repeatedly:
}
I dont know how to handle the html variable on my actual skecth.
Separate functions - don't send your form data to root, but give it another name. Also ditch that javascript button, plain html works just fine.
Furthermore: your layout is terrible. Use lowercase OR uppercase for your html tags (the standard is lowercase), don't mix them. Also do fix the indentation of your code, the autoformat function of the IDE can help. Makes it a lot more readable and just look a lot better.
<FORM METHOD="POST"action="/postForm">
<input type="text" name="myText" value="Write your Notice...">
<input type="submit" value="Post Notice">
</form>
Then in setup:
server.on("/postForm", handlePostForm);
and the form handler could be:
void handlePostForm()
{
webPage = htmlPage;
notice = server.arg("myText");
Serial.println("Text received. Contents: ");
Serial.println(notice);
}
Thanks a lot for your help WVmarle
So the full code would look like this :
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>
const char* WifiName="*****";
const char* WifiPass="******";
String webPage,notice;
ESP8266WebServer server(80);
const char htmlPage[]PROGMEM=R"=====(
<!DOCTYPE html>
<html>
<body>
<h3>Electronic Notice Board </h3>
<FORM METHOD="POST"action="/postForm">
<input type="text" name="myText" value="Write your Notice...">
<input type="submit" value="Post Notice">
</form>
</body>
</html>
)=====";
void handlePostForm()
{
webPage=htmlPage;
notice=server.arg("myText");
Serial.println("Text Received, contents:");
Serial.println(notice);
server.send(200,"text/html",webPage);
}
void setup()
{
Serial.begin(115200);
delay(10);
Serial.println();
Serial.print("Connecting");
WiFi.begin(WifiName,WifiPass);
server.on("/postForm",handlePostForm);
while(WiFi.status()!= WL_CONNECTED)
{
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("Wi-Fi Connected");
Serial.println("IP Address is:");
Serial.println(WiFi.localIP());
Serial.println(notice);
server.begin();
Serial.println("HTTP Server Started");
// put your setup code here, to run once:
}
void loop() {
server.handleClient();
// put your main code here, to run repeatedly:
}
Yes... with the appropriate macro to retrieve the htmlpage from PROGMEM, forgot how it's called and don't have at hand on this machine.
wvmarle:
Yes... with the appropriate macro to retrieve the htmlpage from PROGMEM, forgot how it's called and don't have at hand on this machine.
Thanks a lot wvMarle, It works, so now I am looking at how to improve the website design, and perfomance like to make it auto scale according to the device's screen size, what would you recommend ?
CiscoFrancis:
auto scale according to the device's screen size, what would you recommend ?
Don't bother. I've given up on that long time ago.
The mobile web sucks big time, and that's me trying to keep it nice here. Even most big companies can't get it working (text too small, too big, layout wrong, etc).
wvmarle:
Don't bother. I've given up on that long time ago.The mobile web sucks big time, and that's me trying to keep it nice here. Even most big companies can't get it working (text too small, too big, layout wrong, etc).
I did not think that it was that bad, Thanks again for you help .