5

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.

jack
  • 1,308
  • 6
  • 23
  • 40

3 Answers3

1

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

jack
  • 1,308
  • 6
  • 23
  • 40
0

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

Crescent Fresh
  • 107,974
  • 25
  • 151
  • 138
0

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

Subgurim
  • 179
  • 3
  • 14
  • 1
    the change event isn't fired and I can't see any other event that's fired upon autofill. Looks like having to do $(window).load and check $('input:-webkit-autofill')... but even then it only SOMETIMES works... I think its better than nothing if you're still looking for the ultimate solution. – Intellix Jan 19 '12 at 09:54
  • Chrome does not fire any events when it autofills. – enyo Mar 14 '12 at 13:27