View Full Version : Getting past the IE7/8 incomplete forms after BACK

03-13-2012, 09:37 PM
Yeah, did that title confuse you? :P

I realize there is a problem with forms in IE7 and 8, where when a form is submitted, and you click the Back button or use history.go(-1), dynamic elements are not properly shown with their previous values. I can save the forms data to cookies for future use, but when I try to go Back, the page isn't actually reloaded, so the script won't load the cookies.

How can I force a reload of the previous page upon going Back?

03-13-2012, 09:58 PM
Only by using window.setInterval() to read back values from a cookie to the fields. The interval will keep running if you come back to the page with the browser back/forward buttons.

03-13-2012, 10:12 PM
you can create an observer object that monitors all the fields. If some of the fields (>1) were previously populated, and suddenly all the fields are empty, you might assume something has gone awry and repopulate from your cookie. But you might choose to omit fields with sensitive information (passwords,cc#'s,email)

Here's an example where the observer monitors the value of innerText of just one element.
It's harmless, it just sit's there until something changes... then WHAM!

<button id="getReady">Load My Image</button>
<div id="imageContainer">image1</div>


* here is our code to eval
* You can monitor your cookies, and your fields, If your cookies say there
* is something in the field, but the fields show nothing, something has "gone awry"
var codeToEvaluate = function(){alert('my image has returned!')}

* here the code to test the value of something.
* Make sure this function returns what you are testing for
var myTest = function(){return document.getElementById('imageContainer').innerText}

observe = function (){
var testVal ,
resolvedVal ,

var CheckIfReady = function () {
if (testVal() != resolvedVal) {
var Loop = window.setTimeout(CheckIfReady , 1000);
} ,
init = function (args) {
testVal = args[0];
resolvedVal = args[1];
codeToEvaluate = args[2];

return {
'init' : init

* This is where we send the testVal (a function). Also we define the
* value we would like it to equal and the code to evaluate.
observe.init([myTest , 'image2' , codeToEvaluate])

document.getElementById('getReady').onclick = function (){
document.getElementById('imageContainer').innerText = 'image2';