homepage Welcome to WebmasterWorld Guest from 54.204.128.190
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Keep form data when going back
mightymouse3062




msg:4219285
 2:23 pm on Oct 20, 2010 (gmt 0)

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




msg:4219359
 5:08 pm on Oct 20, 2010 (gmt 0)

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




msg:4219402
 7:04 pm on Oct 20, 2010 (gmt 0)

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




msg:4219438
 8:06 pm on Oct 20, 2010 (gmt 0)

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




msg:4220431
 3:56 pm on Oct 22, 2010 (gmt 0)

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




msg:4220601
 8:20 pm on Oct 22, 2010 (gmt 0)

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

Thanks,
Mike

rocknbil




msg:4221033
 7:26 pm on Oct 23, 2010 (gmt 0)

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




msg:4221193
 6:17 am on Oct 24, 2010 (gmt 0)

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




msg:4221373
 8:42 pm on Oct 24, 2010 (gmt 0)

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




msg:4221579
 12:36 pm on Oct 25, 2010 (gmt 0)

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




msg:4221618
 2:47 pm on Oct 25, 2010 (gmt 0)

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




msg:4221659
 4:05 pm on Oct 25, 2010 (gmt 0)

<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




msg:4221680
 4:55 pm on Oct 25, 2010 (gmt 0)

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

mightymouse3062




msg:4221736
 6:37 pm on Oct 25, 2010 (gmt 0)

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




msg:4224825
 12:58 pm on Nov 1, 2010 (gmt 0)

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




msg:4224829
 1:08 pm on Nov 1, 2010 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved