Форма ввода на HTML-странице

Amarok

✩✩✩✩✩✩✩
2 Окт 2019
25
0
И вновь я с глупым вопросом:
Создал web-страницу с двумя текстовыми полями:
C++:
void webPage4Config() {
  webPageConfig  = webPageHEADER;
  webPageConfig += "<title>Cool Device</title></head><body><center>";
  webPageConfig += "<form method=\"POST\" action=\"\">Device name: <input type=\"text\" name=\"device_name\"><br>";
  webPageConfig += "Device 2nd name: <input type=\"text\" name=\"device_name2\"><br>";
  webPageConfig += "<input type=\"submit\" name=\"action\" value=\"Submit\"></form>";
  webPageConfig += "</center></body></html>";
}
photo_2019-12-11_19-45-25.jpg
А как по нажатию кнопки Submit передать значения полей в скетч и вывести через Serial.print?
 

Александр Симонов

★★★★✩✩✩
2 Авг 2018
727
207
И вновь я с глупым вопросом:
Создал web-страницу с двумя текстовыми полями:
C++:
void webPage4Config() {
  webPageConfig  = webPageHEADER;
  webPageConfig += "<title>Cool Device</title></head><body><center>";
  webPageConfig += "<form method=\"POST\" action=\"\">Device name: <input type=\"text\" name=\"device_name\"><br>";
  webPageConfig += "Device 2nd name: <input type=\"text\" name=\"device_name2\"><br>";
  webPageConfig += "<input type=\"submit\" name=\"action\" value=\"Submit\"></form>";
  webPageConfig += "</center></body></html>";
}
Посмотреть вложение 6552
А как по нажатию кнопки Submit передать значения полей в скетч и вывести через Serial.print?
Ищи доки, примеры или гайд по классу ESP8266WebServer
 
  • Лойс +1
Реакции: Amarok

MikeChuv

✩✩✩✩✩✩✩
29 Дек 2019
5
2
Нужно именно по нажатию кнопки передавать или просто поля ввода и передача по нажатию enter(для каждого поля)?
 

MikeChuv

✩✩✩✩✩✩✩
29 Дек 2019
5
2
Так как все три объекта находятся в теге form, то любое изменение(enter в самом поле ввода или нажатие конпки) будет передавать значения
Поэтому можно сделать так

Это должно быть в файле index.h(в нем будет содержаться строка с html-текстом):
C++:
const char MAIN_page[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>Cool Device</title>
</head>
<body>
<center>
<form method="POST" action="/FORM"> Device name: <input type="text" name="device_name"><br>
Device 2nd name: <input type="text" name="device_name2"><br>
<input type="submit" name="action" value="Submit"></form>
</center>
</body>
</html>
)=====";
Ну и сам скетч:


C++:
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include "index.h"


const char* ssid = "ssid";//требуется записать имя точки доступа, к которой будет произведено подключение
const char* password =  "password "//введение пароля точки доступа, который должен содержать не менее восьми символов


ESP8266WebServer server(80);

void setup() {
  pinMode(LED_BUILTIN,OUTPUT);
  Serial.begin(115200);
  delay(100);

  Serial.println("Connecting to ");
  Serial.println(ssid);

  //connect to your local wi-fi network
  WiFi.begin(ssid, password);

  //check wi-fi is connected to wi-fi network
  while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected..!");
  Serial.print("Got IP: ");  Serial.println(WiFi.localIP());

  server.begin();
  server.on("/", HTTP_GET, handleRoot);      //Which routine to handle at root location. This is display page
  server.on("/FORM", HTTP_POST, handleFORM); //as Per  <a href="ledOn">, Subroutine to be called
  server.onNotFound(handleNotFound);
  Serial.println("HTTP server started");
}
void loop() {
  server.handleClient();
}


void handleRoot() {
Serial.println("You called root page");
String s = MAIN_page;
server.send(200, "text/html", s);
}


void handleFORM() {
Serial.println("FORM on page");
digitalWrite(LED_BUILTIN,!digitalRead(LED_BUILTIN));
String message = "";
  message += server.args();
  message += "\n";
  for (uint8_t i = 0; i < server.args(); i++) {
    message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
  }
  Serial.println(message);
server.sendHeader("Location","/");
server.send(303);
}


void handleNotFound() {
  digitalWrite(LED_BUILTIN, 1);
  String message = "File Not Found\n\n";
  message += "URI: ";
  message += server.uri();
  message += "\nMethod: ";
  message += (server.method() == HTTP_GET) ? "GET" : "POST";
  message += "\nArguments: ";
  message += server.args();
  message += "\n";
  for (uint8_t i = 0; i < server.args(); i++) {
    message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
  }
  server.send(404, "text/plain", message);
  digitalWrite(LED_BUILTIN, 0);
}

Внутри handleFORM() есть вызов метода server.arg(), который по нужному индексу (i) и вернет строку с содержимым полей
network.jpg
COM10 29.12.2019 16_25_40.png
 
Изменено:
  • Лойс +1
Реакции: Amarok