PSA: Browser Back Button Differences
At work, we had some old display code that was supposed to prevent users from submitting the same form twice. In the form's submit event, there was a window scoped boolean being set. If validation errors needed to be displayed, then the boolean was un-set. And at the very top of the submit action it would just 'return' if it saw the boolean. Maybe it will make more sense if you look at the submit event handler.
window.OKToSubmit = true;
validateStartNeg = function(form) {
if (!window.OKToSubmit) {
return false;
}
/* Disable Submit */
window.OKToSubmit = false;
/* Fields that need validation and type */
validation code...
if (errorArray.length) {
/* Re-enable Submit */
window.OKToSubmit = true;
handleErrors(errorArray);
return false;
}
return true;
}
I had tested this in Firefox. And as usual it worked the way I wanted it to in Firefox. In fact, I think it worked better than I expected. Today there was a duplicate submission again. I went and tried to re-create it (in Firefox of course). But, I couldn't get it to submit twice. Once I submitted the first time, I hit my back button. The form was filled in still. But, it was simply impossible to submit it.
So, I tried it in IE. Sure enough, after submitting and hitting the back button, I could submit it again. I put together a very simple test below that you can run on ColdFusion (or anything with a small edit). I ran the below test in IE8, Safari, Firefox, and Chrome. Ever single one of them still had the form filled in when I hit the back button. But, only IE did not have the window scoped variable any longer.
So, two things to take from this: 1) Never ... ever ... trust the client. Always validate your business rules on the server. 2) IE seems to be the only browser that remembers the state of the HTML, but forgets the state of the JS DOM when you hit the 'back' button.
Oh, here is that test script if you're interested.
<html>
<head><title>JS test</title></head>
<body>
Time: #TimeFormat(now(),'hh:mm:ss lll')#
<br/>
<input id="foo" name="foo" value="default" >
<br/>
<button onclick="setMsg()">Set Message</button>
<br/>
<button onclick="showMsg()">Show Message</button>
<br/><br/>
<a href="http://www.google.com">Move Away From Page</a>
<InvalidTag type="text/javascript">
/* Init msg */
setMsg();
function setMsg() {
window.msg = document.getElementById('foo').value;
}
function showMsg() {
alert(window.msg)
}
</script>
</body>
</html>
</cfoutput>
There are no comments for this entry.
[Add Comment]