Question:

I've created a basic form with a couple of radio buttons, edit fields, checkboxes and a listbox. The HTML code for it is shown below. How do you process the information so that when the user clicks the submit button (and if some of the information is missing or incorrect), the form retains and displays the correct information in the input fields while displaying and an error symbol for the fields that need attention?

<form name="Form1" action="<php echo $_SERVER['PHP_SELF']; ?>" method="POST">
<p>Room Number<br />
<input type="text" name="roomnumber" maxlength="60" size="60" /></p>

<p>Gender<br />
<input type="radio" name="gender" value="M" />Male  
<input type="radio" name="gender" value="F" />Female  
<input type="radio" name="gender" value="N" />Not Sure</p>

<p>Select type of breakfast you want<br />
<input type="checkbox" name="Cereal" />Cereal  
<input type="checkbox" name="Toast" />Toast  
<input type="checkbox" name="Bacon and Eggs" />Bacon and Eggs</p>

<p>Select the Size of the Breakfast<br />
<select name="breakfastSize" size="1">
  <option value="" selected>Please Select</option>
  <option value="3">King Size</option>
  <option value="2">Normal Size</option>
  <option value="1">Small Size</option>
</select></p>

<p><input type="submit" name="submit" value="submit" /></p>
</form>

Additional Notes

See the entire source code for this example. more

See a working website with this code. more

Answer:

For this example we'll break the form into logical groups. The room number is one group, gender is another, type of breakfast and size of breakfast make up the remaining groups. What this means is that for the form to be processed correctly, the room number must be entered, the gender selected, at least one of the checkboxes ticked (for the type of breakfast) and the size of the breakfast selected.

To aid our task, each group will have a corresponding boolean variable to indicate successful validation. That way if one group fails the validation, we'll be able to report which particular part of the form needs attention.

We'll process the form in the same script that was used to generate the form. This way, we'll be able to display the form again if the data was not validated, and display a thank-you note if the form was validated.

Making the textbox sticky

Sticky forms are dealt with slightly differently than normal forms are, and we need to keep this in mind. Essentially we must be aware (and cautious) of the fact that some form elements will be populated with values from submitted information. We must also be careful that we don't attempt to populate form values with information that hasn't actually been submitted.

To start, it would be good if you saw the working example. This will give you an idea of what we need to achieve, and you'll notice that we are not just looking at sticky forms, but also changing the display for incorrect form elements.

<?php
$RN = '';
$GN = '';
$BK = '';
$BS = '';

if(isset($_POST['submit']))
  {
  //process the text-input field
  if(isset($_POST['roomnumber']) && is_numeric($_POST['roomnumber']))
    $RN = (int)$_POST['roomnumber'];
  else
    $RN = false;
    
  ...PROCESSING OTHER ELEMENTS...
  
  //if all entries okay, process information, display message and exit script.
  if($RN && $GN && $BK && $BS)
    {
    //...process information...
    echo '<p>Everything is in order...</p>';
    echo '</body></html>';
    exit();
    }
  }


echo '<h2>Sample demonstration of Sticky Forms</h2>';
echo '<form name="Form1" action="' . $_SERVER['PHP_SELF'] . '" method="POST">';

//display text-input label for room-number
if(isset($_POST['submit']) && !$RN)
  echo '<p><font color="red" size="+1"><b>! Room Number</b></font><br />';
else
  echo '<p>Room Number<br />';

//display the text-input field
echo '<input type="text" name="roomnumber" maxlength="60" size="60"
               value="' . $RN . '" /></p>';
...DISPLAY OTHER ELEMENTS...

First we define a series of element variables and initialize them to an empty string. The $RN is for the roomnumber element. If the roomnumber is set, and is also a numeric, then $RN is assigned the value that the user entered. Otherwise $RN is assigned false.

After processing all the other elements a check is made to see if all the element variables have been set appropriately. If they have then the form is processed, a message (Everything is in order...) is displayed on the browser and the script finishes up. If the variables haven't been set appropriately then the form is redisplayed.

The first difference you'll notice is the check if the form has been submitted and if $RN is false. If this criteria is met then it means that there was a problem processing this particular element and the text input label is displayed in a larger font with angry red writing.

Finally the input field itself is displayed with a value of $RN. This value initially contains an empty string (set at the start), however it may contain the value the user entered if this element was processed okay but the form had to be redisplayed.

Additional Notes

If all you want is a sticky form (without the extra formatting), then it can easily be done like this:

<input type="text" name="roomnumber" maxlength="60" size="60"
       value="<?php if(isset($_POST['roomnumber'])) echo $_POST['roomnumber']; ?>" />

Making the radio buttons sticky

This follows a very similar path to that as the Text input field. First we create a $GN variable to be used. This is initialized to an empty string, however if the form has been submitted, then this value may change to either false or the value that represents the checkbox the user selected.

$GN is then used for the radio button label where if it is false, and the form had been submitted then a different size and color font is used for the label. $GN is also used as a comparision against the value of the radio button to determine if the button is 'checked' or not.

<?php
$RN = '';
$GN = '';
$BK = '';
$BS = '';

if(isset($_POST['submit']))
  {
  ...PROCESS THE TEXT INPUT FIELD...

  //process the radio buttons
  if(isset($_POST['gender']))
    $GN = $_POST['gender'];
  else
    $GN = false;
    
  ...PROCESS OTHER ELEMENTS...
  
  //if all entries okay, process information, display message and exit script.
  if($RN && $GN && $BK && $BS)
    {
    //...process information...
    echo '<p>Everything is in order...</p>';
    echo '</body></html>';
    exit();
    }
  }


echo '<h2>Sample demonstration of Sticky Forms</h2>';
echo '<form name="Form1" action="' . $_SERVER['PHP_SELF'] . '" method="POST">';

...TEXT INPUT FIELD FOR ROOM NUMBER...

//display the radio label for gender
if(isset($_POST['submit']) && !$GN)
  echo '<p><font color="red" size="+1"><b>! Gender</b></font><br />';
else
  echo '<p>Gender<br />';

//display the radio buttons
if($GN == 'M')
  echo '<input type="radio" name="gender" value="M" checked />Male  ';
else
  echo '<input type="radio" name="gender" value="M" />Male  ';

if($GN == 'F')
  echo '<input type="radio" name="gender" value="F" checked />Female  ';
else
  echo '<input type="radio" name="gender" value="F" />Female  ';

if($GN == 'N')
  echo '<input type="radio" name="gender" value="N" checked />Not Sure</p>';
else
  echo '<input type="radio" name="gender" value="N" />Not Sure</p>';
//-----

Additional Notes

$GN contains the value of $_POST['gender'] if the form had been submitted and a radio button was checked. To create a sticky radio button without the formatting, the following code can be used.

if(isset($_POST['gender']) && $_POST['gender'] == 'M')
  echo '<input type="radio" name="gender" value="M" checked />Male';
else
  echo '<input type="radio" name="gender" value="M" />Male';

PHP Reference Manual

$_POST - POST array containing form elements and values

$_SERVER - SERVER array containing server information

empty - Checks to see if a variable is empty (null, empty string, false, 0)

exit - exits from a script

get - GET array containing URL elements and values

isset - Checks to see if a variable is set

is_numeric - Checks to see if a variable is numeric

switch - A multiple conditional statement on a variable

Comments or questions relating to this article have been disabled. They will be back soon.