Firefox keeps form data on reload

Asked 11/9, 2011 at 9:10 Answered 4/1, 2022 at 23:12

I have a big problem with the functionality in Firefox that keeps data that the user have filled in on reload F5. If i use Ctrl+F5 the forms are cleared and this is great. My problem is that not all my users know that this is what they have to do to force the input cleanup. Is there a way in the html or response headers to tell Firefox to not keep the data in the forms?

Backfire answered 11/9, 2011 at 9:10 Comment(10)

What about making a button that clears the forms? That seems easier for users to understand then letting them push f5 – Frigidarium 11/9, 2011 at 9:15

That is one idea but I don't want to bother my users with that. – Backfire 11/9, 2011 at 9:17

Most users want to keep the form data on reload... – Cermet 11/9, 2011 at 9:19

My problem is that many of my inputs are calculated and on reload the data becomes inconsistent if not everything is reset. – Backfire 11/9, 2011 at 9:21

@Backfire in that case, why not do what Marek sugggests. Maybe only for the calculated fields – Monoatomic 11/9, 2011 at 9:24

You could also recalculate everything on postback. – Frigidarium 11/9, 2011 at 9:33

similar: https://mcmap.net/q/67532/-preventing-firefox-from-remembering-the-input-value-on-refresh-with-a-meta-tag – Underestimate 18/8, 2020 at 12:21

Please switch to a Chromium based browser. Firefox knows about this since 21 years, and they are not able or unwilling to behave like Chrome or Safari: bugzilla.mozilla.org/show_bug.cgi?id=46845#c232 – Thaler 14/7, 2021 at 8:48

Suggesting users switch browsers has to be a last ditch solution. – Fain 18/8, 2022 at 15:25

123

Just add autocomplete="off" to your inputs and you will solve the problem.

<input type="text" autocomplete="off">

jQuery to solve this on all inputs and textareas

$('input,textarea').attr('autocomplete', 'off');

Backfire answered 11/9, 2011 at 9:27 Comment(8)

Instead you can add <form autocomplete="off"></form to disable this cache for the form entirely – Suctorial 28/11, 2013 at 7:15

Unfortunately this also removes the functionality of autocomplete just by clicking on the form element (where it shows a drop down of previously entered values) – Bargeman 2/9, 2015 at 17:44

But this solution does not work for page relad by pressing F5 button or firefox browser reload button. – Dumpling 25/6, 2018 at 6:20

I've spent half a day to come to the fact that this is firefox trouble. Thank you for the solution. – Isolationism 30/8, 2018 at 11:28

what about hidden fields? Firefox is persisting them as well – Diley 4/6, 2020 at 20:46

Doesn't seem like removing functionality should be the first option. This does make me wonder if this is why autocomplete doesn't seem to work on many sites I visit with Firefox. – Fain 18/8, 2022 at 15:29

Doesn't work for hidden fields, Firefox will happily change them to whatever was there on the previous page load. This entirely breaks my app. Need another solution. – Blent 28/8, 2022 at 9:12

Yeah this is bad. Should not be the accepted answer. It's not necessary to completely remove autocomplete functionality. Instead, you can just add the autocomplete="off" attribute to the form itself in the HTML, and then remove the attribute with javascript when then DOM is ready. – Conference 1/2, 2023 at 16:39

Instead of going through all inputs you may also just add the attribute to your form-element like so:

<form method="post" autocomplete="off">...</form>

However the above mentioned methods on domReady did not work for me...

Salaried answered 30/1, 2014 at 10:35 Comment(2)

Best solution to this oppressive Firefox feature. Should be used with care; one may need some other method to avoid inadvertent user data loss. – Proudfoot 20/6, 2017 at 20:58

Yes very nice solution, thank you MOZILLA... now I just need to update 8564 different pages and scripts, reupload them all, and retest the entire backend. Really convenient. – Capybara 18/1, 2022 at 20:12

In case you want to keep the autocomplete feature of the browser (see other valid answers), try adding the name attribute to the form and give it a random value. It has worked for me:

<form id="my-form" name="<random-hash>">
...
</form>

Lapin answered 12/6, 2017 at 16:55 Comment(4)

This is a great idea, and I hope they don't work around it. It cuts down the middle, compromise-wise. – Vasoinhibitor 15/6, 2017 at 15:21

You have to be able to put the unique string in at runtime, but if you can, this seems to work! – Vasoinhibitor 15/6, 2017 at 15:42

That could be true. I just tried it with a form rendered by the the server. – Lapin 21/6, 2017 at 15:16

Form autocomplete isn't always useful. Sometimes input controls are used without an enclosing Form tag, and ajax is used to submit the data without postback. In those situations, the autocomplete needs to be deactivated at the input control level. – Hatten 10/1 at 15:30

/*reset form elements (firefox saves it)*/

function resetElements()
{
     var inputs = document.querySelectorAll('input[type=text]');
     //you get the idea.....you can retrieve all inputs by tag name input
     for(var i = 0; i < inputs.length; i++) {
         document.getElementsByTagName('input')[i].value = "";
     }
     var textareas = document.getElementsByTagName('textarea');
     for(var i = 0; i < textareas.length; i++) {
         document.getElementsByTagName('textarea')[i].value = "";
     }
}

Call this function onload.

Americanize answered 18/3, 2015 at 0:15 Comment(1)

What I like about a Javascript solution is that the input suggestions keep working, only the input field values are removed, whereas autocomplete="off" also disables the suggestions. – Fanechka 10/4, 2015 at 9:4

I think easier and quicker way to do that is

$('input,textarea').attr('autocomplete', 'off');

Cist answered 13/5, 2012 at 23:6 Comment(1)

no.using jquery , it is not working. I think autocomplete off will work if jquery code execute before autocomplete by browser !!!! – Agone 2/8, 2017 at 10:5

I tried the shortened solution above, but it didn't clear the value of the select boxes on my page.

I ended up modifying it slightly and now all input types on the page are cleared regardless of type:

var allInputs = $(":input");
$(allInputs).attr('autocomplete', 'off');

So to make this run onload I just put it in the ready() method:

$(document).ready(function () {
    var allInputs = $(":input");
    $(allInputs).attr('autocomplete', 'off');
});

Parmer answered 30/11, 2012 at 19:9 Comment(1)

Re: "... above ...", note that answers are sortable and gets reorded based on votes etc. – Phototube 30/8, 2014 at 16:3

I found the only fix for me was to do

document.forms[0].reset();

before doc ready early in the page, as suggested in the comment by @Marek above - not great but worked for me (the autocomplete attribute method via either jQuery, JS or HTML didn't in the end fix it for me)

Seasickness answered 3/1, 2019 at 17:51 Comment(1)

Exactly what I was searching for, thanks! – Strategic 8/2, 2021 at 18:4

just to piggyback on @jonnybradley's solution (couldn't comment on his answer because I don't have enough rep yet):

This also worked perfectly form me:

document.getElementById('theFormId').reset();

called after the HTML code.

Aphorize answered 24/1, 2021 at 6:39 Comment(0)

one of my colleagues recommended that we should use a random string as the name of the form. It works very well if you don't use the name attribute of the form.

it is an example from the sf1 form builder:

public function renderFormTag($url, array $attributes = [])
{
    ..
    $attributes['name'] = isset($attributes['name']) ? $attributes['name'] : bin2hex(random_bytes(16));
    ..
}

Moitoso answered 20/11, 2020 at 11:36 Comment(0)

autocomplete="off" is also needed for hidden input fields in order to have them refreshed on simple page reload (F5)

Vainglorious answered 4/1, 2022 at 23:12 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags