Step-by-step instructions of how to save form information when your user hits the browser's back button
Scenario
You have a form that you use to collect information from the user. The normal use case, is for the user to fill in the form and click next for some processing. The next button posts to the Post method in your Controller.
Requirement
If the user starts to fill out your form but then changes its mind and hits the browser back button to change some setting on the previous screen, save the collected data.
Solution
- Download history.js (jQuery-compatible direct-link (save as))
- Put it in your Scripts folder and reference it from your _Layout.
- On the page that requires the save functionality, in the document-ready block, add
You have a form that you use to collect information from the user. The normal use case, is for the user to fill in the form and click next for some processing. The next button posts to the Post method in your Controller.
Requirement
If the user starts to fill out your form but then changes its mind and hits the browser back button to change some setting on the previous screen, save the collected data.
Solution
- Download history.js (jQuery-compatible direct-link (save as))
- Put it in your Scripts folder and reference it from your _Layout.
- On the page that requires the save functionality, in the document-ready block, add
History.pushState({ state: 1 }, "Loaded", "?loaded");
History.Adapter.bind(window, "statechange", function () { $("form").append('').submit();
});
- In your controller action, add the backCase optional property.
- If the backCase is set, save your view model and redirect your target page.
Tested in Internet Explorer 8, Chrome, Firefox 17, Safari 5 for Windows.
Comments