Saving State with Hidden Elements

Hidden elements can be used to maintain state on the client side. To do this we essentially have to do two things.

Make sure that all our pages have forms with hidden elements.
Make sure that the values are passed using submit buttons (Or the JavaScript equivalent submit()).

In practice the latter can be a problem, because navigation by buttons can make a form look clunky. However it is relatively easy to get round this problem by using a bit of JavaScript magic! For the purpose of this page we are going to use the POST method for passing information between the various forms

Passing and Retreiving Post name/value pairs

All POST name/value pairs are passed in the Header to a page that is called using the POST method. In PHP they are contained in the $HTTP_POST_VARS[] array. The value of the array element is the name of the input element, and the value of the input element is the key.i.e.

   //retrieving the "somename"="somevalue" pair

    $x=$HTTP_POST_VARS["somevalue"]// $x holds the string "somename

Let's look at a calling page mypage1.php with this minimal form.

   <form method="post" action="mypage2.php">
    <input type="hidden" name="myname" value="Frank Boumphrey" />
    <input type="submit" value="Get mypage2.php" />
   </form>

Then I could retreive this in mypage2.php as follows:

   <form method="post" action="mypage1.php">
    <input type="hidden" name="myname" value="<?=$HTTP_POST_VARS["myname"]?>" />
    <input type="submit" value="Get mypage1.php" />
   </form>

(Note that does not work here!) Of course as we have things the information only goes one way!

The following is a simple web application consisting of three pages which keeps information alive using hidden form elements.

Example 1a

<html>
<title> PHP Hidden 1a</title>
<p>Enter your name</p>
<form method="post" action="hidden1ex1c.php">
    <input type="text" name="myname" value="<?=$HTTP_POST_VARS["myname"]?>" /> 
    <input type="hidden" name="mypet" value="<?=$HTTP_POST_VARS["mypet"]?>" /> 
    <input type="submit" value="Register my name" />
</form>


</html>

Example 1b

<html>
<title> PHP Hidden 1a</title>
<p>Enter your pets name</p>
<form method="post" action="hidden1ex1c.php">
    <input type="hidden" name="myname" value="<?=$HTTP_POST_VARS["myname"]?>" /> 
    <input type="text" name="mypet" value="<?=$HTTP_POST_VARS["mypet"]?>" /> 
    <input type="submit" value="Register my pets name" />
</form>

What's Going on

As you can see, in the high lighted areas we simple have a text and a hidden input element. The values are assigned to these elements using the $HTTP_POST_VARS[] array, and in turn they are both passed to the registration page.

</html>

Example 1c

 1  <html>
 2  <title> PHP Hidden 1c</title>
 3  <p>My Name  is <?=$HTTP_POST_VARS["myname"]?>. My Pets name is <?=$HTTP_POST_VARS["mypet"]?>. </p>
 4  <form method="post" action="hidden1ex1a.php">
 5      <input type="hidden" name="myname" value="<?=$HTTP_POST_VARS["myname"]?>" />
 6      <input type="hidden" name="mypet" value="<?=$HTTP_POST_VARS["mypet"]?>" />
 7      <input type="submit" value="Change My name" />
 8  </form>
 9  <form method="post" action="hidden1ex1b.php">
 10      <input type="hidden" name="myname" value="<?=$HTTP_POST_VARS["myname"]?>" />
 11      <input type="hidden" name="mypet" value="<?=$HTTP_POST_VARS["mypet"]?>" />
 12      <input type="submit" value="Change Pets name" />
 13  </form>


 14  </html>

What's Going on

Line 3: This line simply reads the passed values
Line 4-8: Two forms with hidden values are necessary. The first passes on the values to the "Change My Name" page.
Line 9-13: And the second passes the same values to the change Pets Name" page.

I think you can see that if we are passing a lot of values around to a lot of pages, this method would soon get very tedious. Luckily however we can print all the hidden elements from the $HTTP_POST_VARS[] array automatiacally using some kind of control structure. However for this to work we need to make sure that we can overwrite a hidden value in a page. This is where overlaoding comes into play.

Overloading a name

Lets rewrite the form in mypag1.php as follows.

   <form method="post" action="mypage2.php">
    <input type="hidden" name="myname" value="<?=$HTTP_POST_VARS["myname"]?>" />
    <input type="text" name="myname" value="" />
    <input type="submit" value="Get mypage2.php" />
   </form>

You will see that we now have two form elements with the same name, which could have different values! This process is known as overloading. When we click the 'submit' button, which name/value pair gets sent? The answer is always the last one ! This is very convienient for us, because it means that we can automate the writing of our input elements.

Automating Writing of Hidden elements

All we need to do is use a control structure to write out all the hidden elements in the $HTTP_POST_VARS[] array. Here we use the foreach control structure.

  foreach($HTTP_POST_VARS as $postname=>$postvalue)
    {
     //e.g
      echo "<input type ='hidden' value='".$postvalue."' name='".$postname."'
";

    }

All the above is put to use when we build a shopping cart in our case study.