Clear all fields in a form upon going back with browser back button

Question

I need a way to clear all the fields within a form when a user uses the browser back button  Right now  the browser remembers all the last values and displays them when you go back   More clarification on why I need this I ve a disabled input field whose value is auto-generated using an algorithm to make it unique within a certain group of data  Once I ve submitted the form and data is entered into the database  user should not be able to use the same value again to submit the same form  Hence I ve disabled the input field in the first place  But if the user uses the browser back button  the  browser remembers the last value and the same value is retained in the input field  Hence the user can submit the form with the same value again   What I don t understand is what exactly happens when you press the browser back button  It seem like the entire page is retrieved from cache without ever contacting the server if the page size is within the browser cache limit  How do I ensure that the page is loaded from the server regardless of browser setting when you press the browser back button

User · Accepted Answer

Modern browsers implement something known as back-forward cache (BFCache). When you hit back/forward button the actual page is not reloaded (and the scripts are never re-run).

If you have to do something in case of user hitting back/forward keys - listen for BFCache pageshow and pagehide events:

window.addEventListener("pageshow", () => {
  // update hidden input field
});

See more details for Gecko and WebKit implementations.

User · Answer

This is what worked for me     window  bind  pageshow   function             id   val              another id   val            I initially had this in the   document  ready section of my jquery  which also worked   However  I heard that not all browsers fire   document  ready on hitting back button  so I took it out   I don t know the pros and cons of this approach  but I have tested on multiple browsers and on multiple devices  and no issues with this solution were found

User · Answer

I came across this post while searching for a way to clear the entire form related to the BFCache  back forward button cache  in Chrome   In addition to what Sim supplied  my use case required that the details needed to be combined with Clear Form on Back Button    I found that the best way to do this is in allow the form to behave as it expects  and to trigger an event     window  bind  pageshow   function         var form      form            let the browser natively reset defaults     form 0  reset          If you are not handling the input events to generate an object in JavaScript  or something else for that matter  then you are done  However  if you are listening to the events  then at least in Chrome you need to trigger a change event yourself  or whatever event you care to handle  including a custom one    form find   input   not   button  submit  reset  hidden   trigger  change      That must be added after the reset to do any good

User · Answer

Below links might help you    Browser back button restores empty fields   Clear Form on Back Button   Hope this helps    Best Luck

User · Answer

If you need to compatible with older browsers as well  pageshow  option might not work  Following code worked for me      window  load function            form   get 0  reset      clear form data on page load

User · Answer

Another way without JavaScript is to use  lt form autocomplete  off  gt  to prevent the browser from re-filling the form with the last values   See also this question  Tested this only with a single  lt input type  text   inside the form  but works fine in current Chrome and Firefox  unfortunately not in IE10

[html] Clear all fields in a form upon going back with browser back button

Examples related to html

Examples related to forms