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?
10
- 3What about making a button that clears the forms? That seems easier for users to understand then letting them push f5Ruben– Ruben2011-09-11 09:15:07 +00:00Commented Sep 11, 2011 at 9:15
- 3Most users want to keep the form data on reload...JJJ– JJJ2011-09-11 09:19:10 +00:00Commented Sep 11, 2011 at 9:19
- 8My problem is that many of my inputs are calculated and on reload the data becomes inconsistent if not everything is reset.Andreas– Andreas2011-09-11 09:21:36 +00:00Commented Sep 11, 2011 at 9:21
- 2You could also recalculate everything on postback.Ruben– Ruben2011-09-11 09:33:26 +00:00Commented Sep 11, 2011 at 9:33
- 2Suggesting users switch browsers has to be a last ditch solution.jawsware– jawsware2022-08-18 15:25:08 +00:00Commented Aug 18, 2022 at 15:25
| Show 5 more comments
10 Answers
Just add autocomplete="off" to your forms and you will solve the problem.
<form autocomplete="off"> It can also be added individual items.
<input type="text" autocomplete="off"> jQuery to solve this on all inputs and textareas
$('input,textarea').attr('autocomplete', 'off'); 8 Comments
Kiran Ruth R
Instead you can add <form autocomplete="off"></form to disable this cache for the form entirely
Christine268
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)
Timofei Davydik
I've spent half a day to come to the fact that this is firefox trouble. Thank you for the solution.
Pascal
what about hidden fields? Firefox is persisting them as well
ygoe
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.
|
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...
2 Comments
Bob Stein
Best solution to this oppressive Firefox feature. Should be used with care; one may need some other method to avoid inadvertent user data loss.
andreszs
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.
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> 
4 Comments
Felix
That could be true. I just tried it with a form rendered by the the server.
draconis
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.
/*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.
1 Comment
Lutsen
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.I think easier and quicker way to do that is
$('input,textarea').attr('autocomplete', 'off'); 
1 Comment
Bimal Das
no.using jquery , it is not working. I think autocomplete off will work if jquery code execute before autocomplete by browser !!!!
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'); }); 
1 Comment
Oskar Berggren
Re: "... above ...", note that answers are sortable and gets reorded based on votes etc.
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)
Comments
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.
Comments
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)); .. } 
Comments
autocomplete="off" is also needed for hidden input fields in order to have them refreshed on simple page reload (F5)