Retriveing URL/href from webserver to ESP8266 (to process it)

Question

I've made a HTML form consisting of 2 dropdowns with multiple choices and 4 input boxes, when I fill in all the inputs and press submit, all of the data shows in the URL. The problem is, I want to process the content of the URL in the ESP8266 (in c++) by using String.replace(); and then finally sending it back to the webserver processed.

I only need help getting the URL to a string in C++, since I know how to do the rest.

I've looked around, and for this simple question I'm quite suprised that I didnt really find that much. However, I found Server.arg(), but I have no idea how to use it.


C++ page:


#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <WiFiClient.h>
#include "PageBuilder.h"
#include "newGame.h"

int x = 0; 
int y = 10;
String score="test";
String score2="test2";
String refresh = "5";


#if defined(ARDUINO_ARCH_ESP8266)
ESP8266WebServer Server;
ESP8266WebServer  server;
#endif

String scoreSend(PageArgument& args) { 
  return score;
}
String scoreSend2(PageArgument& args) { 
  return score2;
}
const char html[] = "<div class=\"jumbotron\"><div align=\"center\"><h1 class=\"display-4\" style=\"font-family: zetafonts-cinematografica-extrabold; font-size: 30px;\" >{{SCORE}} {{SCORE2}} </h1></div></div>";


String rate(PageArgument& args) { 
  return refresh;
}

const char rfs[] = "<meta http-equiv=\"refresh\" content=\"{{REFRESH}}\">";

PageElement refresh_elm(rfs, { {"REFRESH", rate} });
PageElement body_elem(html, { {"SCORE", scoreSend} });
PageElement Score_2(html, { {"SCORE2", scoreSend2} });
PageElement CURRENT_GAME_ELEMENT(htmlPage2);
PageBuilder CURRENT_GAME("/current-game", { CURRENT_GAME_ELEMENT, body_elem, Score_2, refresh_elm});

PageElement NEW_GAME_ELEMENT(htmlPage3);
PageBuilder NEW_GAME("/new-game", {NEW_GAME_ELEMENT});

void setup() {
  Serial.begin(115200);
  pinMode(2, INPUT);
  WiFi.softAP("ssid", "pass");
  delay(100);       
  CURRENT_GAME.insert(Server);     
  NEW_GAME.insert(Server);        
  Server.begin();
}

void loop() {
Server.handleClient();
}


Html page:

const char htmlPage3[] PROGMEM = R"=====(

<form id="what-team">
            <div class="form-row">

            <div class="col" style="float: left; padding-left: 5%;">
            <label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
            <select name="team1-playing-as" form="what-team" class="custom-select mr-sm-2" id="inlineFormCustomSelect" style="width:700px;height:50px;">
            <option selected="">Choose Team</option>                    
            <option value="manchester-united">Manchester United</option>
            <option value="liverpool">Liverpool</option>
            <option value="fc-barcelona">FC-Barcelona</option>
            </select>
            <div class="form-group">
            <input type="Name" class="form-control" name="player1" value="" placeholder=" Player 1" style="width:700px;height:50px;">
            <input type="Name" class="form-control" name="player2" value="" placeholder=" Player 2" style="width:700px;height:50px;">
            </div>
            </div>

            <div class="col" style="float: right; padding-left: 5%;">
            <label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label> 
            <select name="team2-playing-as" form="what-team" class="custom-select mr-sm-2" id="inlineFormCustomSelect" style="width:700px;height:50px;">
            <option selected="">Choose Team</option>
            <option value="manchester-united">Manchester United</option>
            <option value="liverpool">Liverpool</option>
            <option value="fc-barcelona">FC-Barcelona</option>
            </select>
            <div class="form-group">
            <input type="Name" class="form-control" name="player1" value="" placeholder=" Player 1" style="width:700px;height:50px; text-align: right;">
            <input type="text" class="form-control" name="player2" value="" placeholder=" Player 2" style="width:700px;height:50px; text-align: right;">
            </div>
            </div>
            </div>

           <div style="padding-top: 50px; padding-left: 10%; padding-right: 10%; float: center;">
           <input type="submit" value="Start" class="btn btn-primary btn-lg btn-block">
           </div>

           </form>

)=====";

This is the URL I get when I fill in the form and press the submit button. "192.168.0.1/new-game?team1-playing-as=manchester-united&player1=John&player2=Doe&team2-playing-as=liverpool&player1=Doe&player2=John "

In short what I want to do is I want to turn that^ href into a string

Edit/Update:

I found some ways to do it, However the first only returns the href its getting compared to, same functionality as server.hasarg(), the latter only returns the href of the element,basicly, both only return /new-game?. Unfortunatly I want what comes after /new-game?.

bool func(HTTPMethod method, String uri) {
  if (uri == "/new-game") {
  Serial.println(uri);
  return true;
  } else {
    Serial.println(uri);
    return false;
  }
}
const char* data = NEW_GAME.uri()

the web server receives the request and parses the url for you. see the SimpleAuthentication example of the ESP8266WebServer library — Juraj
can you elaborate abit more? what should I look for in the simpleauth. e.g? — CPlusPlusandHTMLguy
I found a alternative way in the Library pagehandler with bool func(HTTPMethod method, String uri) { im still testing it out though. but I had an Idea.. is it possible to save/buffer the input from the form to a token and then return that to a string? — CPlusPlusandHTMLguy
you should look how the form submit is handled in handleLogin by reading the url parameters with server.arg(paramname) — Juraj
yeah I see.. but, I'm not sure if thats going to work the way I want because the value of the form inputs is not constant, the server I'm making will be used by multiple people and I need to get the value of the form inputs, not check if they match with something.. E.g, if I have a friend visiting and I want to have a game with him, I want him to enter his name, or something, and me to enter my name. then choose team. On the Teams, sure making alot of if's to check what team is chosen is not a problem, but I'll never know what my friend will call himself, thus I cant compare it to something.. — CPlusPlusandHTMLguy

CPlusPlusandHTMLguy CPlusPlusandHTMLguy · Accepted Answer · 2019-09-18T10:22:30

This is what I did to retrive the data from the form:


int h = 1;
void handleForm() {

  String team1Team = Server.arg("team1-playing-as");
  String team1P1   = Server.arg("player1");
  String team1P2   = Server.arg("player2");
  String team2Team = Server.arg("team2-playing-as");
  String team2P3   = Server.arg("player3");
  String team2P4   = Server.arg("player4");

    if ((Server.args() == 6) && ( h == 1)) {
    Serial.println("Team 1: " + team1Team);
    Serial.println("Player 1: " + team1P1);
    Serial.println("player 2: " + team1P2);
    Serial.println("Team 2: " + team2Team);
    Serial.println("Player 3: " + team2P3);
    Serial.println("Player 4: " + team2P4);
    delay(1000);
    h = 0;
    //-------------------this is where I want to redirect from /new-game to /current-game
    }
    if ((Server.args() == 0) && ( h == 0)) {
      h = 1;
    }
}

I mananged to redirect the website by doing this: const char rDIR[] = "<meta http-equiv=\"Refresh\" content=\"0; url={{rDir}}\">"; and then replacing the {{rDIR}} with /current-game when this was true: if ((Server.args() == 6) && ( h == 1))

However, The data from the form inputs I saved in strings right, when I try to approach with the same method (which should work) the string is empty.. this is really weird because its only with the strings defined like this: String team1P1 = Server.arg("player1"); that does not return its value to the token.

Retriveing URL/href from webserver to ESP8266 (to process it)

1 Answers