Keep form data when going back

[mightymouse3062]

Good Morning,
I am working on coding a staff application and one of the problems I have is after someone clicks on continue to view the information and confirm that everything entered is accurate, if they click the back button to possibly go back to edit the page all of the data disappears. I am not sure how to fix the problem.

The form is broken down into multiple files because it is fairly large.

Below is a snippet of the code:

<form name="staffApplication" method="post" action="<?php echo ROOT_HTTP; ?>/index.php?option=apply&result=1">
  <table align="center" cellpadding="0" cellspacing="0" border="0" width="100%">
    <tr>
      <td>
        <div align="center" style="font-size:16pt; font-weight:bold;">2011 SUMMER CAMP STAFF EMPLOYMENT APPLICATION</div>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <div align="center" style="font-size:8pt;">Completion of this form is an application only and NOT a guarantee of employment</div>
      </td>
    </tr>
    <tr>
      <td>&nbsp;
        
      </td>
    </tr>
    <tr>
      <td>
        <fieldset style="border:1px solid #999;">
          <legend style="font-size:12pt;"><b>Employment Information</b></legend>
          <table align="center" cellpadding="3" cellspacing="3" border="0" width="100%">
            <tr>
              <td align="left">
                Select Camp: 
                Horseshoe<input type="radio" name="campApplication" value="1"> 
                Ware<input type="radio" name="campApplication" value="2"> 
                No Preference<input type="radio" name="campApplication" value="3">
              </td>
            </tr>
          </table>
        </fieldset>
      </td>
    </tr>
    <tr>
      <td>&nbsp;
        
      </td>
    </tr>
    <tr>
      <td>
        <fieldset style="border:1px solid #999;">
          <legend style="font-size:12pt;"><b>Personal Information</b></legend>
          <table align="center" cellpadding="3" cellspacing="3" border="0" width="100%">
            <tr>
              <td align="left">
                <input type="text" name="applicantName" size="60" value="Name" onblur="if(this.value=='') this.value='Name';" onfocus="if(this.value=='Name') this.value='';">
              </td>
              <td align="right">
                <input type="text" name="applicantUnitNumber" size="30" value="Unit Number" onblur="if(this.value=='') this.value='Unit Number';" onfocus="if(this.value=='Unit Number') this.value='';">
              </td>
            </tr>
          </table>
          <table align="center" cellpadding="3" cellspacing="3" border="0" width="100%">
            <tr>
              <td align="left">
                <input type="text" name="applicantHomeAddress" size="70" value="Home Address" onblur="if(this.value=='') this.value='Home Address';" onfocus="if(this.value=='Home Address') this.value='';">
              </td>
              <td align="right">
                <input type="text" name="applicantHomePhone" size="20" value="Phone Number" onblur="if(this.value=='') this.value='Phone Number';" onfocus="if(this.value=='Phone Number') this.value='';">
              </td>
            </tr>
          </table>
          <table align="center" cellpadding="3" cellspacing="3" border="0" width="100%">
            <tr>
              <td align="left">
                <input type="text" name="applicantHomeCity" size="53" value="City" onblur="if(this.value=='') this.value='City';" onfocus="if(this.value=='City') this.value='';">
              </td>
              <td align="center">
                <input type="text" name="applicantHomeState" size="15" value="State" onblur="if(this.value=='') this.value='State';" onfocus="if(this.value=='State') this.value='';">
              </td>
              <td align="right">
                <input type="text" name="applicantHomeZip" size="15" value="Zip Code" onblur="if(this.value=='') this.value='Zip Code';" onfocus="if(this.value=='Zip Code') this.value='';">
              </td>
            </tr>
          </table>
          <p><hr style="color:#999;" size="1"></p>
          <table align="center" cellpadding="3" cellspacing="3" border="0" width="100%">
            <tr>
              <td align="left">
                <input type="text" name="applicantCollegeAddress" size="70" value="College Address" onblur="if(this.value=='') this.value='College Address';" onfocus="if(this.value=='College Address') this.value='';">
              </td>
              <td align="right">
                <input type="text" name="applicantCollegePhone" size="20" value="Phone Number" onblur="if(this.value=='') this.value='Phone Number';" onfocus="if(this.value=='Phone Number') this.value='';">
              </td>
            </tr>
          </table>
          <table align="center" cellpadding="3" cellspacing="3" border="0" width="100%">
            <tr>
              <td align="left">
                <input type="text" name="applicantCollegeCity" size="53" value="City" onblur="if(this.value=='') this.value='City';" onfocus="if(this.value=='City') this.value='';">
              </td>
              <td align="center">
                <input type="text" name="applicantCollegeState" size="15" value="State" onblur="if(this.value=='') this.value='State';" onfocus="if(this.value=='State') this.value='';">
              </td>
              <td align="right">
                <input type="text" name="applicantCollegeZip" size="15" value="Zip Code" onblur="if(this.value=='') this.value='Zip Code';" onfocus="if(this.value=='Zip Code') this.value='';">
              </td>
            </tr>
          </table>
          <p><hr style="color:#999;" size="1"></p>
          <table align="center" cellpadding="3" cellspacing="3" border="0" width="100%">
            <tr>
              <td align="left">
                <input type="text" name="applicantEmail" size="59" value="Email Address" onblur="if(this.value=='') this.value='Email Address';" onfocus="if(this.value=='Email Address') this.value='';">
              </td>
              <td align="right">
                Are you: <select name="applicantAgeRange">
                  <option value="0" selected="selected">- Select Age -</option>
                  <option value="1">Younger than 15 years old</option>
                  <option value="2">15 to 17 years old</option>
                  <option value="3">18 to 20 years old</option>
                  <option value="4">Over 21 years old</option>
                </select>
              </td>
            </tr>
          </table>
          <p><hr style="color:#999;" size="1"></p>
          <table align="center" cellpadding="3" cellspacing="3" border="0" width="100%">
            <tr>
              <td align="left">
                Have you ever been convicted of a felony: 
                Yes<input type="radio" name="applicantFelony" value="2">
                No<input type="radio" name="applicantFelony" value="1">
                <div style="font-size:8pt;">(You may answer "no" if your conviction has been ordered sealed, expunged, or eradicated.)</div>
                <div><br /><b>All</b> applicants over 18 will be expected to submit a <b>Request for Criminal Record.</b></div>
              </td>
            </tr>
          </table>
          <p><hr style="color:#999;" size="1"></p>
          <table align="center" cellpadding="3" cellspacing="3" border="0" width="100%">
            <tr>
              <td width="28%">
                Select T-Shirt Size: 
              </td>
              <td width="12%">
                S<input type="radio" name="applicantShirtSize" value="1">
              </td>
              <td width="12%">
                M<input type="radio" name="applicantShirtSize" value="2">
              </td>
              <td width="12%">
                L<input type="radio" name="applicantShirtSize" value="3">
              </td>
              <td width="12%">
                XL<input type="radio" name="applicantShirtSize" value="4">
              </td>
              <td width="12%">
                XXL<input type="radio" name="applicantShirtSize" value="5">
              </td>
              <td width="12%">
                3XL<input type="radio" name="applicantShirtSize" value="6">
              </td>
            </tr>
          </table>
        </fieldset>
      </td>
    </tr>

Here is the process page:

if($result == 1){
  $info = $_POST;
  
  // Validate the data
  if($info['campApplication'] > 0){
    if($info['applicantName']){
      if($info['applicantUnitNumber']){
        if($info['applicantHomeAddress']){
          if($info['applicantHomePhone']){
            if($info['applicantHomeCity']){
              if($info['applicantHomeState']){
                if($info['applicantHomeZip']){
                  if($info['applicantEmail']){
                    if($info['applicantAgeRange']){
                      if($info['applicantFelony']){
                        if($info['applicantShirtSize'] > 0){
                          if(($info['applicantAge'] >= 18) || ($info['applicantAge'] < 18 && $info['parentName'] && $info['parentPrimaryPhone'] && $info['parentEmail'] && $info['parentAltPhone'])){
                            if(($info['applicantAvailability'] == 1) || ($info['applicantAvailability'] == 2 && ($info['applicantAvailabilityStartDate'] && $info['applicantAvailabilityEndDate'] && $info['applicantAvailabilityEvent']))){
                              if($info['positionDesired'][1]){
                                if($info['positionDesired'][2]){
                                  if($info['positionDesired'][3]){
                                    if($info['positionDesired'][4]){
                                      if($info['leadershipPositions']){
                                        if($info['certifications']){
                                          if($info['eagleScout']){
                                            if($info['referenceName'][1] && $info['referenceAddress'][1] && $info['referencePhone'][1]){
                                              if($info['referenceName'][2] && $info['referenceAddress'][2] && $info['referencePhone'][2]){
                                                if($info['referenceName'][3] && $info['referenceAddress'][3] && $info['referencePhone'][3]){
                                                  $info = cleanupData($info);
                                                  $_SESSION['applicationInfo'] = $info;
                                                  
                                                  echo displayConfirmation($info);
                                                } else {
                                                  // Reference 3
                                                  echo "Please enter the information for your third reference";
                                                }
                                              } else {
                                                // Reference 2
                                                echo "Please enter the information for your second reference";
                                              }
                                            } else {
                                              // Reference 1
                                              echo "Please enter the information for your first reference";
                                            }
                                          } else {
                                            // Eagle Scout
                                            echo "Please select if you are an eagle scout";
                                          }
                                        } else {
                                          // Certifications
                                          echo "Please enter any certifications you have";
                                        }
                                      } else {
                                        // Leadership
                                        echo "Please enter the leadership experience you have";
                                      }
                                    } else {
                                      // Position 4
                                      echo "Please enter your forth choice for a position";
                                    }
                                  } else {
                                    // Position 3
                                    echo "Please enter your third choice for a position";
                                  }
                                } else {
                                  // Position 2
                                  echo "Please enter your second choice for a position";
                                }
                              } else {
                                // Position 1
                                echo "Please enter your first choice for a position";
                              }
                            } else {
                              // Applicant Unavailable
                              echo "Please select your availablity";
                            }
                          } else {
                            // Under 18 
                            echo "Please enter your parents information";
                          }
                        } else {
                          // Shirt Size
                          echo "Please select your shirt size";
                        }
                      } else {
                        // Felony
                        echo "Please select if you have been convicted of a felony";
                      }
                    } else {
                      // Age
                      echo "Please enter your age";
                    }
                  } else {
                    // Email
                    echo "Please enter your email address";
                  }
                } else {
                  // Zip
                  echo "Please enter the zip code";
                }
              } else {
                // State
                echo "Please enter the state";
              }
            } else {
              // City
              echo "Please enter the city";
            }
          } else {
            // Home Phone
            echo "Please enter your home phone number";
          }
        } else {
          // Address
          echo "Please enter your address";
        }
      } else {
        // Unit Number
        echo "Please enter your unit number";
      }
    } else {
      // Name
      echo "Please enter your name";
    }
  } else {
    // Select Camp
    echo "Please select a camp";
  }
}

The entire form is located at [hsr-bsa.org...]

How do I fix this?

Thanks,
Mike

[incrediBILL]

One simple way to stop it is to open that form in a new window or tab, therefore there is no back button on the window/tab with the form, and they can still browse the website in the previous window/tab.

Low tech, 2 second fix.

[mightymouse3062]

I like that fix and it works well, however if they refresh the page all of the information is lost as well.
In knowing some of the people that will be filling this form out... it needs to be as user friendly as possible.

Thanks,
Mike

[Dijkgraaf]

1) When you open up the new window, do it without the toolbar.
2) Trap the F5 key and a few others, and don't allow it to refresh (see below)
Otherwise you will have to save the state of the page (search for view state) and handle when you want to when it should use the previously entered and when is should be a fresh form.

Sample JavaScript

document.onkeydown = trapKey;

function trapKey(evt) {
evt = (evt) ? evt : window.event;
if (evt) {
if (evt.keyCode == 8 && (evt.srcElement.type != "text" && evt.srcElement.type != "textarea" && evt.srcElement.type != "password")) {
// When backspace is pressed but not in form element
cancelKey(evt);
}
else if (evt.keyCode == 116) {
// When F5 is pressed
cancelKey(evt);
}
else if (evt.keyCode == 122) {
// When F11 is pressed
cancelKey(evt);
}
else if (evt.ctrlKey && (evt.keyCode == 78 || evt.keyCode == 82)) {
// When ctrl is pressed with R or N
cancelKey(evt);
}
else if (evt.altKey && evt.keyCode==37 ) {
// stop Alt left cursor
return false;
}
}


function cancelKey(evt) {
if (evt.preventDefault) {
evt.preventDefault();
return false;
}
else {
evt.keyCode = 0;
evt.returnValue = false;
}
}

[rocknbil]

if they click the back button to possibly go back to edit the page all of the data disappears. I am not sure how to fix the problem.

This is due to, most likely, your server configuration, it's not allowing caching. Especially true of PHP apps that generate the forms. Rather than fix it with Javascript or patches in your programming you might look into the configuration of the server, I see it a lot and it's rather annoying. :-)

also check the actual HTML headers, make sure there's no no-cache, etc. being output in your pages.

[mightymouse3062]

How would I check the headers to see if it is allowing caching?

Thanks,
Mike

[rocknbil]

I meant the headers in your page output (but don't chase it too hard, it's not likely that, it's more likely the http headers from the server.)

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="Sat, 23 Oct 2010 00:00:00 GMT">

[phranque]

How would I check the headers to see if it is allowing caching?

Live HTTP Headers :: Add-ons for Firefox:
https://addons.mozilla.org/en-US/firefox/addon/3829/ [addons.mozilla.org]

[kaled]

I haven't looked closely at what you're trying to do but it looks like simple form validation - so why not use javascript? However, assuming there's a good reason...

Relying on the back button is always going to be iffy. Your form processor should always move forwards - if there's an error on the page it should be reshown with all fields completed (but still editable) and with the error(s) highlighted.

If you're prepared to use javascript, why not create one huge page with tabs and validate each tab when the user attempts to move on. I've never tried anything like this, but it should be possible to place multiple tabs within a single form so that all the data can be submitted in one go at the end.

When filling in complex forms, people often like to be able to flip back and forth between pages so this approach will be far more user-friendly.

Kaled.

[milosevic]

I like kaled's idea, I feel this is the best way to design complex forms with currently available technology.

Is is possible to pop up a confirmation box on refresh/back e.g. "are you sure you want to leave this page?" - or is that something that is done by user-agents e.g. Firefox automatically?

[mightymouse3062]

Good Morning,
I have the application that a user fills out. I have it broken down into several blocks of information and when the user clicks on continue it validates everything via javascript. From there, after all of the fields are validated, it goes to a confirmation page that displays all of the information the user just entered and has a "disclaimer" message. When they click on agree it takes the data, puts it into a database, and using TCPDF creates a pdf of the application and emails it.

The problem is when I am on the first page filling the form out and I click refresh all of the data disappears. Same as after I click continue to the second page (where it displays all of the information) and I click the back button (possibly to change something entered), the data disappears.

So, I added the code

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="Sat, 23 Oct 2010 00:00:00 GMT"> 

and the problem still existed (I changed the expires date to 2 days in advance as well).

I tried this on another server, that I have never had a problem with loosing the data, and the problem still exists. If I enter data directly into the file where the form is stored, there is no problem with keeping the form data. If I have it included in another file, the data disappears. I am using the PHP require_once() function to include the file inside another file.

On a side note, somehow I managed to mess up the javascript which is causing some problems. A few people have been able to submit the form, even with all of the validation checks I did in javascript, with bad data. I have not been able to duplicate the problem... can someone look at the code and see if I missed something? A copy of the javascript is at [gta-nation.com...]

I like kaled's idea as well and to add to it, if I cant get whatever problem that is causing the data not to stay automatically, to change where the refresh and back buttons and send them to some "processing" page that will put the data into a session or whatever form page can read and input the data.

This all seems complicated and possibly going to cause more problems... is there a simple solution to keeping the data in the page?

Thanks a lot,
Mike

[kaled]

<meta http-equiv="Cache-Control" content="no-cache">

I think caching must be enabled not disabled. Also, rather than using <meta http-equiv> use the the http headers directly - since you're using php, that should not be a problem.

Behaviour could be browser-dependent - I certainly would not want to rely on behaviour that's not absolutely specified somewhere in black and white (but maybe it is).

Kaled.

[rocknbil]

Right mightymouse, I meant that make sure that's NOT there - those will prevent caching. Sorry if it confused you.

[mightymouse3062]

Not a problem.

I have been working on this a bit more and its really annoying me that this problem is happening... so I started stripping code and it turns out I stripped it down to I have 2 files that are the exact same code.
[gta-nation.com...]
[gta-nation.com...]

application.php keeps the data if it is refreshed without a problem. index.php does not. I checked the permissions for both of the files and they are the same at 0644. Both folders (campstaff & pages) have permissions of 0755.

So, to try and figure out where the problem lies, I opened the index.php file and saved it as form.php and it works without a problem. I have cleared all of my browser cookies, cache, etc multiple times.


Any thoughts on why index.php is causing the problem?

Thanks,
Mike

[milosevic]

I can only image that since changing the filename (with no other changes) fixed the problem, that directory index files are being treated differently in your server setup (ie httpd.conf)

[mightymouse3062]

Good Morning,
Since this is a shared host, I dont have direct access to the server setup. How would I figure out what it is configured as and then go about changing those settings?

Thanks for your assistance,
Mike