[SOLVED] Trouble with HTTP GET

[RudolfAtRTC]

I'm working on a WEB server at a ESP32 to control a 3-color-LED.
- The color picker ("colorpicker") from HTML5 is working
- I can input a color with an input field named "selectedcolor"
- But no GET request is done when the button (named "button") is pressed!
- I do'nt use a form
Can I get help to find my mistake?

Code: [Select all] [Expand/Collapse]

1. /*======================================================================
2.     WEB-Server with NodeESP (ESP32) - Set colours for a 3-color-LED
3.     ----------------------------------------------------------------------
4.     Base:
5.   Rui Santos: Complete project details at http://randomnerdtutorials.com
6.     ----------------------------------------------------------------------
7.     Author: Rudolf Schenke (aus Basis Rui Santos)
8.     Stand: 10.12.2019
9.     ======================================================================*/
10.  
11. bool xDebug = true;     // Debug when true
12.  
13. #include <WiFi.h>               // Load Wi-Fi library
14.  
15. //---- WLAN-SSID and password - later from a file ----
16. const char* ssid     = "...";
17. const char* password = "....";
18.  
19. WiFiServer server(80);  // Set web server port number to 80
20.  
21. String header;  // Variable to store the HTTP request
22.  
23. // Auxiliar variables to store the current output state
24. String stateBlue = "Aus";
25. String stateGreen = "Aus";
26. String stateRed = "Aus";
27.  
28. // Assign output variables to GPIO pins
29. const int pinBlue = 0;
30. const int pinGreen = 2;
31. const int pinRed = 4;
32.  
33. void setup() {
34.  
35.   Serial.begin(115200);
36.     while(!Serial) delay(10);
37.     Serial.println("WEB-Server zum Ein-Ausschalten der 3-Farben-LED");
38.    
39.   // Initialize the output variables as outputs
40.   pinMode(pinBlue, OUTPUT);
41.   pinMode(pinGreen, OUTPUT);
42.   pinMode(pinRed, OUTPUT);
43.   // Set outputs to LOW
44.   digitalWrite(pinBlue, HIGH);
45.   digitalWrite(pinGreen, HIGH);
46.   digitalWrite(pinRed, HIGH);
47.  
48.   // Connect to Wi-Fi network with SSID and password
49.   Serial.print("Connecting to ");
50.   Serial.println(ssid);
51.   WiFi.begin(ssid, password);
52.   while (WiFi.status() != WL_CONNECTED) {
53.     delay(500);
54.     Serial.print(".");
55.   }
56.   // Print local IP address and start web server
57.   Serial.println("");
58.   Serial.println("WiFi connected.");
59.   Serial.println("IP address: ");
60.   Serial.println(WiFi.localIP());
61.   server.begin();
62. }
63.  
64. void loop(){
65.   WiFiClient client = server.available();   // Listen for incoming clients
66.  
67.   if (client) {                       // If a new client connects,
68.     Serial.println("New Client.");    // print a message out in the serial port
69.     String currentLine = "";          // make a String to hold incoming data from the client
70.     while (client.connected()) {      // loop while the client's connected
71.       if (client.available()) {       // if there's bytes to read from the client,
72.         char c = client.read();       // read a byte, then
73.         if (xDebug) Serial.write(c);    // print it out the serial monitor
74.         header += c;
75.         if (c == '\n')
76.                 { // if the byte is a newline character
77.           // if the current line is blank, you got two newline characters in a row.
78.           // that's the end of the client HTTP request, so send a response:
79.           if (currentLine.length() == 0)
80.                     {
81.             // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
82.             // and a content-type so the client knows what's coming, then a blank line:
83.             client.println("HTTP/1.1 200 OK");
84.             client.println("Content-type:text/html");
85.             client.println("Connection: close");
86.             client.println();
87.  
88.                         //---- Hier muss die Auswertung rein! ----
89.                         Serial.println("Auswertung fehlt!");
90.                        
91.             // Display the HTML web page
92.             client.println("<!DOCTYPE html><html>");
93.             client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
94.             client.println("<link rel=\"icon\" href=\"data:,\">");
95.                         client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}</style>");
96.             client.println("<title>HTML5 Color Picker Demonstration</title>");
97.  
98.             client.println("<script language=\"javascript\">var actColor; function newColor(color)");
99.             client.println("{ document.getElementById(\"selectedcolor\").value = color; ");
100.             client.println("actColor = color;");
101.             client.println("console.log(actColor); ");
102.             client.println("document.getElementById(\"button\").href=\"/\" + actColor + \"&\"; }");
103.                        
104.             client.println("function setColor(color)");
105.             client.println("{ document.getElementById(\"colorpicker\").value = color; ");
106.             client.println("actColor = color;");
107.             client.println("console.log(actColor); ");
108.             client.println("document.getElementById(\"button\").href=\"/\" + actColor + \"&\"; }");
109.            
110.             client.println("</script></head>");
111.  
112.             // Web Page Body
113.             client.println("<body><h1>NodeESP Web Server</h1>");
114.             client.println("<h2>Color Picker f&uuml;r 3-Farben-LED</h2>");
115.             //---- Form mit Farbpicker und Anzeige Farbwert ----
116.             client.println("<p>Farbe ausw&auml;hlen: ");
117.             client.println("<input id=\"colorpicker\" type=\"color\" ");
118.             client.println("onchange=\"newColor(colorpicker.value);\"></p>");
119.             client.println("<p>Ausgew&auml;hlt: <input id=\"selectedcolor\" type=\"text\" ");
120.             client.println("onchange=\"setColor(selectedcolor.value);\"></p>");
121.  
122.             client.println("<p><a href=\"#\" id=\"button\" role=\"button\">&Uuml;bernehmen</a></p>");
123.                        
124.             client.println("</body></html>");
125.            
126.             // The HTTP response ends with another blank line
127.             client.println();
128.             // Break out of the while loop
129.             break;
130.           }
131.                     else
132.                     { // if you got a newline, then clear currentLine
133.             currentLine = "";
134.           }
135.         }
136.                 else if (c != '\r')
137.                 {  // if you got anything else but a carriage return character,
138.           currentLine += c; // add it to the end of the currentLine
139.         }
140.       }
141.     }
142.     // Clear the header variable
143.     header = "";
144.     // Close the connection
145.     client.stop();
146.     Serial.println("Client disconnected.");
147.     Serial.println("--------------------");
148.   }
149. }

GeSHi © Codebox Plus Extension

[ESP_Sprite]

> - I do'nt use a form
(also, no JS to do AJAX, looking at your code)

Then why do you expect a GET request to be generated?

[RudolfAtRTC]

Yes - you are right! I have changed to a "form" and it works now. Learning by doing....