Clear all fields in the form when returning using the back button

Question

I need to clear all the fields on the form when the user uses the back button in the browser. Currently, the browser remembers all the last values ​​and displays them when returning.

More about why I need it. I have disabled the input field, the value of which is automatically generated using the algorithm to make it unique within a particular data group. After I submitted the form and the data is entered into the database, the user will not be able to use the same value again to submit the same form. Therefore, I disabled the input field first. But if the user uses the browser back button, the browser remembers the last value, and the same value is stored in the input field. Therefore, the user can again submit the form with the same value.

I don’t understand what exactly happens when you press the back button. It seems that the whole page is retrieved from the cache, never contacting the server if the page size is within the browser cache. How can I guarantee that the page is loaded from the server regardless of the browser settings when I click the "Back back" button?

Answer 1

Modern browsers implement something like a back-forward cache (BFCache). When you press the back / forward button, the actual page does not reload (and the scripts never reload).

If you need to do something, if the user presses the back / forward keys, it listens for BFCache pageshow and pagehide .

Pseudo-jQuery example:

 $(window).bind("pageshow", function() { // update hidden input field }); 

Learn more about Gecko and WebKit implementation.

Answer 2

Another way without JavaScript is to use <form autocomplete="off"> so that the browser does not re-fill the form with the latest values.

See also this question.

Tested with only one <input type="text" > inside the form, but works fine in current Chrome and Firefox, unfortunately not in IE10.

Answer 3

I came across this post when looking for a way to clear the entire form related to BFCache (back / forward button cache) in Chrome.

In addition to what Sim provided, my use case required the details that needed to be combined with the Clear form on the Back button? .

I found that the best way to do this is to 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 input events to create an object in JavaScript or something else in this case, then you are done. However, if you are listening to events, then at least in Chrome you need to fire the change event yourself (or any other event that you want to handle, including the custom one):

 form.find(':input').not(':button,:submit,:reset,:hidden').trigger('change'); 

This should be added after reset for any good.

Answer 4

If you need compatibility with older browsers, as well as "then the page" may not work. The following code worked for me.

 $(window).load(function() { $('form').get(0).reset(); //clear form data on page load }); 

Answer 5

The links below may help you.

The back button restores empty fields . Clear the form on the back button?

Hope this helps ... Best luck

Answer 6

This is what worked for me.

 <script> $(window).bind("pageshow", function() { $("#id").val(''); $("#another_id").val(''); }); </script> 

I originally had this in the $ (document) .ready section of my jquery, which also worked. However, I heard that not all browsers run $ (document). Already clicking the "Back" button, so I took it out. I do not know the pros and cons of this approach, but I tested several browsers on several devices, and no problems with this solution were found.