When a user hits Refresh on their browser, it reloads the page but keeps the contents of form fields. While I can see this being a useful default, it can be annoying on some dynamic pages, leading to a broken user experience.
Is there a way, in HTTP headers or equivalents, to change this behaviour?
You could call the reset() method of the forms object from the body load event of your html document to clear the forms.
h1. References
I wonder, if you set the page not to be cached through meta tags, will that fix the problem? http://lists.evolt.org/archive/Week-of-Mon-20030106/131984.html If it does, it'll have the benefit of working on browser's with Javascript disabled.
This should do the trick:
<body onload="document.FormName.reset();">
Replace FormName with the name of your form and then all the fields will be reset when the user clicks refresh in his browser.
Or if you only want to reset some fields, add this to the bottom of your page:
<script type="text/javascript">
document.getElementById('field1').value ='';
document.getElementById('field2').value ='';
document.getElementById('field3').value ='';
</script>
That will reset the fields every time a user enters the page, including refreshes
The data on forms are not part of w3c specification. It's a browser feature to make your life easy. So, if you don't want to keep the data after reloads, you can set all form's values to null after loading it, as Espo said. Even if the page is not cached, it will display the data on the form, because the data aren't part of the page's html code. You can try this too (don't know if it will work):
<input type="text" name="foo" value="">
Add the autocomplete attribute set to "off" to the inputs you don't want to be refreshed. For instance:
<input type="text" name="pin" autocomplete="off" />
although not mentioned in the reference, it works also with checkboxes, at least on firefox.