Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Browser refresh behaviour

Tags:

html

http

refresh

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?

like image 461
Marcus Downing Avatar asked Sep 09 '08 15:09

Marcus Downing


People also ask

What happens on browser refresh?

A hard refresh clears your browser cache for a specific page, which forces it to load the most recent version of that page. This could include new scripts, styles or features.

How do I know if my browser is refreshing or closing?

When we refresh the page (F5, or icon in browser), it will first trigger ONUNLOAD event. When we close the browser (X on right top icon),It will trigger ONUNLOAD event. Now when ONUNLOAD event is triggered, there is no way to distinguish between refresh the page or close the browser.

How do I stop browser from refreshing?

Click the Start button, type “internet options” and select Internet Options in the search results. In the Internet Properties window, click “Custom tab -> Custom level,” then in the Security Settings window, scroll down until you find “Allow META REFRESH.” Disable this option and click OK.

How do you clear a form on refresh?

You could call the reset() method of the forms object from the body load event of your html document to clear the forms.


3 Answers

<input autocomplete="off">
like image 123
Joseph Bui Avatar answered Oct 19 '22 23:10

Joseph Bui


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

like image 38
Espo Avatar answered Oct 19 '22 23:10

Espo


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" />

see the W3C reference

although not mentioned in the reference, it works also with checkboxes, at least on firefox.

like image 4
Fabien Avatar answered Oct 19 '22 22:10

Fabien