Disable Firefox autofilling html forms but keep auto complete

The newer versions of Firefox have a new 'feature' that remembers the stuff that was filled out in a form and repopulates the form with these values on refresh (maybe in other situations as well?).

The problem is we have a quite complicated web application which uses a fair bit of ajax and hidden form fields which are never filled out by the user, but by javascript. Because of this new 'Feature' we get a lot of errors when refreshing form because these fields are suddenly populated with invalid values.

So i'm looking for a way to turn this 'feature' off without disabling auto-completion. (because that IS useful on the fields our customers fill in)

if i put

开发者_运维知识库autocomplete='off'

in my html, the effect is disabled, but this loses auto-completion (obviously). the problem is in fields getting filled in after a refresh without any user action.

While the password manager will populate a username and password if there is exactly one match, autocomplete itself doesn't automatically populate fields. But I'm guessing you're thinking about the sort of refresh you get, say, if you reload the page. In this case the field values are restored by session history, but you might be able to turn that off by marking your page as uncacheable.

Well you should set the value of these fields to nothing or or whatever default value they have using javascript right before you start your other javascript/ajax tasks.

It is a browser feature - without going into the settings of each client browser you can't disable this.

I suggest more robust validation - client and server side.

After the page is loaded, but before you do any other logic, you should force the value to be empty:

inputElem.value = '';

Here is a jQuery solution I put together.

It doesn't disable the autofill, rather it overrides the fields after the browser has done it's thing.

I was trying to fight Chromes autofill when I made this. Just using .val('') on it's own didn't work since it triggered before chromes autofill functionality kicked it.

var noFiller = $('input[type="text"]');

noFiller.val(' ');
var t=setTimeout(function(){
    noFiller.val('');
},60);//keep increasing this number until it works

The Javascript solution (setting field values to empty when the page loads or updates via Ajax) has already been mentioned.

Another option might be to generate the ids of your fields with random numbers attached to them so that the browser can't match them to cached values, but this may screw up other things.

Autocomplete isn't a new thing. Every browser has it. See this http://www.w3.org/Submission/web-forms2/#the-autocomplete

Autofill? Are you sure? Check your input's value attribute with Firebug (Firefox addon). Check you post and response in your ajax. Maybe your ajax is filling it behind scenes.

BTW: remenber to disable any external toolbar. There are some toolbars for Firefox/IE/Chrome/etc that autofill data for the user. Warning with this.