115

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?

Mateen Ulhaq
  • 24,552
  • 19
  • 101
  • 135
Prabin Pebam
  • 1,263
  • 2
  • 9
  • 5

7 Answers7

119

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.

Community
  • 1
  • 1
Michael Sandino
  • 1,818
  • 1
  • 13
  • 10
  • 1
    This works great, but to me it's really puzzling why this removes the input value when hitting back and forward. What if you want to keep that functionality, but you want to prevent actual autocomplete of the browser? That's what I want. The w3schools article doesn't even say it does the functionality discussed here. – Michael K Dec 10 '15 at 21:56
  • This works great for resetting the form back to its original value when navigating the history. – Craig Harshbarger Aug 04 '16 at 21:57
  • 8
    This also works when applied on a single element. `` – Jakub Kaleta Dec 20 '17 at 09:56
  • 1
    works properly in inputs, but not working in textarea – Bassem Shahin Apr 17 '19 at 08:44
  • Can confirm this works for clearing select controls – Yarin Jan 30 '21 at 18:32
108

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.

Sim
  • 2,627
  • 1
  • 20
  • 21
38

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.

Community
  • 1
  • 1
pickypg
  • 22,034
  • 5
  • 72
  • 84
16

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
});
Asanka Siriwardena
  • 871
  • 13
  • 18
9

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.

demo
  • 6,038
  • 19
  • 75
  • 149
Randy Greencorn
  • 3,864
  • 2
  • 22
  • 15
1

Because I have some complicated forms with some fields that are pre-fill by JS, clearing all fields is not suitable for me. So I found this solution, it detects the page was accessed by hitting the back/forward button and then does a page reload to get everything back to its original state. I think it will be useful to someone:

window.onpageshow = function(event) {
    if (event.persisted || performance.getEntriesByType("navigation")[0].type === 'back_forward') {
        location.reload();
    }
};
Dzungx
  • 57
  • 1
  • 1
  • 11
0

As indicated in other answers setting autocomplete to "off" does the trick, but in php, what worked for me looks like this...

$form['select_state'] = array(
'#type' => 'select',
'#attributes' => array('autocomplete' =>'off'),
'#options' => $options_state,
'#default_value' => 'none');
Seth M
  • 1
  • 2