Problem in get method of HTML

Hi
I have written a web server by html and css for esp8266.
I have some button in web server and I use get method in my code.
In arduino i say that when it see the name of my button ,print okk .
That is here:
sajad ghorbani:
if(str.IndexOf(“Turn+On”)>0)
{
cilent.print(“Okkk”}
}

But the web server sends me ok every time i refresh the browser and every time i push all of the buttob.
But I want to set the command on a specific button not all of them.

I mean each Button has its own command.
my HTML code is here:


HTML CODE

<!DOCTYPE html>
<html>

<head>
<style>
body {
 font-family: "Lato", sans-serif;
}
/* Style the tab */

div.tab {
 overflow: hidden;
 border: 1px solid #ccc;
 background-color: #f1f1f1;
}
/* Style the buttons inside the tab */

div.tab button {
 background-color: inherit;
 float: left;
 border: none;
 outline: none;
 cursor: pointer;
 padding: 14px 16px;
 transition: 0.3s;
 font-size: 17px;
}
/* Change background color of buttons on hover */

div.tab button:hover {
 background-color: #ddd;
}
/* Create an active/current tablink class */

div.tab button.active {
 background-color: #ccc;
}
/* Style the tab content */

.tabcontent {
 display: none;
 padding: 6px 12px;
 border: 1px solid #000000;
 border-top: none;
}

.button {
 position: relative;
 background-color: #C0C0C0;
 border: none;
 font-size: 28px;
 color: #FFFFFF;
 padding: 20px;
 width: 200px;
 text-align: center;
 -webkit-transition-duration: 0.4s;
 /* Safari */
 transition-duration: 0.4s;
 text-decoration: none;
 overflow: hidden;
 cursor: pointer;
}

.button:after {
 content: "";
 background: #90EE90;
 display: block;
 position: absolute;
 padding-top: 300%;
 padding-left: 350%;
 margin-left: -20px!important;
 margin-top: -120%;
 opacity: 0;
 transition: all 0.8s
}

.button:active:after {
 padding: 0;
 margin: 0;
 opacity: 1;
 transition: 0s
}

body,
html {
 height: 100%;
 margin: 0;
}

.bg {
 /* The image used */
 background-image: url("http://free4kwallpaper.com/wp-content/uploads/2016/01/New-Age-4K-Abstract-Wallpapers.jpg");
 /* Full height */
 height: 100%;
 /* Center and scale the image nicely */
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}
</style>

</head>

<body>


<div class="tab bg">
<button class="tablinks" onclick="Tools(event, 'Lights')">Lights</button>
<button class="tablinks" onclick="Tools(event, 'Digital')">Digital</button>
<button class="tablinks" onclick="Tools(event, 'Kitchen')">Kitchen</button>
</div>





<div id="Lights" class="tabcontent bg">
<div class="tab">
 <button class="tablinks" onclick="Tools(event, 'Bedroom1')">Bedroom1</button>
</div>

<div class="tab">
 <button class="tablinks" onclick="Tools(event, 'Bedroom2')">Bedroom2</button>
</div>

<div class="tab">
<button class="tablinks" onclick="Tools(event, 'Hall')">Hall</button>
</div>

<div class="tab">
<button class="tablinks" onclick="Tools(event, 'Kitchen1')">Kitchen1</button>
</div>

</div>
<div id="Bedroom1" class="tabcontent bg">
<form>
 Turn On:

 <input class="button" type="submit" name="Turn On" value="B1Turn On">
 
 Turn Off:

 <input class="button" type="submit" name="Turn Off" value="B1Turn Off">
</form>
</div>
<div id="Bedroom2" class="tabcontent bg">
<form>
 Turn On:

 <input class="button" type="submit" name="Turn On" value="B2Turn On">
 
 Turn Off:

 <input class="button" type="submit" name="Turn Off" value="B2Turn Off">
</form>
</div>

<div id="Hall" class="tabcontent bg">
<form>
 Turn On:

 <input class="button" type="submit" name="Turn On" value="HTurn On">
 
 Turn Off:

 <input class="button" type="submit" name="Turn Off" value="HTurn Off">
</form>
</div>

<div id="Kitchen1" class="tabcontent bg">
<form>
 Turn On:

 <input class="button" type="submit" name="Turn On" value="KTurn On">
 
 Turn Off:

 <input class="button" type="submit" name="Turn Off" value="KTurn Off">
</form>
</div>


<div id="Digital" class="tabcontent bg">
<div class="tab">
 <button class="tablinks" onclick="Tools(event, 'TV')">TV</button>
</div>

<div class="tab">
 <button class="tablinks" onclick="Tools(event, 'Splitter')">Splitter</button>
</div>


</div>
<div id="TV" class="tabcontent bg">
<form>
 Turn On:

 <input class="button" type="submit" name="Turn On" value="TTurn On">
 
 Turn Off:

 <input class="button" type="submit" name="Turn Off" value="TTurn Off">
</form>
</div>
<div id="Splitter" class="tabcontent bg">
<form>
 Turn On:

 <input class="button" type="submit" name="Turn On" value="STurn On">
 
 Turn Off:

 <input class="button" type="submit" name="Turn Off" value="STurn Off">
</form>
</div>







<div id="Kitchen" class="tabcontent bg">
<div class="tab">
 <button class="tablinks" onclick="Tools(event, 'Microvawe')">Microvawe</button>
</div>

<div class="tab">
 <button class="tablinks" onclick="Tools(event, 'Refrigerator')">Refrigerator</button>
</div>


</div>
<div id="Microvawe" class="tabcontent bg">
<form>
 Turn On:

 <input class="button" type="submit" name="Turn On" value="MTurn On">
 
 Turn Off:

 <input class="button" type="submit" name="Turn Off" value="MTurn Off">
</form>
</div>
<div id="Refrigerator" class="tabcontent bg">
<form>
 Turn On:

 <input class="button" type="submit" name="Turn On" value="RTurn On">
 
 Turn Off:

 <input class="button" type="submit" name="Turn Off" value="RTurn Off">
</form>
</div>






<script>
function Tools(evt, cityName) {
 var i, tabcontent, tablinks;
 tabcontent = document.getElementsByClassName("tabcontent");
 for (i = 0; i < tabcontent.length; i++) {
   tabcontent[i].style.display = "none";
 }
 tablinks = document.getElementsByClassName("tablinks");
 for (i = 0; i < tablinks.length; i++) {
   tablinks[i].className = tablinks[i].className.replace(" active", "");
 }
 document.getElementById(cityName).style.display = "block";
 evt.currentTarget.className += " active";
}
</script>

</body>

</html>

Please add code [/] tags, and post the complete sketch as it runs. Stripping the html code to the minimum to demonstrate the problem would also be very helpful.

This is my sketch but instead the html code in this code I want that Html code in my first post

#include <ESP8266WiFi.h>

const char* ssid = "********";
const char* password = "********";

WiFiServer server(80);

void setup() {

 Serial.begin(115200);
 delay(10);

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

 WiFi.begin(ssid, password);

 while (WiFi.status() != WL_CONNECTED) {
   delay(500);
   Serial.print(".");
 }
 Serial.println("");
 Serial.println("WiFi connected");

 server.begin();
 Serial.println("Server started");

 Serial.println(WiFi.localIP());
}

void loop() {

 WiFiClient client = server.available();
 if (!client) {
   return;
 }

 Serial.println("new client");
 while (!client.available()) {
   delay(1);
 }

 String req = client.readStringUntil('\r');
 Serial.println(req);
 client.flush();
 String s;
 
s+= "<!DOCTYPE html>";
s+= "<html>";
s+=   "<body>";
s+=     "<h1>My First Heading</h1>";
s+=     "<p>My first paragraph.</p>";
s+=   "</body>";
s+=  "</html>";

 client.print(s);
 delay(1);
 Serial.println("Client disconnected");
}

Please edit your posts and add code [/] tags.

It makes your code much more readable!

OK

I modified that

html: submit sends all values of a form. create a separate form for every button (it's not a preferred way, just a simplest)

arduino http server: the http response must have status and headers, then empty line and then the content. from my sketch

void handleRestServer() {
  WiFiClient client = restServer.available();
  if (!client)
    return;
  if (client.status() == ESTABLISHED && available(client)) {
    String s = client.readStringUntil('\n');
    client.println(F("HTTP/1.1 200 OK"));
    client.println(F("Content-Type: application/json"));
    client.println(F("Connection: close"));
    client.println(F("Cache-Control: no-store"));
    client.println(F("Access-Control-Allow-Origin: *"));
    client.println();
    if (s.indexOf("events.json") != -1) {
      printEventsJson(client);
    } else if (s.indexOf("alarm.json") != -1) {
      printAlarmJson(client);
    } else if (s.indexOf("pumpAlarmReset") != -1) {
      pumpAlarmReset();
    } else if (s.indexOf("index.json") != -1) {
      printValuesJson(client);
    }
    client.flush();
  }
  client.stop();
}

I handle a button with java script

    resetButton.onclick = function() {
      var xhr = new XMLHttpRequest();
      xhr.onload = function(e) {
        alert("Executed");
      };
      xhr.open("GET", "/pumpAlarmReset", true);
      xhr.send();
    }

Hi

I have written very very simple web server That I every time click on button the web server gives me the text “Clicked”

I want to know How can I give this “Clicked” Text and send It to my ESP module.

<!DOCTYPE html>
<html>
<body>

<button id="myBtn">Try it</button>

<p id="demo"></p>

<script>
document.getElementById("myBtn").onclick = function(){displayDate()};

function displayDate() {
    document.getElementById("demo").innerHTML = "Clicked";
}
</script>

</body>
</html>

I posted an example for you in your previous thread https://forum.arduino.cc/index.php?topic=493777.msg3368954#msg3368954

Thanks

But Does the esp response to alert??

I donk know that

If yes That is great

and another question should I copy the code that you give me in the last thread in my sketch
??

I mean in your example when you click on the button It gives you alert

How can I use this alert to send It to my module??

it's not about Arduino

onload is triggered when the response from webserver is received. you put there your code for presenting the result. the reponse is in xhr.response

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

where should I put your javascript code in my code??

JavaScript tutorial

Here's a complete example of a web interface with buttons that send the button states to the ESP8266 and turns on/off the respective output pins.

One variant uses asynchronous HTTP requests (XHR/AJAX), and the other one uses WebSockets.

The ESP8266 code is in the .ino and .hpp files; the HTML, JavaScript and CSS code is in the data folder. There's also a file called WiFi-Credentials.example.h. Rename it to WiFi-Credentials.h and add your WiFi SSID and password. You have to upload all data files to the ESP8266 using Tools > ESP8266 sketch data upload. A lot of information can be found here: https://tttapa.github.io/ESP8266/Chap11 - SPIFFS.html

https://github.com/tttapa/Projects/tree/master/ESP8266/Control Panel

Pieter