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

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?

This question is related to html forms

The answer is

Another way without JavaScript is to use <form autocomplete="off"> to prevent the browser from re-filling the form with the last values.

See also this question

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

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

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):


That must be added after the reset to do any good.

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

This is what worked for me.

$(window).bind("pageshow", function() {

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.

Below links might help you..

Browser back button restores empty fields, Clear Form on Back Button?

Hope this helps... Best Luck

Questions with html tag:

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment Angular 6: saving data to local storage Vue.js get selected option on @change Bootstrap 4 multiselect dropdown How to add bootstrap in angular 6 project? Angular 5 Button Submit On Enter Key Press Angular 5, HTML, boolean on checkbox is checked How to render string with html tags in Angular 4+? bootstrap 4 file input doesn't show the file name How can I execute a python script from an html button? Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width Failed to load resource: the server responded with a status of 404 (Not Found) css Change arrow colors in Bootstraps carousel Bootstrap 4 Dropdown Menu not working? CSS Grid Layout not working in IE11 even with prefixes How to prevent page from reloading after form submit - JQuery Centering in CSS Grid Detecting real time window size changes in Angular 4 Angular 4 img src is not found (change) vs (ngModelChange) in angular Bootstrap 4: Multilevel Dropdown Inside Navigation Align the form to the center in Bootstrap 4 How to style a clicked button in CSS How do I change the font color in an html table? Redirecting to a page after submitting form in HTML Load json from local file with http.get() in angular 2 display: flex not working on Internet Explorer Scroll to element on click in Angular 4 How to extract svg as file from web page force css grid container to fill full screen of device How does the "position: sticky;" property work? HTML5 Video autoplay on iPhone Disable button in angular with two conditions? CSS hide scroll bar, but have element scrollable CSS grid wrapping How to load image (and other assets) in Angular an project? Flask - Calling python function on button OnClick event How can I make Bootstrap 4 columns all the same height? Wrapping a react-router Link in an html button

Questions with forms tag:

How do I hide the PHP explode delimiter from submitted form results? React - clearing an input value after form submit How to prevent page from reloading after form submit - JQuery Input type number "only numeric value" validation Redirecting to a page after submitting form in HTML Clearing input in vuejs form Cleanest way to reset forms Reactjs - Form input validation No value accessor for form control TypeScript-'s Angular Framework Error - "There is no directive with exportAs set to ngForm" Angular 2: Can't bind to 'ngModel' since it isn't a known property of 'input' In Angular, how to add Validator to FormControl after control is created? How to disable input conditionally in vue.js Mask for an Input to allow phone numbers? angular2 submit form by pressing enter without submit button How to convert Base64 String to javascript file object like as from file input form? Manually Set Value for FormBuilder Control Angular 2: Get Values of Multiple Checked Checkboxes Can I use an HTML input type "date" to collect only a year? How to make 'submit' button disabled? Angular2 - Radio Button Binding How to redirect back to form with input - Laravel 5 Adding form action in html in laravel Multiple radio button groups in one form Setting onSubmit in React.js Laravel form html with PUT method for PUT routes How To Pass GET Parameters To Laravel From With GET Method ? Show loading gif after clicking form submit using jQuery Postman Chrome: What is the difference between form-data, x-www-form-urlencoded and raw How to submit an HTML form without redirection Laravel - Form Input - Multiple select for a one to many relationship Angularjs how to upload multipart form data and a file? How to hide form code from view code/inspect element browser? jQuery AJAX form data serialize using PHP How to make <label> and <input> appear on the same line on an HTML form? Form Submission without page refresh Fetching data from MySQL database using PHP, Displaying it in a form for editing Adding asterisk to required fields in Bootstrap 3 What's the difference between "Request Payload" vs "Form Data" as seen in Chrome dev tools Network tab How to get HTML 5 input type="date" working in Firefox and/or IE 10 Laravel use same form for create and edit Send value of submit button when form gets posted Angular is automatically adding 'ng-invalid' class on 'required' fields Submit form after calling e.preventDefault() How to send a JSON object using html form data Comparing two input values in a form validation with AngularJS Jquery function BEFORE form submission Clear text input on click with AngularJS Access Form - Syntax error (missing operator) in query expression How to Call a JS function using OnClick event