Trigger javascript event when using Google auto fill on firefox

Question

I have a form, in which I am disabling the submit button until an user has typed in all the mandatory fields. I was initially using onkeyup to keep a tab on the mandatory fi

Answer 1

There's no need to add complex setTimeOut nor setInterval.

Just catch the "change" event of any refillable textbox of the form, go through every refillable field and if it's not empty hide the label

Answer 2

Thanks for your answers. I had to respond quickly to this issue hence I used the 'setTimeOut()' function to check for mandatory fields and enable the submit button.

$().ready(function() {
    CheckRequiredFields();
    timeOutRtn = setTimeout("AutoMonitorMandatoryField()", "3000");
});

function AutoMonitorMandatoryField() {
    if ($("#btnSave").attr("disabled")) {
        CheckRequiredFields();
        timeOutRtn = setTimeout("AutoMonitorMandatoryField()", "3000");
    }
}

crescentfresh - I will look into the DOMAttrModified event and see if I can get it to work for me.Thanks

Answer 3

Judging from this google toolbar support thread, it seems autofill is not only a huge PITA for developers, but also very difficult to turn off. As of Aug 09 google claims it will honor the autocomplete="off" attribute on the containing form but as of today this feature does not seem to be released yet.

You used to be able to give your input elements non-sensical names (eg name="xx_Address_32423423") to confuse autofill (and thereby effectively disable it), but they've made autofill more "intelligent" by looking at substrings within your element names in order to determine if the field can be autofilled or not (again, judging from complaints in that thread).

In your case, you may as well roll with the punches and find an equivalent for onpropertychange for Firefox. Have a look at the DOMAttrModified event. Specifially, try checking the event.attrName property to see if the value has been changed by autofill:

function realOnChange(event) {
    var attrName = event.propertyName || event.attrName;
    if(attrName === 'value') {
        // etc
    }
}

The check for event.propertyName is to stay compatible with your current onpropertychange implementation (if that is even possible).