The Arduino sketch for this solution: eth_websrv_LED2.zip
This code is a hack from some previous code that I wrote and so does not look exactly like the code from the sketch that the question is related to.
The idea is to send the status of the switch (either ON or OFF) as well as the button HTML code with text color to the web browser. This is done every time that the that an Ajax call is made. An initial Ajax call is made when the page loads. Additional Ajax calls are made every time the button on the web page is clicked. In other words the status of the switch is displayed on the web page the first time that the web page is loaded and then every time that the button on the web page is clicked. The button text will be colored red when the switch is open and colored green when the switch is closed.
<p id="switch_txt">Switch state: Not requested...</p>
The div could have been left empty as everything in the div will be replaced after the Ajax call.
In the Arduino sketch, the Arduino responds to the Ajax call from the web page by sending the button status text and the button with color information. This is done in the Arduino sketches’ GetSwitchState() function. This function checks the state of the interfaced push-button switch and responds as follows:
If the switch is open, it sends OFF paragraph text and red button text: cl.println("<p>Switch state: OFF</p><button type=\"button\" style=\"color: red;\" onclick=\"GetSwitchState()\">Get Switch State</button>");
The above line of Arduino code sends these lines of HTML with CSS to color the button text red: <p>Switch state: OFF</p>
<button type="button" style="color: red;" onclick="GetSwitchState()">Get Switch State</button>");
If the switch is closed, this line of Arduino code is run: cl.println("<p>Switch state: ON</p><button type=\"button\" style=\"color: green;\" onclick=\"GetSwitchState()\">Get Switch State</button>");
which sends this HTML with CSS code to color the button text green: <p>Switch state: ON</p>
<button type="button" style="color: green;" onclick="GetSwitchState()">Get Switch State</button>");
The Arduino can produce web pages from within the Arduino sketch or host web pages that are stored on the SD card (there is a micro SD card socket on the Arduino Ethernet shield). These web pages can be configured to control and monitor hardware from a web browser on any Ethernet network that the Arduino is connected to.
This multi-part tutorial explains how to use the Arduino as a web server step-by-step. The tutorial starts with the basics and then introduces the technologies needed by using easy to understand practical examples.
Part 4: Arduino SD Card Web Server – the Arduino / Ethernet shield hosts a web page that is stored on a micro SD card. The Ethernet shield contains a micro SD card socket for connecting the SD card to the system.
Part 10: Arduino SD Card Web Server – Linking Pages – a web page hosted on the SD card of the Arduino web server contains a link to a second page on the SD card. The Arduino sketch determines which page is requested by the web browser and then sends the correct page.