I am modifying a tutorial

I found a great tutorial for the Ethernet shield at Arduino AJAX Web Server for Reading a Switch Manually.

A lot of tutorials involve reading switches. I am trying to modify this tutorial to read 3 different variables stored in the sketch as int variables.

as an examples this function is great for switching switch states that the arduino reads in. How could it be modified where it would read in one of three different stored(in the sketch) int variables?

if (digitalRead(3)) {
cl.println("Switch state: ON");
}
else {
cl.println("Switch state: OFF");
}

I would also need to know how to incorporate this button type so I could see it on the web browser for the Ethernet shield.

client.println(
"<p id="switch_txt">Switch state: Not requested...

");
client.println("<button type="button"
onclick="GetSwitchState()">Get Switch State");

I posted this with a lot of information missing.

I found this tutorial

Arduino AJAX Web Server for Reading a Switch Manually.

Instead of reading switches on the arduino I want it to read 3 different variables(A,B and C) stored in the sketch and display them in a webpage that the ethernet shield shows.

I want to modify this function to set a ID so it can be accessed by each of 3 different buttons.

function:

void GetSwitchState(EthernetClient cl)
{
if (digitalRead(3)) {
cl.println("Switch state: ON");
}
else {
cl.println("Switch state: OFF");
}
}

buttons:

client.println(
"<p id="switch_txt">Switch state: Not requested...

");
client.println("<button type="button"
onclick="GetSwitchState()">Get Switch State");

I would have 3 different buttons for variables A,B, and C

This is a tough one to answer. You use phrases like "int variable" in a way that seems like you know what that means but the question is something that should be immediately obvious to a person with that knowledge. So obvious, that I don't perceive that there is a question.

What are these variables for? What part of the program changes them? What do you want the HTML page to look like?

(New post arrived while typing) A,B,C are really stupid names for variables. There's no limit on the length of the names. Give them meaningful names.

You have enough posts to have read the two posts by Nick Gammon at the top of this Forum on how to properly post source code listings. Please read them and use code tags when presenting code in a post.

A,B,C are really stupid names for variables

Hey, you stole the page from my book. I want it back!

I guess that does deserve a whole page in a book to explain why those are bad variable names.

MorganS:
I guess that does deserve a whole page in a book to explain why those are bad variable names.

His problems will start when he needs more than 26 variables!!!

Only in BASIC. We haven't even started on the lower-case letters and there's a few symbols that are valid names, like _.

Instead of reading switches on the arduino I want it to read 3 different variables(A,B and C) stored in the sketch and display them in a webpage that the ethernet shield shows.

Server test code that displays the analog value of the arduino pins.

// zoomkat's meta refresh data frame test page 5/25/13
// use http://192.168.1.102:84 in your brouser for main page
// http://192.168.1.102:84/data static data page
// http://192.168.1.102:84/datastart meta refresh data page
// for use with W5100 based ethernet shields
// set the refresh rate to 0 for fastest update
// use STOP for single data updates

#include <SPI.h>
#include <Ethernet.h>

const int analogInPin0 = A0;
const int analogInPin1 = A1;
const int analogInPin2 = A2;
const int analogInPin3 = A3;
const int analogInPin4 = A4;
const int analogInPin5 = A5;

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address
byte ip[] = { 192, 168, 1, 102 }; // arduino ip in lan
byte gateway[] = { 192, 168, 1, 1 }; // internet access via router
byte subnet[] = { 255, 255, 255, 0 }; //subnet mask
EthernetServer server(84); //server port
unsigned long int x=0; //set refresh counter to 0
String readString; 

//////////////////////

void setup(){
  Serial.begin(9600);
    // disable SD SPI if memory card in the uSD slot
  pinMode(4,OUTPUT);
  digitalWrite(4,HIGH);

  Ethernet.begin(mac, ip, gateway, gateway, subnet);
  server.begin();
  Serial.println("meta refresh data frame test 5/25/13"); // so I can keep track of what is loaded
}

void loop(){
  EthernetClient client = server.available();
  if (client) {
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
         if (readString.length() < 100) {
          readString += c; 
         } 
        //check if HTTP request has ended
        if (c == '\n') {

          //check get atring received
          Serial.println(readString);

          //output HTML data header
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println();

          //generate data page
          if(readString.indexOf("data") >0) {  //checks for "data" page
            x=x+1; //page upload counter
            client.print("<HTML><HEAD>");
            //meta-refresh page every 1 seconds if "datastart" page
            if(readString.indexOf("datastart") >0) client.print("<meta http-equiv='refresh' content='1'>"); 
            //meta-refresh 0 for fast data
            if(readString.indexOf("datafast") >0) client.print("<meta http-equiv='refresh' content='0'>"); 
            client.print("<title>Zoomkat's meta-refresh test</title></head><BODY>
");
            client.print("page refresh number: ");
            client.print(x); //current refresh count
            client.print("

");
            
              //output the value of each analog input pin
            client.print("analog input0 is: ");
            client.print(analogRead(analogInPin0));
            
            client.print("
analog input1 is: ");
            client.print(analogRead(analogInPin1));
                        
            client.print("
analog input2 is: ");
            client.print(analogRead(analogInPin2));
            
            client.print("
analog input3 is: ");
            client.print(analogRead(analogInPin3));
                                    
            client.print("
analog input4 is: ");
            client.print(analogRead(analogInPin4));
            
            client.print("
analog input5 is: ");
            client.print(analogRead(analogInPin5));
            client.println("
</BODY></HTML>");
           }
          //generate main page with iframe
          else
          {
            client.print("<HTML><HEAD><TITLE>Zoomkat's frame refresh test</TITLE></HEAD>");
            client.print("Zoomkat's Arduino frame meta refresh test 5/25/13");
            client.print("

Arduino analog input data frame:
");
            client.print("&nbsp;&nbsp;<a href='http://192.168.1.102:84/datastart' target='DataBox' title=''yy''>META-REFRESH</a>");
            client.print("&nbsp;&nbsp;&nbsp;&nbsp;<a href='http://192.168.1.102:84/data' target='DataBox' title=''xx''>SINGLE-STOP</a>");
            client.print("&nbsp;&nbsp;&nbsp;&nbsp;<a href='http://192.168.1.102:84/datafast' target='DataBox' title=''zz''>FAST-DATA</a>
");
            client.print("<iframe src='http://192.168.1.102:84/data' width='350' height='250' name='DataBox'>");
            client.print("</iframe>
</HTML>");
          }
          delay(1);
          //stopping client
          client.stop();
          //clearing string for next read
          readString="";
        }
      }
    }
  }
}

I apologize. My post was posted with very little background and no code tags.

i am using the arduino(with ethernet shield) to communicate with a zilog z8 processor. Our school teaches embedded systems using that old processor.

The z8 is controlling a hydroponics project. The arduino is used as a web based interface to retrieve and display data.

With the help of a tutorial from startingelectronics.org I am able to set up a webpage and retrieve data from the z8 and it displays on the screen.

I have one on screen button which uses onclick to call a function. i can retrieve and display data with one button. The serial monitor displays the http request as well.

If I add a second button(and corresponding onclick function), neither button can retrieve data. the screen doesnt update and the serial monitor doesnt show an http request.

here is the code

#include <SPI.h>
#include <Ethernet.h>

// MAC address from Ethernet shield sticker under board
byte mac[] = { 0x90, 0xA2, 0xDA, 0x10, 0x37, 0x73 };
IPAddress ip(192, 168, 0, 120); // IP address, may need to change depending on network
EthernetServer server(80);  // create a server at port 80

String HTTP_req;            // stores the HTTP request


void setup()
{
    Ethernet.begin(mac, ip);  // initialize Ethernet device
    server.begin();           // start to listen for clients
    Serial.begin(9600);       // for diagnostics
    
}

void loop()
{
    EthernetClient client = server.available();  // try to get client

    if (client) {  // got client?
        boolean currentLineIsBlank = true;
        while (client.connected()) {
            if (client.available()) {   // client data available to read
                char c = client.read(); // read 1 byte (character) from client
                HTTP_req += c;  // save the HTTP request 1 char at a time
                // last line of client request is blank and ends with \n
                // respond to client only after last line received
                if (c == '\n' && currentLineIsBlank) {
                    // send a standard http response header
                    client.println("HTTP/1.1 200 OK");
                    client.println("Content-Type: text/html");
                    client.println("Connection: keep-alive");
                    client.println();
                    // AJAX request for switch state
                    if (HTTP_req.indexOf("ajax_switch") > -1) {
                        // read switch state and send appropriate paragraph text
                        Getz8data(client);
                    }
                    else {  // HTTP request for web page
                        // send web page - contains JavaScript with AJAX calls
                        client.println("<!DOCTYPE html>");
                        client.println("<html>");
                        client.println("<head>");
                        client.println("<title>Arduino Web Page</title>");
                        client.println("<script>");
                        client.println("function Getz8data() {");
                        client.println("nocache = \"&nocache=\"\
                                                         + Math.random() * 1000000;");
                        client.println("var request = new XMLHttpRequest();");
                        client.println("request.onreadystatechange = function() {");
                        client.println("if (this.readyState == 4) {");
                        client.println("if (this.status == 200) {");
                        client.println("if (this.responseText != null) {");
                        client.println("document.getElementById(\"switch_txt\")\
.innerHTML = this.responseText;");
                        client.println("}}}}");
                        client.println(
                        "request.open(\"GET\", \"ajax_switch\" + nocache, true);");
                      //client.println("request.open(\"GET\", \"ajax_switch\", true);");
                        client.println("request.send(null);");
                        client.println("}");
                        client.println("</script>");
                        client.println("</head>");
                        client.println("<body>");
                        client.println("<h1>Sensor Data</h1>");
                        client.println(
                        "<p id=\"switch_txt\">data not requested yet</p>");
                        client.println("<button type=\"button\"\
                            onclick=\"Getz8data()\">Get temp data</button>");
                        client.println("</body>");
                        client.println("</html>");
                    }
                    // display received HTTP request on serial port
                    Serial.print(HTTP_req);
                    HTTP_req = "";            // finished with request, empty string
                    break;
                }
                // every line of text received from the client ends with \r\n
                if (c == '\n') {
                    // last character on line of received text
                    // starting new line with next character read
                    currentLineIsBlank = true;
                } 
                else if (c != '\r') {
                    // a text character was received from client
                    currentLineIsBlank = false;
                }
            } // end if (client.available())
        } // end while (client.connected())
        delay(1);      // give the web browser time to receive the data
       client.stop(); // close the connection
    } // end if (client)
}

void Getz8data(EthernetClient cl)
{   char outgoingbyte = 3;
    int incomingbyte=0;

  Serial.write(outgoingbyte);


  if (Serial.available() > 0) {
                
          incomingbyte = Serial.read();                        
          cl.println("<p> The data is");
          cl.println(incomingbyte);
          cl.println("Degrees Celcius </p>");
          
  } 
}

With my limited knowledge of Ajax and the get request, I am not sure of how to add a second button.
The code I copied is for one working onscreen button. If I added multiple buttons(with onclick functions) the page doesnt update.

How could I add more buttons, have ajax update each button and still get a get request?

I did a look and found the updated Z8 Encore!, it's got nice parts and it runs old Z8 code.
It's a bit strange too. The RAM is all registers capable of all kinds of operations. Programs in C.
3.3V operation with a lot of digital I/O pins 5V tolerant is sweet and so is the debugger.
It runs Z8 code, there might be a lot of that online.
I wonder .... 40 pin PDIP down to $4.99 at Mouser.

That's not a bad chip to use. I bet the Arduino IDE could support it but I wonder just how well?
The architecture almost screams hardware tricks to me.

If I add a second button(and corresponding onclick function), neither button can retrieve data. the screen doesnt update and the serial monitor doesnt show an http request.

Almost certainly because you are running out of memory. You are pissing away SRAM by not using the F() macro:
client.println(F("HTTP/1.1 200 OK"));

You are pissing away memory using Strings. Stop that.

okay.I will rectify this.

I would like one button on the left of the screen to get data and one on the right to send data.

Do i have 2 individual then tags or would they both be done under a /div
would ajax the refresh the div element?

Do i have 2 individual then tags or would they both be done under a /div
would ajax the refresh the div element?

This is not an either/or question. You need to button elements. Whether they can be in the same div, or not, is really immaterial.

Thanks. I can add another button element, but nothing updates. The button that was working wont update. Where do I add it(and the corresponding on click function).

and when I add it how does ajax know how to update it and how do I make sure the http request goes though?

I can add another button element, but nothing updates.

Show the code you have now.

Frankly, I can't understand why you want ajax to handle the button. Html forms know how to handle button presses.

and when I add it how does ajax know how to update it and how do I make sure the http request goes though?

You need to post the one button html code that works, then what needs to be done for two buttons might be determined.

Here is the code that I have now. I have one button which when clicked calls a function which retrieves data from a z8 processor. I can add a second button and function. The page never sends an http request and the first button never displays any data when clicked.

Here is my working 1 button code.

#include <SPI.h>
#include <Ethernet.h>

// MAC address from Ethernet shield sticker under board
byte mac[] = { 0x90, 0xA2, 0xDA, 0x10, 0x37, 0x73 };
IPAddress ip(192, 168, 0, 120); // IP address, may need to change depending on network
EthernetServer server(80);  // create a server at port 80

String HTTP_req;            // stores the HTTP request


void setup()
{
    Ethernet.begin(mac, ip);  // initialize Ethernet device
    server.begin();           // start to listen for clients
    Serial.begin(9600);       // for diagnostics
    
}

void loop()
{
    EthernetClient client = server.available();  // try to get client

    if (client) {  // got client?
        boolean currentLineIsBlank = true;
        while (client.connected()) {
            if (client.available()) {   // client data available to read
                char c = client.read(); // read 1 byte (character) from client
                HTTP_req += c;  // save the HTTP request 1 char at a time
                // last line of client request is blank and ends with \n
                // respond to client only after last line received
                if (c == '\n' && currentLineIsBlank) {
                    // send a standard http response header
                    client.println("HTTP/1.1 200 OK");
                    client.println("Content-Type: text/html");
                    client.println("Connection: keep-alive");
                    client.println();
                    // AJAX request for switch state
                    if (HTTP_req.indexOf("ajax_switch") > -1) {
                        // read switch state and send appropriate paragraph text
                        Getz8data(client);
                    }
                    else {  // HTTP request for web page
                        // send web page - contains JavaScript with AJAX calls
                        client.println("<!DOCTYPE html>");
                        client.println("<html>");
                        client.println("<head>");
                        client.println("<title>Arduino Web Page</title>");
                        client.println("<script>");
                        client.println("function Getz8data() {");
                        client.println("nocache = \"&nocache=\"\
                                                         + Math.random() * 1000000;");
                        client.println("var request = new XMLHttpRequest();");
                        client.println("request.onreadystatechange = function() {");
                        client.println("if (this.readyState == 4) {");
                        client.println("if (this.status == 200) {");
                        client.println("if (this.responseText != null) {");
                        client.println("document.getElementById(\"switch_txt\")\
.innerHTML = this.responseText;");
                        client.println("}}}}");
                        client.println(
                        "request.open(\"GET\", \"ajax_switch\" + nocache, true);");
                      //client.println("request.open(\"GET\", \"ajax_switch\", true);");
                        client.println("request.send(null);");
                        client.println("}");
                        client.println("</script>");
                        client.println("</head>");
                        client.println("<body>");
                        client.println("<h1>Sensor Data</h1>");
                        client.println(
                        "<p id=\"switch_txt\">data not requested yet</p>");
                        client.println("<button type=\"button\"\
                            onclick=\"Getz8data()\">Get temp data</button>");
                        client.println("</body>");
                        client.println("</html>");
                    }
                    // display received HTTP request on serial port
                    Serial.print(HTTP_req);
                    HTTP_req = "";            // finished with request, empty string
                    break;
                }
                // every line of text received from the client ends with \r\n
                if (c == '\n') {
                    // last character on line of received text
                    // starting new line with next character read
                    currentLineIsBlank = true;
                } 
                else if (c != '\r') {
                    // a text character was received from client
                    currentLineIsBlank = false;
                }
            } // end if (client.available())
        } // end while (client.connected())
        delay(1);      // give the web browser time to receive the data
       client.stop(); // close the connection
    } // end if (client)
}

void Getz8data(EthernetClient cl)
{   char outgoingbyte = 3;
    int incomingbyte=0;

  Serial.write(outgoingbyte);


  if (Serial.available() > 0) {
                
          incomingbyte = Serial.read();                        
          cl.println("<p> The data is");
          cl.println(incomingbyte);
          cl.println("Degrees Celcius </p>");
          
  } 
}

So, you attempted to add a second button. That code is ?

Here is where I add a second button which will call a second function called z8data1.

I would rather not use ajax, but I am not familiar with it. I had followed a tutorial and am working my way through this.

here is my non working code:

#include <SPI.h>
#include <Ethernet.h>

// MAC address from Ethernet shield sticker under board
byte mac[] = { 0x90, 0xA2, 0xDA, 0x10, 0x37, 0x73 };
IPAddress ip(192, 168, 0, 120); // IP address, may need to change depending on network
EthernetServer server(80);  // create a server at port 80

String HTTP_req;            // stores the HTTP request


void setup()
{
    Ethernet.begin(mac, ip);  // initialize Ethernet device
    server.begin();           // start to listen for clients
    Serial.begin(9600);       // for diagnostics
    
}

void loop()
{
    EthernetClient client = server.available();  // try to get client

    if (client) {  // got client?
        boolean currentLineIsBlank = true;
        while (client.connected()) {
            if (client.available()) {   // client data available to read
                char c = client.read(); // read 1 byte (character) from client
                HTTP_req += c;  // save the HTTP request 1 char at a time
                // last line of client request is blank and ends with \n
                // respond to client only after last line received
                if (c == '\n' && currentLineIsBlank) {
                    // send a standard http response header
                    client.println("HTTP/1.1 200 OK");
                    client.println("Content-Type: text/html");
                    client.println("Connection: keep-alive");
                    client.println();
                    // AJAX request for switch state
                    if (HTTP_req.indexOf("ajax_switch") > -1) {
                        // read switch state and send appropriate paragraph text
                        Getz8data(client);
			Getz8data1(client);
                    }
                    else {  // HTTP request for web page
                        // send web page - contains JavaScript with AJAX calls
                        client.println("<!DOCTYPE html>");
                        client.println("<html>");
                        client.println("<head>");
                        client.println("<title>Arduino Web Page</title>");
                        client.println("<script>");
                        client.println("function Getz8data() {");
                        client.println("nocache = \"&nocache=\"\
                                                         + Math.random() * 1000000;");
                        client.println("var request = new XMLHttpRequest();");
                        client.println("request.onreadystatechange = function() {");
                        client.println("if (this.readyState == 4) {");
                        client.println("if (this.status == 200) {");
                        client.println("if (this.responseText != null) {");

                        client.println("document.getElementById(\"temp_data\")\
.innerHTML = this.responseText;");

client.println("document.getElementById(\"sensor_data\")\
.innerHTML = this.responseText;");

                        client.println("}}}}");
                        client.println(
                        "request.open(\"GET\", \"ajax_switch\" + nocache, true);");
                      //client.println("request.open(\"GET\", \"ajax_switch\", true);");
                        client.println("request.send(null);");
                        client.println("}");
                        client.println("</script>");
                        client.println("</head>");
                        client.println("<body>");
                        client.println("<h1>Sensor Data</h1>");


                        client.println(
                        "<p id=\"temp_data\">data not requested yet</p>");
                        client.println("<button type=\"button\"\
                            onclick=\"Getz8data()\">Get temp data</button>");

 			client.println(
                        "<p id=\"sensor_data\">data not requested yet</p>");
                        client.println("<button type=\"button\"\
                            onclick=\"Getz8data1()\">get other data</button>");


                        client.println("</body>");
                        client.println("</html>");
                    }
                    // display received HTTP request on serial port
                    Serial.print(HTTP_req);
                    HTTP_req = "";            // finished with request, empty string
                    break;
                }
                // every line of text received from the client ends with \r\n
                if (c == '\n') {
                    // last character on line of received text
                    // starting new line with next character read
                    currentLineIsBlank = true;
                } 
                else if (c != '\r') {
                    // a text character was received from client
                    currentLineIsBlank = false;
                }
            } // end if (client.available())
        } // end while (client.connected())
        delay(1);      // give the web browser time to receive the data
       client.stop(); // close the connection
    } // end if (client)
}

void Getz8data(EthernetClient cl)
{   char outgoingbyte = 3;
    int incomingbyte=0;

  Serial.write(outgoingbyte);


  if (Serial.available() > 0) {
                
          incomingbyte = Serial.read();                        
          cl.println("<p> The data is");
          cl.println(incomingbyte);
          cl.println("Degrees Celcius </p>");
          
  } 
}

void Getz8data1(EthernetClient cl)
{   char outgoingbyte1 = 3;
    int incomingbyte1=0;

  Serial.write(outgoingbyte);


  if (Serial.available() > 0) {
                
          incomingbyte = Serial.read();                        
          cl.println("<p> The data is");
          cl.println(incomingbyte1);
          cl.println("Degrees Celcius </p>");
          
  } 
}