Jump to content

Howto: single-page form processing


justsomeguy
 Share

Recommended Posts

I've got an example of how to process a form on the same page. I've got a live demo, and the entire source is below. This page is valid XHTML 1.0 strict. I'll leave this as it is, and I'll be happy to field questions if anyone has them. If anyone else wants to add anything, corrections or clarification, or answer anyone else's questions before I get to them, please feel free.Let me also take this opportunity to recommend ConTEXT if you don't have an editor with syntax highlighting.http://manchine.net/w3/formdemo.php

<?php$status = "Apply now!  Supplies limited!";global $errors;$errors = "";get_form_var("page_mode"); # get_form_var is defined belowget_form_var("name");get_form_var("age");get_form_var("location");get_form_var("reason");if ($page_mode == "add"){  # validate info first  if ($name == "")    add_error("You must enter a name."); # add_error defined below    if ($age == "")    add_error("You must enter your age (don't bother if you're over 100, I have standards you know).");  elseif (!is_numeric($age))    add_error("That's not an age!  You can't fool me!");      if ($location == "")    add_error("You must enter a location.  Eskimos need not apply.");      if ($reason == "")    add_error("You must enter a reason.  Candidates must have 2 arms and 2 legs.");      if ($errors == "")  {    # well done.  add them to the database of ladiez.  or email. or something    $status = "Thank you.  You will be stalked soon.";  }}if ($page_mode == "remove"){  # i could copy and paste all the validation code, but why bother  $status = "Your request to remove yourself from my little black book has been received.  Since this is obviously a mistake, I have decided to ignore you.  You have re-gained my interest, and will be stalked soon.";}################################################################################ get_form_var#  $vName - name of the form varible to retrieve##  this function retrieves the form variable called vName and stores it in a#   global variable called $vName###############################################################################function get_form_var($vName, $defval = ""){  global $$vName;  $$vName = $defval;  if (array_key_exists($vName, $_GET) && trim($_GET[$vName]) != "")    $$vName = trim(stripslashes($_GET[$vName]));  if (array_key_exists($vName, $_POST) && trim($_POST[$vName]) != "")    $$vName = trim(stripslashes($_POST[$vName]));}function add_error($str){  global $errors;  if ($errors != "")    $errors .= "<br />";  $errors .= $str;}?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  <head>    <title>Form demo</title>    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />    <style type="text/css">      body      {        font-family: sans-serif;        font-size: 10pt;        margin: 0;        padding: 0;      }            h1      {        margin: 0 auto;        text-align: center;        font-size: 150%;      }            hr       {        background-color: #B3BBC9;        color: #B3BBC9;        border: 1px outset #585E6A;        height: 2px;        width: 85%;        padding: 0px;        margin: 7px 0px 7px 0px;      }            .float_box       {        border: 1px solid #747F8D;        background-color: #DDE4EE;        color: #000000;        padding: 5px;        margin: 0 auto;      }      .float_box_left_item      {        width: 250px;        text-align: right;        float: left;        margin: 0px 2px 0px 0px;      }      .float_box_right_item      {        margin-bottom: 5px;      }            .box_title      {        font-weight: bold;        text-align: center;      }      .input_text      {        font-family: "Verdana", sans-serif;        font-size: 10pt;        border: 1px solid #585E6A;        color: #585E6A;        background-color: #EDF4FF;        text-align: center;      }      .standard_button      {        font-family: "Verdana", sans-serif;        font-size: 9pt;        border: 1px outset #000000;        color: #000000;        background-color: #EDF4FF;        cursor: pointer;      }      .standard_button:hover      {        border: 1px inset #000000;        background-color: #CDD4DF;      }            .errors      {        color: #CC0000;         text-align: center;      }    </style>  </head>  <body>    <h1>Form Demo</h1>    <div class="box_title"><br /><?php echo $status; ?></div>    <?php      if ($errors != "")        echo "<div class=\"errors\">{$errors}</div>";    ?>    <form action="formdemo.php" method="post">    <div class="float_box" style="width: 500px;">      <input type="hidden" name="page_mode" value="add" />      <div class="box_title">Apply Here</div>      <hr />      <div class="float_box_left_item">Name:</div>      <div class="float_box_right_item"><input type="text" name="name" size="30" maxlength="100" class="input_text" value="<?php echo $name; ?>" /></div>      <div class="float_box_left_item">Age:</div>      <div class="float_box_right_item"><input type="text" name="age" size="30" maxlength="3" class="input_text" value="<?php echo $age; ?>" /></div>      <div class="float_box_left_item">Location:</div>      <div class="float_box_right_item"><input type="text" name="location" size="30" maxlength="100" class="input_text" value="<?php echo $location; ?>" /></div>      <div class="float_box_left_item">Gender:</div>      <div class="float_box_right_item"><input type="text" size="30" class="input_text" value="Female!!" disabled="disabled" /></div>      <div class="float_box_left_item">Why I should date you:</div>      <div class="float_box_right_item"><input type="text" name="reason" size="30" maxlength="100" class="input_text" value="<?php echo $reason; ?>" /></div>      <div style="text-align: center;"><input type="submit" class="standard_button" value="Push it real good!" /></div>    </div>    </form>        <form action="formdemo.php" method="post">    <div class="float_box" style="width: 500px;">      <input type="hidden" name="page_mode" value="remove" />      <div class="box_title">De-Apply Here</div>      <hr />      <div class="float_box_left_item">Name:</div>      <div class="float_box_right_item"><input type="text" name="name" size="30" maxlength="100" class="input_text" value="<?php echo $name; ?>" /></div>      <div class="float_box_left_item">Age:</div>      <div class="float_box_right_item"><input type="text" name="age" size="30" maxlength="3" class="input_text" value="<?php echo $age; ?>" /></div>      <div class="float_box_left_item">Location:</div>      <div class="float_box_right_item"><input type="text" name="location" size="30" maxlength="100" class="input_text" value="<?php echo $location; ?>" /></div>      <div class="float_box_left_item">Why you don't want to date me:</div>      <div class="float_box_right_item"><input type="text" size="30" class="input_text" value="You are too much man for me" disabled="disabled" /></div>      <div style="text-align: center;"><input type="submit" class="standard_button" value="Reconsider" /></div>    </div>    </form>  </body></html>

Link to comment
Share on other sites

This thing is a nice idea :) But it would be nicer if the parts of this document were arranged within a few files, so more documents can use the same actions, the same stylesheet, the same functions. That would be some organisation heh :)

Link to comment
Share on other sites

What is the best way to do it?Assumably there is no "best" way to manage your site's files.However, I have my own managed very nicely, in my opinion (:))In the end, it comes to that my site consists of only one file, that uses other files to do all the actions, have the functions, have the stylesheet and print the pages theirselves. That is practically it.If the page has a form, the action of the form will be the same page with a certain 'action' defined like "do this or do that". The posted data will be used by the action code, which executes what is needed for this action. The action code will then redirect to the same page again but this time with no 'action' defined. The new page will be printed using a few functions. The first page with the form, the requested page that does not print anything but only execute the action code and redirect to the next page, and the next page, are all three at the same page in the browser's history, so it would seem like there has only been javascript executed on one page. This creates the idea of some sort of an application :)So there are different pages for the same document. After all, the site consists of only one document, and the site should have more than one page. So how did I do that? Simple, I used various SESSION variables to let the site know what page he is on. And this is the most advanced of the site. That is because even if you click the Back button to go to the other panel (that does have it's own history point), you still get to the correct page :) If you try it, you may seem to notice your page will be slightly different when it is dependant on the session, but I would just reset all those variables when it recognises the history change. It is easy to recognise, while the panels are the only available history changes, and those have their own variables. When they are set, and the active panel is another one, my site knows the Back button was used :blink: Or the Next in some cases.

Link to comment
Share on other sites

That's cool. The point of this demo was to show how to use hidden input elements with multiple forms on one page that get processed by the same page. I wasn't trying to give a demo on how to organize application architecture, but if you want to do something like that, go ahead.Also, I haven't gotten any requests for dates. What's up with that? Don't you people love me? I feel so abused!

Link to comment
Share on other sites

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...