How to prevent HTML form reset

I have a form where everything is supposed to be disabled on load except the first field.

The first field is an autocomplete input. When they select something from it, it goes disabled, and then sets the second field to be enabled. The second field is a dropdown.

The problem is, after a user uses the form and clicks the back button, it goes to a state similar to the one it was in before they clicked submit-- 1- autocomplete is disabled (but has no value for some reason) 2- dropdown is enabled, and set to the value they submitted with

I've tried to force the restoration of the form with javascript (using jquery's .ready()), but the .ready() doesn't run after they go back with the 开发者_JS百科back button..

Refreshing the page after going back restores it. Any ideas how I can fix this?

The problem is that browsers are inconsistent in how they handle the back button. Firefox, for example, caches the state of the HTML (post-Javascript processing) and returns to that state after hitting the back button, but some others don't.

The best thing for you to do is after the submit, you should redirect to a URL that contains HTML representing the submitted data with the ability to edit those submitted details. This will give your users less of a desire to want to hit the back button.

Edit:

You should also add this to your page:

<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate"> 

That is supposed to prevent browsers from caching the changes of the page's state. I assume you'd prefer it so that when the user hits the back button they start from the beginning state of the page.