When clicking back button some form fields update with previous data, others do not

Question

I have a small search form in the header of my site. In the form you can enter keywords to search and check boxes to indicate the fields to search and use a slider to specify a range of years. The problem I am having is when the following scenario plays out:

1. User enters a search and gets results
2. User modifies the search (adds a key word, changes the date slider, unchecked one of the fields to include in the search) and gets their new results
3. User clicks the back button

When the back button is clicked the form data in the search box reverts to the previous entered data as would be expected, but any changes to a check box and the slider do not revert to the previous values.

All form data is mapped to ViewModels using the @Html.TextBoxFor(o => o.Field) approach, and the form is submitted as a GET action. I am fairly confident there is a gap in my understanding on how browsers handle form data and the back button.

UPDATE

Here is how I am currently addressing this problem:

1. Set autocomplete="off" for the form. This keeps the changes to check box items from persisting with the back button. They will then intuitively change to the previous setting the same as the text input boxes.

2. The range slider was a little trickier (I am using jQRangeSlider). To keep this in line with the query string I used the JavaScript from this question ( https://stackoverflow.com/a/2880929/1803682 ) to pull the query string values and then set them manually whenever they are not default. The result looks like:

   $(document).ready(function() {
     var urlParams;
     var match,
       pl = /\+/g, //Regex for replacing addition symbol with a space
       search = /([^&=]+)=?([^&]*)/g,
       decode = function(s) { return decodeURIComponent(s.replace(pl, " "));},
       query = window.location.search.substring(1);
     urlParams = {};
     while (match = search.exec(query)){
       urlParams[decode(match[1])] = decode(match[2]);
     }
     $("#slider").rangeSlider("values", urlParams["SY"], urlParams["EY"]);
   });
   

I would appreciate any feedback on if I am still missing a simple issue here.

UPDATE 2

It seems the $(document).ready event in jQuery will not be a consistent approach cross-browser with respect to the back button. Also - with my initial testing it not looks like autocomplete="off" may be working for the slider as well.

Some relevant discussion of that here: Is there a cross-browser onload event when clicking the back button?

Answer 1

Setting autocomplete="off" on the form resolved this problem. Added some details to the question.