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()

Answer 1

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}}\\">"; 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.