Webpage has expired

lerro

I have a problem with my PHP application.

I have a multi-step form that a user fills in, the data is posted, the database is queried and then the next page displays relevant options based on the previous input that was posted by the form and queried against the database.

This next page also has a form which the user clicks and the same process is repeated, as the returned values are stored as hidden IDs within the form parameters so that when a user selects an option and submits, the selected ID is posted.

In the first page, dates are entered into the form then when the form is submitted, the database is queried for items that match the given dates, say an event. Then the matching events are displayed on a new page and the user selects from the listed events which are then submitted using a form and the third page will require the user to then enter personal details.

The problem comes up when the back button is clicked, the message "Webpage has expired" comes up. How can i resolve this as other applications have the ability to show previous page data even though there is a form on the page that submitted values.

Krik

The way other applications do it is with AJAX and CSS.

On those applications they have you click a continue button and then via AJAX they send the data to a server side script. The reply from that server side script can cause a new div to be shown using CSS. This is done by just taking a hidden div, with the new form and displaying it in place of the previous form. And the previous form is then hidden but with the data still in place.

Usually sites that do it this way make it obvious that you can go back to the previous "pages" either by having each page in a tab and/or having a custom back button in the page. And if the user does click the browser back button before the final submit you use the "onunload" event handler to trigger a prompt to ask them if they wanted to leave the page before saving the data.

If you want to make sure they don't click the back button open the form in a new window using javascript to make sure the navigation buttons are not displayed.

window.open('http://www.yoursite.com/yourform.php','yourwindow','width=750,height=600,toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1')

You could then even take that one step future and make a custom navigation bar at the top that mimics their browsers navigation bar, in appearance but when they click the buttons they run javascript functions that look to do something similar to the browser, but without the errors or accidentally leaving the form page.

lerro

Ajax is one way but what if i'm not using Ajax?

Look at the site below

https://www.cabfind.com/cashbooking/index.asp

It has 4 steps and there is no Ajax being used. It uses forms and one can click the back button and the previous page is displayed and not "Webpage has expired".

Krik

First, AJAX means Asynchronous JavaScript and XML. AJAX is javascript that sends an http request to a server side script and then retrieves the reply from that server side script. At least that is what it is basically the advanced description is more involved and would serve to only confuse.

Second, I had assumed you were doing somthing more complex, hence why I suggested AJAX.

The site you have referenced is using an SSL which means a session is being used. The webpage expired message you see for what you are doing is likely a security feature of the browser but with a session the browser knows that you are the same person that submitted the previous form thereby it would allow you to go back.

I did go through and look at what they did on a few different browsers and most allow the back button with no problem some older browser versions (still commonly used) did however giver be an alert when I hit the back button meaning their way is do able but not the best.

Looking over what they have I think I would be more inclined, in their case, to load all parts of the form including all the possible select box variations, as the load time would be very minimally effected. Then use javascript to swap the contents as the user changes and clicks different parts.

Of course that is me looking at it from the outside. Every case is different and in general there are a few different ways to handle what you are wanting to do.