Simple Form:

[cheesemonkey]

Hello, I've got the new dreamweaver cs3 and do a little bit of designing, (still learning) I need to make a form for my mums gymnastics business website. It would require name, surname, childs name, age of child, the class interested in

LOL this is sounding a bit more complicated than simple, well to me.

So perhaps if someone could just give me a rough bit of coding that I could use for just the names for the moment, then I would try applying this to the others myself, I'm a quick learner.

Cheers

[Spid]

This is probably what you're after http://www.ibdhost.com/contact/

[iamwithstupid]

Uhh, what is up with the design of that website! I would personally suggest something like http://www.dagondesign.com/articles/secu...er-script/

[iamwithstupid]

Plus if you want to know something about how these things work. First you have a form designed in xhtml markup with css styling applied, which submits to a php script for validation of the data. When the user clicks submit the current best option is to validate all the fields you can with clientside javascript and possibly also validate any other fields with ajax. Then print the result either on the next page or in a new element if you are using ajax (But you have to make a standard page as well as a fallback if the user doesn't have javascript on so it is good for usabilty).

Code:

<fieldset>
    <legend class="txtFormLegend">Input text!</legend>
      <br />
      <form name="frmSpeechTest" method="post"
            action="test.php">
          
        <!-- string -->
        <label for="txtString">Text:</label>

     <textarea id="txtString" name="txtString" rows="4" cols="20" onblur="validate(this.value, this.id)" ></textarea>
     <span id="txtString"
              class="hidden">
          Please enter your name.
        </span>
        <br />
        <!-- End of form -->
        <hr />
        <span class="txtSmall">!</span>
        <br /><br />
        <input type="submit" name="submitbutton" value="LAUNCH!"
               class="left button" />
      </form>
  </fieldset>

The form will look something like that, then the php will contain things such as

Quote:Get input variables and santaize them for cross site scripting or escape codes
Use mail function to send mail

With ajax added you want something like this:

Code:

// holds an instance of XMLHttpRequest
var xmlHttp = createXmlHttpRequestObject();
// holds the remote server address
var serverAddress = "ajax.php";
// when set to true, display detailed error messages
var showErrors = true;
// initialize the validation requests cache
var cache = new Array();

// creates an XMLHttpRequest instance
function createXmlHttpRequestObject()
{
  // will store the reference to the XMLHttpRequest object
  var xmlHttp;
  // this should work for all browsers except IE6 and older
  try
  {
    // try to create XMLHttpRequest object
    xmlHttp = new XMLHttpRequest();
  }
  catch(e)
  {
    // assume IE6 or older
    var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0",
                                    "MSXML2.XMLHTTP.5.0",
                                    "MSXML2.XMLHTTP.4.0",
                                    "MSXML2.XMLHTTP.3.0",
                                    "MSXML2.XMLHTTP",
                                    "Microsoft.XMLHTTP");
    // try every id until one works
    for (var i=0; i<XmlHttpVersions.length && !xmlHttp; i++)
    {
      try
      {
        // try to create XMLHttpRequest object
        xmlHttp = new ActiveXObject(XmlHttpVersions[i]);
      }
      catch (e) {} // ignore potential error
    }
  }
  // return the created object or display an error message
  if (!xmlHttp)
    displayError("Error creating the XMLHttpRequest object.");
  else
    return xmlHttp;
}

// function that displays an error message
function displayError($message)
{
  // ignore errors if showErrors is false
  if (showErrors)
  {
    // turn error displaying Off
    showErrors = false;
    // display error message

    alert("Error encountered: \n" + $message);
    // retry validation after 10 seconds
    setTimeout("validate();", 10000);
  }
}

// the function handles the validation for any form field
function validate(inputValue, fieldID)
{
  // only continue if xmlHttp isn't void
  if (xmlHttp)
  {
    // if we received non-null parameters, we add them to cache in the
    // form of the query string to be sent to the server for validation
    if (fieldID)
    {
      // encode values for safely adding them to an HTTP request query string
      inputValue = encodeURIComponent(inputValue);
      fieldID = encodeURIComponent(fieldID);
      // add the values to the queue
      cache.push("inputValue=" + inputValue + "&fieldID=" + fieldID);
    }
    // try to connect to the server
    try
    {
      // continue only if the XMLHttpRequest object isn't busy
      // and the cache is not empty
      if ((xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
         && cache.length > 0)
      {
        // get a new set of parameters from the cache
        var cacheEntry = cache.shift();
        // make a server request to validate the extracted data
        xmlHttp.open("POST", serverAddress, true);
        xmlHttp.setRequestHeader("Content-Type",
                                 "application/x-www-form-urlencoded");
        xmlHttp.onreadystatechange = handleRequestStateChange;
        xmlHttp.send(cacheEntry);
      }
    }
    catch (e)
    {
      // display an error when failing to connect to the server
      displayError(e.toString());
    }
  }
}

// function that handles the HTTP response
function handleRequestStateChange()
{
  // when readyState is 4, we read the server response
  if (xmlHttp.readyState == 4)
  {
    // continue only if HTTP status is "OK"
    if (xmlHttp.status == 200)
    {
      try
      {
        // read the response from the server
        readResponse();
      }
      catch(e)

      {
        // display error message
        displayError(e.toString());
      }
    }
    else
    {
      // display error message
      displayError(xmlHttp.statusText);
    }
  }
}

// read server's response
function readResponse()
{
  // retrieve the server's response
  var response = xmlHttp.responseText;
  // server error?
  if (response.indexOf("ERRNO") >= 0
      || response.indexOf("error:") >= 0
      || response.length == 0)
    throw(response.length == 0 ? "Server error." : response);
  // get response in XML format (assume the response is valid XML)
  responseXml = xmlHttp.responseXML;
  // get the document element
  xmlDoc = responseXml.documentElement;
  result = xmlDoc.getElementsByTagName("result")[0].firstChild.data;
  fieldID = xmlDoc.getElementsByTagName("fieldid")[0].firstChild.data;
  message = document.getElementById(fieldID + "Failed");
  message.className = (result == "0") ? "error" : "hidden";
  setTimeout("validate();", 500);
}

function setFocus()    
{
  document.getElementById("txtString").focus();
}

Which would be polling the script ajax.php every 10 seconds once something has been inputted for errors.

the php code would send back a xml response to the javascript in this instance.

Although things are actually moving towards JSON instead of xml responses so....

[cheesemonkey]

This is great stuff, thank you very much, didn't expect such a good response as it's probably such a simple question to you lot!

I was considering buying the "php for dummies" book! Or would that just be a waste of money?

[Cadet]

As far as i know the "for dummies" range of boooks are considered to be very good, i personally would think it would be a waste of money, although on the other hand all the information will be out there on the net if you are willing to search for it.

So its all personal preference really

[Techmonkey]

I got this book when I first started looking at PHP/mySQL

http://www.sitepoint.com/books/phpmysql1/

And have to say it was very nice and straight forward.

[cheesemonkey]

My problem is that when I read tutorials on the screen and flick between the two it gets a bit annoying after a while, whereas I think if I hada book I can keep the right screen up while reading the book if this all makes sense!!!

I might one day, when I can afford my alienware computer, I'll have two big 23' screens side by side, one witha tutorial and one with dreamweaver. Then again, if I had this computer I'd have football manager on one screen and the sims 2 on the other LOL!!!!