Question

I am developing a form using Javascript for styling that will be used to submit many different things. However, the majority of the time the different things will only be slightly different so it would really benefit users if when you press the Back button on the browser, the form is exactly as you left it before you submitted the form.

Note: This already works when using a normal HTML/Javascript-less form, the question I am asking is how I can retain this functionality when using Javascript to hide/replace input fields etc.

I’ve tried History.js and HTML5’s replaceState() but nothing seems to work. Also if it helps, this will be a private website that requires the latest browser installed so don’t feel hesitant to recommend solutions only available in the latest browser releases.

Many thanks!

Update #1: Here’s an image better explaining what I need.

Update #2: Okay I managed to crack it perfectly, cross-browser included. I’ll post a solution tomorrow after I’ve had some sleep.

Answer 1

Okay so I went back to the drawing board and tried to figure something out using the tools I already know exist. The case with each browser (usually, haven’t tested any non-major browsers) is that when you press the Back button after submitting a form, text input fields are usually populated. I wanted to see if this worked the same with hidden input fields, turns out it does!

So next I set up some Javascript events to listen out for the page load.

if($.browser.mozilla)
{
    $(window).on('pageshow', pageManager.init);
}
else
{
    $(pageManager.init);
}

This works for Chrome, Firefox and IE9. I haven’t tested any other browsers but these are the only browsers that will be used for my private site so it’s good enough for me. I’m sure you can set up your own preferred solution for your needs but this is what worked best for me.

Anyway the above code means every time the page loads, pageManager.init() will run. Here’s an excerpt of the code I use to check if the Back button was pressed and it’s not simply just a page refresh or a first-time visit:

if($('input[name="form_submitted"]').val() != '')
{
    // back button was pressed
}

As you can see, it’s as simple as checking if your hidden form field contains a value. To actually guarantee a value will be set, make sure to set on submission of your form:

$('#my-form').submit(function()
{
    $('input[name="form_submitted"]').val('true');
}

It really is as simple as that. This is one of the best methods I can think of for determining if the Back button of a browser was pressed. Now, to cache all the form values for the visible fields it can be as simple as using JSON.stringify() on the fields and sticking it all in one hidden field which you decode later.