PHP Sessions vs. jQuery show()/hide()

Question

I´m working with a purchase process. The process consists of 4 steps. The first two steps is where we take in all customer data. The 3rd step sends the data to our servers with AJAX and then shows a payment form. After payment the customer is thanked in step 4.

My question is about Step 1 and Step 2. Right now all these steps are on the same page. I have one form divided into two <div>'s. In the first step the second div is hidden (css: {display:none;}) and when the customer goes to step 2, the first div is hidden with jQuery hide() and the second div shown with jQuery show().

My problem is that I want the customer the possibility to go back to step 1 using the "back"-button in the web browser, which obviously not work right now. Is there any pure JavaScript solutions for this? We will demand our users to activate js anyways. Or is it better to start using sessions? The site is based on PHP.

We'll see if there is anyone that understand my thoughts and problem..

Answer 1

Ajax and the back button don't usually play well together. You should just provide a link that will take the "back". But will this have any issues if you submit the first form again? Will you end up with extra or orphaned entries?

Answer 2

Changing the URL fragment (the bit after the #) creates a browser history entry. Lots of webapps take advantage of this to do just what you're describing. Take a look at the jQuery BBQ plugin (demo here).

Answer 3

The easiest cheat for this (and it is far from reliable) is to have a javascript function that specifically listens for a "window.unload" event, but only when the user has the second part of the form visible and is NOT hitting a submit button or anything else that you have set up to submit or go to another page (like a link).

But this is fairly intrusive, in that the user may really just want to leave the page; it's hard to set up the timing just right, as you only want to return false if the user is clicking back from the second form, not leaving the page for anything else (including what you want); it could screw up if they want to actually close the window (which you should try not to infringe on); and basically, as far as I know, there isn't a cross-browser javascript event for user clicking the back-button. But someone else may no otherwise.

But if you can work out the timing and don't mind taking the risk, it would be a neat trick.