How can web form content be preserved for the back button

Question

When a web form is submitted and takes the user to another page, it is quite often the case that the user will click the Back button in order to submit the form again (the form is an advanced search in my case.)

How can I reliably preserve the form options selected by the user when they click Back (so they don't have to start from scratch with filling the form in again if they are only changing one of many form elements?)

Do I have to go down the route of storing the form options in session data (cookies or server-side) or is there a way to get the browser to handle this for me?

(Environment is PHP/JavaScript - and the site must work on IE6+ and Firefox2+)

Answer 1

I'd put it in the session.
It's going to be the most reliable and even if they don't go straight "back", it'll still have their search options there. Putting it in the cookie would also work, but wouldn't be recommended unless it's a very small form.

Answer 2

I believe you're at the mercy of the browser. When you hit back, the browser does not make a new request to the server for the content, it uses the cache (in nearly every browser I've seen anyway). So anything server-side is out.

I'm wondering if you could do something very complicated like storing the search result in a cookie during the onunload event of the results page, and then reading the cookie in javascript on the search page and filling in the form - but this is just speculation, I don't know if it would work.

Answer 3

The problem you have is that the browser will return a cached version of the page, and probably not ask the server for it again, meaning using the session would be irrelevant.

You could however use AJAX to load the details of the previously submitted form on the page's load event.

Answer 4

You would basically have to store it on your server in some way (probably in session variables, as suggested) after the POST. You also have to setup Javascript on the form page to execute on load to issue an AJAX call to get the data from your server (in, say, JSON format) and prefill the form fields with the data.

Example jQuery code:

$( document ).ready( function() {
  $.getJSON(
    "/getformdata.php",
    function( data ) {
      $.each( data.items, function(i,item) {
        $( '#' + item.eid ).val( item.val );
      } );
    });
} );

Your /getformdata.php might return data like:

{
  'items': [
    {
      'eid': 'formfield1',
      'val': 'John',
    },
    {
      'eid': 'formfield2',
      'val': 'Doe',
    }
  ]
}

and it would obviously return an empty array if there were nothing saved yet for the session. The above code is rough and untested, but that should give you the basic idea.

As a side note: current versions of Opera and Firefox will preserve form field content when going Back. Your JS code will overwrite this, but that should be safe.

Answer 5

Another ajaxy options (so it's not good for users without javascript) is to submit the form via javascript and then go the confirmation page (or show the message on the form by replacing the button with a message). That way there is no "back" possible.

Answer 6

Why not store the values into a cookie before submitting? You could also include a timestamp or token to indicate when it was filled out. Then when the page loads, you can determine whether you should fill in the fields with data from the cookie, or just leave them blank because this is a new search.

Answer 7

It's up to the browser, but in most cases you don't have to do anything.

IE, Firefox, etc. will happily remember the contents of the form in the previous page, and show it again when Back is clicked... as long as you don't do anything to stop that working, such as making the page no-cache or building the form entirely from script.

(Putting stuff in the session is likely to confuse browsers with two tabs open on the same form. Be very careful when doing anything like that.)

Answer 8

You could also do everything local by javascript. So you store a cookie with the search value and on pageload you check if the cookie exists. Something like this:

$('#formSubmitButton').click( function() {
    var value = $('#searchbox').val();
    var days = 1;
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
    document.cookie = "searchbox="+value+expires+"; path=/";
});

$(document).ready( function() {
    var nameEQ = "searchbox=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
     var c = ca[i];
     while (c.charAt(0)==' ') c = c.substring(1,c.length);
     if (c.indexOf(nameEQ) == 0) var valueC = c.substring(nameEQ.length,c.length);
   }
   $('#searchbox').val(valueC);
});

Have not tested this but is should work. You will need jQuery for this.

Cookie functions came from: http://www.quirksmode.org/js/cookies.html

I should say btw that both FireFox and IE have this behaviour by default.

Answer 9

Im not sure that session variables are the most sensible idea. End users do some pretty weird things!