how can we feed data to stubborn esp8266 server

Hello amazing people!
I have a head breaking problem here…I simply want to send API key to be processed in my arduino code,but that API key is to be sent from browser the way wifimanager sends ssid and passcode…
Now you may say:
use in the html commands…well chill
I did that but where would i save that value in the code…ahaan!! what will I put in action attribute of form tag…after getting hell outa google,i found on other forums that this problem has been bugging whole humanity, and not provided with any solution so far…
Please save Humanity from this tyranny of machines…And ya I tried copyin wifimanager.h, but when i press submit…browser would frown at me sayin “where the heck will i save your strings”…
heres that code if you dont believe me

server.send(200, "text/html", "<h1>DATA FROM SENSORS</h1> <form method='get' action='wifisave'><input id='s' name='s' length=32 placeholder='SSID'>
<input id='p' name='p' length=64 type='password' placeholder='password'>

<input id='{i}' name='{n}' maxlength={l} placeholder='{p}' value='{v}' {c}>
<button type='submit'>save</button></form><h3><a>Google</a> </h3><h5>"  "</h5><h3>Temperature sensor  </h3>" );

Thanks

I'm not sure, that I understand the problem. And one stray line of code does not help either.

server.on("/wifisave", {...

thanks for replying…
i think you dont need my code,but still here it is in the end
all i want is : i want to send data from browser to server to process…on nodeMCU
Juraj could ya please tell what ya mean…i didnt understand that
thanks

#include <ESP8266WiFi.h>          //https://github.com/esp8266/Arduino
//needed for library
#include <DNSServer.h>
#include <ESP8266WebServer.h>
#include <WiFiClient.h>

const char 
  *pageheader = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">",
  *htmlhead = "<html><head><title>Your Title</title><meta http-equiv=\"Content-Type\" content=\"text/html;charset=utf-8\" /></head>",
  *bodystyle = "<body style=\"color: wheat; background-color: teal; font-size: 12pt; font-family: sans-serif;\">",

  *htmlclose = "</body></html>";

char  *username = "corph", *password = "corph@786";

ESP8266WebServer server(80);

String page;
void setup() {
  Serial.begin(115200);
  WiFi.begin(username, password);
   while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print("->");
  }  

Serial.println(WiFi.localIP());
  server.on( "/",handleRoot);
  server.begin();
}

void loop() {

  server.handleClient();
}
void wifisave(){
  String  SSID,password;
}

void handleRoot() {
  String s;
  s+=pageheader;
  s+=htmlhead;
  s+=bodystyle;
  s+= "<h1>DATA FROM SENSORS</h1><h3><a>Google</a> </h3><h5>"  "</h5><h3>Temperature sensor  </h3>";
  s+= "<h5>"" celcius</h5><h3>LUX sensor  </h3><h5>"" LUX</h5>";
  s+=htmlclose; 
// "<form method='get' action='wifisave'><input id='s' name='s' length=32 placeholder='SSID'>
<input id='p' name='p' length=64 type='password' placeholder='password'>
";
  server.send(200, "text/html", "<h1>DATA FROM SENSORS</h1> <form method='get' action='wifisave'><input id='s' name='s' length=32 placeholder='SSID'>
<input id='p' name='p' length=64 type='password' placeholder='password'>

<input id='{i}' name='{n}' maxlength={l} placeholder='{p}' value='{v}' {c}>
<button type='submit'>save</button></form><h3><a>Google</a> </h3><h5>"  "</h5><h3>Temperature sensor  </h3>" ); 
 
}

you have
server.on( "/",handleRoot);

add server.on( "/wifisave",wifisave);

and in function wifisave() process server arguments with server.arg()

see the SimpleAuthentification example of the ESP8266WebServer library

Create a form on your page (insert in between) and keep overview !!!

s+="<form method=\"get\" action=\"http://192.168.4.1/wifisave\" ";  // here you put the distination of the form, the URL that will be requested upon submission
s+="name=\"ssidnpass\">";
s+= "<b>SSID</b> : <input type=\"text\" value=\"";
s+= "\" name=\"ssidname\" size=\"20\" maxlength=\"16\"  />
";
s+= "<b>Password</b> : <input type=\"text\" value=\"";
s+= "\" name=\"password\" size=\"20\" maxlength=\"16\"  />
";
s+= "<input type=\"submit\" value=\"Save\"></form>";

within setup() add another reference

server.on( "/wifisave",handleWifiSave);

and the add the function that extracts the info submitted

void handleWifiSave() {
  String ssid,pass;
  if (server.hasArg("ssidname")) {
    ssid=server.arg("ssidname");
  }
  if (server.hasArg("password")) {
    pass=server.arg("password"))
  }           // now you have tose fields as a 'String' you'll need to convert them to char* since server.connect takes that as arguments

  // display a webpage... whatever you want to display or even refer to the main page like this.
  handleRoot();
}

Thanks Deva_Rishi
just did what you said...but when i got to that ip address via browser, all it showed is
Not found: /
.....Could you please tell what just happened .....
damn i m about to bang ma head to wall

Yeah i was thinking you were in AP mode, but you’re not then the form should refer to the localIP address that your router provided, as such:

void handleRoot() {
  String s;
  s+=pageheader;
  s+=htmlhead;
  s+=bodystyle;
  s+="<form method=\"get\" action=\"http://";
  s+=WiFi.localIP().toString();
  s+="/wifisave\" name=\"ssidnpass\">";  // here you put the distination of the form, the URL that will be requested upon submission
  s+= "<b>SSID</b> : <input type=\"text\" value=\"";
  s+= "\" name=\"ssidname\" size=\"20\" maxlength=\"16\"  />
";
  s+= "<b>Password</b> : <input type=\"text\" value=\"";
  s+= "\" name=\"password\" size=\"20\" maxlength=\"16\"  />
";
  s+= "<input type=\"submit\" value=\"Save\"></form>"; 
  s+= "<h1>DATA FROM SENSORS</h1><h3><a>Google</a> </h3><h5>"  "</h5><h3>Temperature sensor  </h3>";
  s+= "<h5>"" celcius</h5><h3>LUX sensor  </h3><h5>"" LUX</h5>";
  s+=htmlclose; 
 
  server.send(200, "text/html", s);  // send 200 == OK see https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html      
}

void handleWifiSave() {
  String ssid,pass;
  if (server.hasArg("ssidname")) {
    ssid=server.arg("ssidname");
  }
  if (server.hasArg("password")) {
    pass=server.arg("password");
  }           // now you have tose fields as a 'String' you'll need to convert them to char* since server.connect takes that as arguments

  String s;
  s+=pageheader;
  s+=htmlhead;
  s+=bodystyle;
  s+="<b>SSID</b> : ";
  s+=ssid;
  s+="
<b>Password : ";
  s+=pass;
  s+="
<form method=\"get\" action=\"http://";
  s+=WiFi.localIP().toString();
  s+="\" name=\"home\">"; 
  s+= "<input type=\"submit\" value=\"Home\"></form>"; 
  s+=htmlclose;  
  server.send(200, "text/html", s);
}

Deva_Rishi:
Yeah i was thinking you were in AP mode, but you’re not then the form should refer to the localIP address that your router provided, as such:

void handleRoot() {

String s;
  s+=pageheader;
  s+=htmlhead;
  s+=bodystyle;
  s+="<form method=“get” action=“http://”;
  s+=WiFi.localIP().toString();
  s+="/wifisave" name=“ssidnpass”>";  // here you put the distination of the form, the URL that will be requested upon submission
  s+= “SSID : <input type=“text” value=”";
  s+= “” name=“ssidname” size=“20” maxlength=“16”  />
“;
  s+= “Password : <input type=“text” value=””;
  s+= “” name=“password” size=“20” maxlength=“16”  />
";
  s+= “<input type=“submit” value=“Save”>”;
  s+= "

DATA FROM SENSORS

Google

"  “

Temperature sensor 

“;
  s+= “
”” celcius

LUX sensor 

“” LUX
”;
  s+=htmlclose;

server.send(200, “text/html”, s);  // send 200 == OK see HTTP/1.1: Status Code Definitions     
}

void handleWifiSave() {
  String ssid,pass;
  if (server.hasArg(“ssidname”)) {
    ssid=server.arg(“ssidname”);
  }
  if (server.hasArg(“password”)) {
    pass=server.arg(“password”);
  }          // now you have tose fields as a ‘String’ you’ll need to convert them to char* since server.connect takes that as arguments

String s;
  s+=pageheader;
  s+=htmlhead;
  s+=bodystyle;
  s+="SSID : “;
  s+=ssid;
  s+=”
Password : “;
  s+=pass;
  s+=”

";   s+= "";   s+=htmlclose;    server.send(200, "text/html", s); } > ```

the ‘action’ can use relative url. the html page is from same host

s+="" is good

and why GET? ESP8266WebSever doesn’t have problem to parse form-urlencoded

Again same result on the browser.............................................................

sabishaw:
Again same result on the browser.............................................................

post the current version of the sketch

sure

#include <ESP8266WiFi.h>          //https://github.com/esp8266/Arduino
//needed for library
#include <DNSServer.h>
#include <ESP8266WebServer.h>
#include <WiFiClient.h>
  
const char 
  *pageheader = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">",
  *htmlhead = "<html><head><title>Your Title</title><meta http-equiv=\"Content-Type\" content=\"text/html;charset=utf-8\" /></head>",
  *bodystyle = "<body style=\"color: wheat; background-color: teal; font-size: 12pt; font-family: sans-serif;\">",

  *htmlclose = "</body></html>";

char  *username = "corph", *password = "corph@786";
String s; 

ESP8266WebServer server(80);

String page;
void setup() {
  Serial.begin(115200);
  WiFi.begin(username, password);
   while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print("->");
  }  

Serial.println(WiFi.localIP());
 
  server.begin();
  server.on( "/wifisave",handleWifiSave);
}

void loop() {

  server.handleClient();
}

void handleRoot() {
  String s;
  s+=pageheader;
  s+=htmlhead;
  s+=bodystyle;
  s+="<form method=\"get\" action=\"http://";
  s+=WiFi.localIP().toString();
  s+="/wifisave\" name=\"ssidnpass\">";  // here you put the distination of the form, the URL that will be requested upon submission
  s+= "<b>SSID</b> : <input type=\"text\" value=\"";
  s+= "\" name=\"ssidname\" size=\"20\" maxlength=\"16\"  />
";
  s+= "<b>Password</b> : <input type=\"text\" value=\"";
  s+= "\" name=\"password\" size=\"20\" maxlength=\"16\"  />
";
  s+= "<input type=\"submit\" value=\"Save\"></form>"; 
  s+= "<h1>DATA FROM SENSORS</h1><h3><a>Google</a> </h3><h5>"  "</h5><h3>Temperature sensor  </h3>";
  s+= "<h5>"" celcius</h5><h3>LUX sensor  </h3><h5>"" LUX</h5>";
  s+=htmlclose; 
 
  server.send(200, "text/html", s);  // send 200 == OK see https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html      
}

void handleWifiSave() {
  String ssid,pass;
  if (server.hasArg("ssidname")) {
    ssid=server.arg("ssidname");
  }
  if (server.hasArg("password")) {
    pass=server.arg("password");
  }           // now you have tose fields as a 'String' you'll need to convert them to char* since server.connect takes that as arguments

  String s;
  s+=pageheader;
  s+=htmlhead;
  s+=bodystyle;
  s+="<b>SSID</b> : ";
  s+=ssid;
  s+="
<b>Password : ";
  s+=pass;
  s+="
<form method=\"get\" action=\"http://";
  s+=WiFi.localIP().toString();
  s+="\" name=\"home\">"; 
  s+= "<input type=\"submit\" value=\"Home\"></form>"; 
  s+=htmlclose;  
  server.send(200, "text/html", s);
  handleRoot();
}

sabishaw:
Again same result on the browser…

not when i ran it on mine…
hey you replaced instead of added too !!!server.on( "/wifisave",handleWifiSave);
should be

  server.on( "/",handleRoot);
  server.on( "/wifisave",handleWifiSave);

well then the root has not function to call…

Juraj:
the ‘action’ can use relative url. the html page is from same host

s+="" is good

and why GET? ESP8266WebSever doesn’t have problem to parse form-urlencoded

It is an example of a form, you can send the form to any URL so including it fully in the form makes sense. The same for method ‘GET’ like this you can see the whole URL in the browser address.

Thanks Deva Rishi
it looks like it worked…
could you please tell me where in my code are the variables where my data is saved

sabishaw:
could you please tell me where in my code are the variables where my data is saved

Really !? well did you see these few lines ?

String ssid,pass;
  if (server.hasArg("ssidname")) {
    ssid=server.arg("ssidname");
  }
  if (server.hasArg("password")) {
    pass=server.arg("password");
  }           // now you have tose fields as a 'String' you'll need to convert them to char* since server.connect takes that as arguments

the comments should have given you a clue… You see them in the URL as well &ssidname=whatever,
this is where you extract them. If you use ‘POST’ as a method they won’t show up. The ESP doesn’t differentiate between the 2 methods for the rest very much.<input type=\"text\" value=\"\" name=\"ssidname\" size=\"20\" maxlength=\"16\"  /> this is the part of the form where the data is available for entry.

Really !? well did you see these few lines ?

Hold on.....I just figured that out when I dropped my last message here.....It just worked out for me.....Thanks to ya'all......I just dont even understand most part of my code ,for i found myself learning IOT by hit and trials and thats what I know about most people here........
Well I will got to my project and add this code to it.....thanks Deva_Rishi....

Dear Deva_Rishi
thanks for the code…
while I experiment with this code,it goes in a coll way but not after wifimanager is added to it…I simply cant browse the web page any more…
code is given at the end,…could someone please suggest the possible bug and solution to it…
thanks

#include <ESP8266WiFi.h>          //https://github.com/esp8266/Arduino
//needed for library
#include <DNSServer.h>
#include <ESP8266WebServer.h>
#include <WiFiManager.h>         //https://github.com/tzapu/WiFiManager
#include <Wire.h>
#include <SparkFunTSL2561.h> // library for luminosity sensor
#include <SPI.h>
#include "cactus_io_BME280_SPI.h"
#include <WiFiClient.h>
#include <OneWire.h>
#include <DallasTemperature.h>  // library for temperature sensor

#define sleepTime 180

String API_KEY ="HG509EGZ1VR7RE18";
 
// assign the SPI bus to pins
#define BME_SCK D0
#define BME_MISO D7
#define BME_MOSI D6
#define BME_CS D5

const char 
  *pageheader = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">",
  *htmlhead = "<html><head><title>Your Title</title><meta http-equiv=\"Content-Type\" content=\"text/html;charset=utf-8\" /></head>",
  *bodystyle = "<body style=\"color: wheat; background-color: teal; font-size: 12pt; font-family: sans-serif;\">",
  *htmlclose = "</body></html>";
//#define SEALEVELPRESSURE_HPA (1013.25)

// Create the BME280 object
//BME280_SPI bme(BME_CS,BME_MOSI,BME_MISO,BME_SCK);    // software SPI

double   humidity, pressure,altitude,ambient_temperature;

#define common_power 3 
//temp related info

int temperature_pin = D4; // often dosent work if pin is otherthan D3 or D4..........

OneWire oneWire(temperature_pin);

DallasTemperature sensors(&oneWire);

double Celcius = 0.00;

//moisture sensor related info

int moisture_pin = A0;

int moisture_reading;

// luminosity related info

//create object  LUX

SFE_TSL2561 LUX;

double lux_value;

//following three are parameters for function getTiming

//and have these particular datatypes with few predefined values

//which have their already meant purpose                       SDA=> D2.   SCL=> D1

unsigned char timer = 2;

unsigned int ms;

boolean sensitivity;
//username and password for net connection,which esp shall search for

char  *username = "SDAF", *password = "A123456d@";



//80=http

ESP8266WebServer server(80);

String page;

void setup() {

  // put your setup code here, to run once:
//    WiFi.mode(WIFI_STA);
//  wifi_set_sleep_type(LIGHT_SLEEP_T);

  Serial.begin(115200);

  WiFiManager wifiManager;
  
  wifiManager.autoConnect("Device CorpH");

  pinMode(moisture_pin, INPUT);

//  pinMode(common_power, OUTPUT);
  
  WiFi.begin(username, password);

// ds18b20 must be taken in parasitic mode or pull up resistor should be defined

//observed: it works if none of the  above is done,...but some narrate it gets hot if not done so

//no proceeding till wifi connection is established
//
//  while (WiFi.status() != WL_CONNECTED) {
//
//    delay(500);
//
//    Serial.print("->");
//
//  }


  Serial.println("\nConnected to Wifi \nAll info shall be on the website");

  Serial.println("connected to");

  Serial.println(username);

  Serial.println("IP ADDRESS");

//IP should be noted and followed in browser

  Serial.println(WiFi.localIP());

//creating an html web page, also sendind data to it.....(gets executed after  "server.handleClient();" ststement in loop)

  server.begin();
  server.on("/",handleRoot);
  server.on("/wifisave",handleWifiSave);

//  if (!bme.begin()) {
//    Serial.println("Could not find a valid BME280 sensor, check wiring!");
//    while (1);
//  }
//
//  bme.setTempCal(-1);
  
}

void loop() {
  digitalWrite(common_power,HIGH);
  delay(20);

  // put your main code here, to run repeatedly:

// calling functions to collect data

  moisture();

  temperature();
 
  lux();

//  BME();
  
 

// sending data to thingspeak

  sendData( lux_value, Celcius,moisture_reading,ambient_temperature,pressure,humidity);

  digitalWrite(common_power,LOW);

   server.handleClient();

// taking a nap to save battries
  
  delay(1000 );
  
//  ESP.deepSleep(2*1000000);

}

//functions for particular sensor

void moisture() {
  
  delay(10);
  
  moisture_reading = analogRead(moisture_pin);

//changing voltage (data) form sensor to percentage

  moisture_reading = map(moisture_reading, 1024, 0, 0, 100);

  Serial.println("moisture");

  Serial.println(moisture_reading);
  
  
}

void temperature() {
   

  delay(10);
  
  sensors.begin();

  sensors.requestTemperatures();

  Celcius = sensors.getTempCByIndex(0);
  Serial.println("Celcius");

  Serial.println(Celcius);
}

//void BME(){
//  
// bme.readSensor();
//  
//    Serial.print(bme.getPressure_MB()); Serial.print("\t\t");    // Pressure in millibars
//   
//    Serial.print(bme.getHumidity()); Serial.print("\t\t");
//   
//    Serial.print(bme.getTemperature_C()); Serial.print(" *C\t");
//    
//    Serial.print(bme.getTemperature_F()); Serial.println(" *F\t");
//
//   
//    
//    humidity=bme.getHumidity();
//
//    pressure=bme.getPressure_MB();
//
//    ambient_temperature=bme.getTemperature_C();
//}

void lux() {

  delay(10);
  
  LUX.begin();

  LUX.setTiming(sensitivity, timer, ms);

  LUX.setPowerUp();

  unsigned int data1, data2;

  LUX.getData(data1, data2);

  // data1 and data2 corresponds to data of lingt and infrared rays,

  //passing them to following function, unaltered, gives luminosity 

  LUX.getLux(sensitivity, ms, data1, data2, lux_value);   // this function is of boolean type
  
  Serial.println("lux_value");

  Serial.println(lux_value);
  
 
}

void sendData(double lux,double Temperature,double moisture,double ambient_temperature,double pressure, double humidity) {  
   
   WiFiClient client;
  
   if (client.connect("api.thingspeak.com", 80)) { // use ip 184.106.153.149 or api.thingspeak.com
      
       Serial.println("WiFi Client connected ");
       
       String postStr = API_KEY;
      
       postStr += "&field1=";
       postStr += String(lux);
       postStr += "&field2=";
       postStr += String(Temperature);
       postStr += "&field3=";
       postStr += String(moisture);
       postStr += "&field4=";
       postStr += String( humidity);
       postStr += "&field5=";
       postStr += String(pressure);
       postStr += "&field6=";
       postStr += String(ambient_temperature);
       postStr += "\r\n\r\n";
       
       client.print("POST /update HTTP/1.1\n");
       client.print("Host: api.thingspeak.com\n");
       client.print("Connection: close\n");
       client.print("X-THINGSPEAKAPIKEY: " + API_KEY + "\n");
       client.print("Content-Type: application/x-www-form-urlencoded\n");
       client.print("Content-Length: ");
       client.print(postStr.length());
       client.print("\n\n");
       client.print(postStr);
       delay(1000);
   }
}
void handleRoot() {
  String s;
  s+=pageheader;
  s+=htmlhead;
  s+=bodystyle;
  s+="<form method=\"get\" action=\"http://";
  s+=WiFi.localIP().toString();
  s+="/wifisave\" name=\"ssidnpass\">";  // here you put the distination of the form, the URL that will be requested upon submission
  s+= "<b>API_KEY</b> : <input type=\"text\" value=\"";
  s+= "\" name=\"API_KEY\" size=\"50\" maxlength=\"160\"  />
";
  s+= "<input type=\"submit\" value=\"Save\"></form>"; 
  s+=htmlclose; 
  server.send(200, "text/html", s);  // send 200 == OK see https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html      
}

void handleWifiSave() {
  
  if (server.hasArg("API_KEY")) {
    API_KEY=server.arg("API_KEY");
  }
  String s;
  s+=pageheader;
  s+=htmlhead;
  s+=bodystyle;
  s+="<b>API_KEY</b> : ";
  s+=API_KEY;
  s+="
<form method=\"get\" action=\"http://";
  s+=WiFi.localIP().toString();
  s+="\" name=\"home\">"; 
  s+= "<input type=\"submit\" value=\"Home\"></form>"; 
  s+=htmlclose;  
  server.send(200, "text/html", s);
  handleRoot();
}

remove WiFi.begin(username, password); if you use WiFiManager