Clear All Fields in a Form Upon Going Back With Browser Back Button

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

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.

Clearing/ Emptying form data upon back button click

You are probably getting it from the cache, make a form reset on load and your forms will be resetted to default values. I am doing it on 95% of my forms.

$('form').each(function() {
    this.reset();
});

This only apply to inputs inside a form.

Clear Form on Back Button?

If your objective is to bring them back to the exact view they had before they left (table rows are still hidden):

Such is a disadvantage (or advantage) of a website: it's stateless, particularly when it comes to client-side manipulation.

What you'll need to do is store the application state in the URL hash tag so that when the user uses their back button, you can retrieve the "state" and reconstruct their view.

Here's another question whose answer might help you: jquery javascript: adding browser history back with hashtag?

If your objective is to return the page back to its initial state:

Just reset all the checkboxes on page load:

$('input:checkbox').prop('checked', false);

-or-

Reset the entire form:

$(':input','#myform')
 .not(':button, :submit, :reset, :hidden')
 .val('')
 .prop('checked', false)
 .prop('selected', false);

Clear form data when user clicks back

If you are using HTML5 then you can set your FORM's Autocomplete function OFF.

<form action="youractionpage" method="post" autocomplete="off">
</form>

Clear all fields in a form whenever hit back button

Try this, it should work on chrome

$('form').trigger("reset");

instead of

$('form').get(0).reset(); 

Reset form on Back button

when the back button is pressed, onbeforeunload event is fired so you can try something like

jQuery:

$('#form_id').submit(function(){
$(window).unload(function () {
$('input[type="hidden"]').val("reset_value"); 
}
});

javascript:

<form onsubmit="call_function();">

in between script tag:

function call_function(){

window.onbeforeunload = function(){
var input_elems = document.getElementByTagName('input');
for(var i=0;i<input_elems.length;i++){
     if(input_elems[i].type === 'hidden'){
         input_elems[i].innerHTML = "reset_value";
     }
   }
}

WFFM - How to clear or init form fields when press back button on browser?

I think that this not a problem of Sitecore or WFFM. Modern browsers implement back-forward cache. And I believe you will see same behavior on regular ASP.Net forms.

This happens due to browser don't actually refresh pages on back/forward buttons click.

To change this behavior you should add your custom JavaScript on page that will clear WFFM form fields. This topic could be useful.

---

Related Topics