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

javascript

form-engineering

browser-behavior

event-listeners

byAlex Kataev·Jan 26, 2025

Ever had the experience where you go back to a form you previously filled and it retains the filled-out fields? Well, to avoid this, engage the load event in JavaScript along withperformance.navigation. No extra input from the user needed.

window.addEventListener('load', () => {
  if (performance.navigation.type === 2) { //2 is the new 1 (TYPE_BACK_FORWARD)
    document.querySelector('form').reset();
  }
});

Copy this script into your HTML and let it handle the field clearance like a vacuum cleaner on a dusty carpet.

Disabling form autofill

Web browsers can be nosy and remember what users type into form fields, prefiling these values when we navigate back to the form. Wrap your form in <form autocomplete="off"> to tell browsers to mind their own business. This works like the "Private Browsing" of form data.

Using the "pageshow" event

Browsers cache pages to optimize performance, so navigating back often fetches these cached pages, skipping a full-reload (the load event). Fret not, 'pageshow' has your back.

window.addEventListener('pageshow', (event) => {
  if (event.persisted || (window.performance && window.performance.navigation.type === 2)) {
    document.querySelector('form').reset();
  }
});

Be it fresh load or busting out of cache, the code snippet above ensures the form fields are always cleared.

Clearing disabled fields

By default, the reset operation leaves disabled input fields untouched, but your form may contain disabled fields with auto-generated values that shouldn't be resubmitted:

Array.from(document.querySelectorAll('form input[disabled]')).forEach(input => input.value = '');

This bit of code handles disabled fields like a broom sweeping under the rug - it gets every bit.

Forcing server reload

If your page is fetched from the server each time, you can ensure fresh form states through window.performance.navigation.type. This method avoids double trouble - duplicate submissions are busted.

Handling cross-browser compatibility and custom events

Managing custom events

Some fields may be tied to custom events that should be triggered upon change:

$('form').trigger('reset').find(':input').trigger('change');

This doubles as a workout for your form, refreshing all the inputs and triggering a wave of change events.

Testing on various browsers

Browsers are like different flavored pizza slices; they work differently. Remember to test your code on Chrome, Firefox, and Safari for the bfcache behavior.

Navigating limitations

Just like you can't win all games, you can't always have an all-compatible solution. Different browsers have different rules. It's like playing bingo but everyone has a different set of numbers.