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

Amarok · 11 Дек 2019

И вновь я с глупым вопросом:
Создал 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>";
}

А как по нажатию кнопки Submit передать значения полей в скетч и вывести через Serial.print?

Александр Симонов · 12 Дек 2019

Amarok написал(а):
И вновь я с глупым вопросом:
Создал 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

MikeChuv · 29 Дек 2019

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

Amarok · 29 Дек 2019

Можно оба варианта

MikeChuv · 29 Дек 2019

Так как все три объекта находятся в теге 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) и вернет строку с содержимым полей

Поиск

Поиск

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

Amarok

✩✩✩✩✩✩✩

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

★★★★✩✩✩

MikeChuv

✩✩✩✩✩✩✩

Amarok

✩✩✩✩✩✩✩

MikeChuv

✩✩✩✩✩✩✩