Trigger javascript event when using Google auto fill on firefox

Question

Hi all,

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 fields and enable the button when all the mandatory fields are filled.

But I had users complaining that they filled in the form using AutoFill button on the Google toolbar and the submit button was still disabled.

I fixed this problem in IE by calling the onpropertychange event for each input element and it worked nicely.

But in firefox, I couldnt find an event which will get triggered when the google autofill button is clicked.

Help much appreciated.

Answer 1

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).

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