Handling back button

Question

I have a sign-up form that takes several steps.

In one of the steps, they fill up some information, and they select some images to upload.

The next step, they see a review of their application.

What is likely to happen next is that if the user sees something he doesn't like, he will hit the back button to change what's on the form.

However:

1) He might get one of those browser warning message about form submissions

2) If he does go back, I want the file-upload module to behave differently (maybe show the images he uploaded, allowing him to change the one he wants)

How can I more control of what the user sees if he clicks the back button?

PS. I'm using PHP (html, javascript, whatever ...). For other parts of the application process I used ajax behavior to save anything they do in real-time (checking boxes, etc ...). So I made the "continue" button just a regular link. Here however, uploading files makes this process more difficult.

Answer 1

I'm not sure there's much you can do about the browser warning that occurs if the pages has been posted to. I would provide a separate back button (wizard style) for the user that handles state. If they do use the browser's back button and ignore the browser warning then you could potentially keep track of the user's last known state using a session variable or a cookie, etc.

Answer 2

You've pretty much answered your own questions in the sense that you recognise you need to code each stage of your form so that it is aware of the "state". I've done some very similar sounding forms in which I kept track of each stage in session variables, only committing the data (as in to db) after the "Confirm your details" stage.

You can see an example here if you're interested. In this form, the files-upload part happens during the "Sponsorship details" stage. These forms are designed to work with or without Javascript. Nothing is sent or saved until the final stage so feel free to play around - upload some sample files then step back to see what happens.

P.S. An advantage (I found) of using session variables to track each stage is that it makes saving and re-instituting the form very simple as all you need to do is serialize the $_SESSION array and save it to a database field.

Answer 3

1) He might get one of those browser warning message about form submissions

See: Post/Redirect/Get

2) If he does go back, I want the file-upload module to behave differently (maybe show the images he uploaded, allowing him to change the one he wants)

See: da5id's answer.

Answer 4

Concerning point 1): use the Post/Redirect/Get pattern. This pattern is simple, yet effective. After a user POSTs a form, redirect them to the next page with a GET request.

Something like this (untested):

<?php

    // let's say you determine the current step in the wizard with a GET parameter
    $step = isset( $_GET[ 'step' ] ) ? intval( $_GET[ 'step' ] ) : 1;

    if( 'post' == strtolower( $_SERVER[ 'REQUEST_METHOD' ] ) )
    {
        // we have a POSTed form submission

        /*
            handle form submission
        */

        if( $success )
        {
            // successful form submission, so increment step
            $step += 1;
        }
        else
        {
            // NON-successful form submission
            /*
                maybe save some error messages in a SESSION
            */
        }

        /*
            complete the POST/REDIRECT/GET pattern

            redirect to the desired step in the wizard process with a GET request,
            this prevents re-submission by browser refreshes and backbuttons
        */
        header( 'Location: http://example.com/yourformwizard?step=' . $step );
    }