How to read value from browser into arduino

hi,

I have arduino Uno + ethernet shield, using these i have to develop a code for web server. The web page is very simple with 1 numeric input field, 1 submit button and 1 numeric indicator. I checked the Example code of web server and tried something from it but my biggest hurdle is html since i don't have any knowledge of it.Still with some html commands i can make a webpage.
here is the half code

#include<SPI.h>                                            // Initialize the SPI server library
#include<Ethernet.h>                                      // Initialize the Ethernet server library


byte mac[] = {0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED};        //declare mac address of Uno + Ethernet shield
byte ip[] = {192,168,0,102};                              //declare ip address of Uno + Ethernet shield
byte gateway[] = {192,168,0,252};
byte subnet[] = {255,255,255,0};
EthernetServer server (80);                                //declare http port (default is 80)

boolean initial = 0;
String resp, value;
int value2;

void setup() 
{
  Serial.begin(9600);
  Ethernet.begin(mac, ip, gateway, gateway, subnet);
  server.begin();
  Serial.print("Server is at ");
  Serial.println(Ethernet.localIP());
}

void loop()
{
  EthernetClient client = server.available();
  if(client)
  {
    Serial.println("new client");
    boolean currentLineIsBlank = true;
    resp = " ";
    while(client.connected())
    {
      if(client.available())
      {
        char c = client.read();
        Serial.write(c);
        resp += c;
        
        if(c == '\n' && currentLineIsBlank)
        {
          client.println("HTTP/1.1 200 OK");                                    //Standard response for successful HTTP requests. 
          client.println("Content-type: text/html");                          //content type is html text
          client.println("Connection: close");                              //the connection will be closed after completion of the response
          client.println();
          client.println("<!DOCTYPE HTML>");                          //each HTML document requires a document type declaration
          client.println("<html>");                                   //The <html> tag tells the browser that this is an HTML document.
          client.println("<h1>Enter numeric value</h1>");
          client.println("<p/>");                                     //The <p> tag defines a paragraph.
          client.println("<form method = 'GET'>");
          client.println("<input type = 'number' Id = 'input'>");
          client.println("<input type = 'submit' value = 'Submit' onclick = submit()>");
          client.println("<p/>");
          client.println("</form>");
          client.println("</html>");  
   break;
        } 
        if (c == '\n')
        { 
          currentLineIsBlank = true;
        }
        else if (c != '\r') 
        { 
          currentLineIsBlank = false;
        }
      }
    }
    delay(1);
    client.stop();
  }   
}

oh! sorry i forgot to mention my requirement. when i enter the 5 digit value to numeric field and click submit button, through browser query i want that 5 digit value in 1 variable of arduino code. Because i have to perform some mathematical calculations on it and then again display it on browser.

If anyone has any idea, please help

thank u
ratna

Basic server code with a submit box.

//zoomkat 12-08-12
//get submit box code
//for use with IDE 1.0
//open serial monitor to see what the arduino receives
//use the \ slash to escape the " in the html or use a '
//address will look like http://192.168.1.102:84 when submited
//for use with W5100 based ethernet shields
//note that the below bug fix may be required
// http://code.google.com/p/arduino/issues/detail?id=605 

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

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address
byte ip[] = { 192, 168, 1, 102 }; // 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

String readString; 

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

void setup(){

  pinMode(5, OUTPUT); //pin selected to control
  //start Ethernet
  Ethernet.begin(mac, ip, gateway, gateway, subnet);
  server.begin();

  //enable serial data print 
  Serial.begin(9600); 
  Serial.println("server text box test1"); // so I can keep track of what is loaded
}

void loop(){
  // Create a client connection
  EthernetClient client = server.available();
  if (client) {
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();

        //read char by char HTTP request
        if (readString.length() < 100) {

          //store characters to string 
          readString += c; 
          //Serial.print(c);
        } 

        //if HTTP request has ended
        if (c == '\n') {

          ///////////////
          Serial.println(readString); //see what was captured

          //now output HTML data header

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

          client.println("<HTML>");
          client.println("<HEAD>");
          client.println("<TITLE>Arduino GET test page</TITLE>");
          client.println("</HEAD>");
          client.println("<BODY>");

          client.println("<H1>HTML form GET example</H1>");

          client.println("<FORM ACTION='/' method=get >"); //uses IP/port of web page

          client.println("Pin 5 'on5' or 'off5': <INPUT TYPE=TEXT NAME='LED' VALUE='' SIZE='25' MAXLENGTH='50'>
");

          client.println("<INPUT TYPE=SUBMIT NAME='submit' VALUE='Change Pin 5!'>");

          client.println("</FORM>");

          client.println("
");

          client.println("</BODY>");
          client.println("</HTML>");

          delay(1);
          //stopping client
          client.stop();

          /////////////////////
          if(readString.indexOf("on5") >0)//checks for on
          {
            digitalWrite(5, HIGH);    // set pin 5 high
            Serial.println("Led On");
          }
          if(readString.indexOf("off5") >0)//checks for off
          {
            digitalWrite(5, LOW);    // set pin 5 low
            Serial.println("Led Off");
          }
          //clearing string for next read
          readString="";

        }
      }
    }
  }
}

hi,

Thank u zoomkat ur code helped me a lot also this link is helpful to me
http://forum.arduino.cc/index.php?topic=141243.0

i can load webpage successfully, here is my code

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

byte mac[] = {0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED};              //declare mac address of Uno + Ethernet shield
byte ip[] = {192,168,0,102};                                   //declare ip address of Uno + Ethernet shield
byte gateway[] = {192,168,0,252};
byte subnet[] = {255,255,255,0};
EthernetServer server(502);                                    //declare server port

String resp;

void setup() 
{  
  Serial.begin(9600, 0x0E);                            //hex code for SERIAL_8N2
  Ethernet.begin(mac, ip, gateway, gateway, subnet);
  server.begin();
  Serial.print("Server is at ");
  Serial.println(Ethernet.localIP());  
}  
  
void loop() 
{
  byte Query[40] = {}, rd_qry[8], rd_resp[] = {}, wr_qry[] = {}, wr_resp[8] , len, len1, len2, i, j;
  word crc_16;   
  boolean flg;
  
  EthernetClient client = server.available();
  if(client)
  {
//    server.write("New Client");
    boolean currentLineIsBlank = true;
    while(client.connected())
    {
      if(client.available())
      {
        char c = client.read();
        resp += c;
        if(c == '\n' && currentLineIsBlank)
        {
          client.println("HTTP/1.1 200 OK");                             //Standard response for successful HTTP requests. 
          client.println("Content-type: Text/html");                     //content type is html text
          client.println("Connection: close");                           //the connection will be closed after completion of the response
          client.println();
          
          client.println("<!DOCTYPE HTML>");                            //send webpage
          client.println("<html>");
          client.println("<h1>Enter Communication Settings</h1>");
          client.println("<p>");
          client.println("<form method ='GET'>");

          client.println("<b>Transmission Speed:</b>");
          client.println("<select name = baud>");
          client.println("<option value=4800>4800</option>");
          client.println("<option value=9600>9600</option>");
          client.println("<option value=19200>19200</option>");
          client.println("<option value=38400>38400</option>");
          client.println("</select>

");
          client.println("<b>Communication Protocol:</b> ");
          client.println("<select name = config>");
          client.println("<option value=8N2>8N2</option>");
          client.println("<option value=8E1>8E1</option>");
          client.println("<option value=8O1>8O1</option>");
          client.println("</select>

");
          client.println("</p>");
          client.println("<input type = 'submit' value = 'Submit'>");
          client.println("</p>");
          client.println("</form>");
          client.println("</html>");  
          int StartPos = resp.indexOf("/?baud=");
          Serial.println(resp);
          if(StartPos > -1)
          {
            int endPos = resp.indexOf("&config");
            StartPos += 7;
            String baud = resp.substring(StartPos, endPos);
            Serial.print("baud: ");
            Serial.println(baud);
            int endPos_1 = endPos + 8;
            int endPos_2 = endPos_1 + 3;
            String protocol = resp.substring(endPos_1, endPos_2);
            Serial.print("protocol: ");
            Serial.println(protocol);  
            flg = 1;         
            Serial.println(flg);
          }
          resp = "";
          break;
          if (c == '\n')
          { 
            currentLineIsBlank = true;
          }
          else if (c != '\r') 
          { 
            currentLineIsBlank = false;
          }
          
        }
      } 
    
        delay(1);
        client.stop();        
    }
   }

Now my another query is how to reconnect the client??
because once i will change the baud and parity from web browser i want to send rs485 query from client pc to arduino server and then server(arduino) will send that query to slave device through serial port.

individual code for webserver and rs485 query part are working fine but i don't understand how to combine both of them in one

please guide me for this

Thank u
Ratna

I tried the code you posted and it won't compile. it appears to be missing a bracket at the end. I added a bracket and used my ip address gateway, and port, but the page will not load in IE.

hi zoomkat,

Sorry for my mistake during copy paste, i am able to load webpage in mozilla, not tried in IE browser.
for my other problem can u guide me how to reconnect the client?? and from which line i can insert the code for RS485 query.

thank u
ratna

kindly upload your arduino and HTML code.