Fire javascript event when using Google autocomplete in Firefox

Question

I have a form in which I turn off the submit button until the user types all the required fields. First I used onkeyup to save the tab in the required fields and enable the button when all required fields are filled.

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

I fixed this problem in IE by raising the onpropertychange event for each input element, and it worked fine.

But in firefox, I could not find an event that would fire when the Google Autofill button was clicked.

Help evaluate.

Answer 1

Thank you for your responses. I had to quickly answer this problem, so I used the setTimeOut () function to check the required 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 at the DOMAttrModified event and see if I can make it work for me. thanks

Answer 2

Judging by this, in the google toolbar's support line , it seems that autocomplete is not only a huge PITA for developers, but also very difficult to disable. As of August 09, Google claims that it will abide by the autocomplete="off" attribute in the containing form , but to date, this feature has not yet been released.

You used to be able to enter your input elements in insensitive names (for example, name="xx_Address_32423423" ) to confuse autocomplete (and thereby disable it effectively), but they made autocomplete more "intelligent" by looking at substrings within your names elements to determine whether the field can be autocomplete or not (again, judging by the complaints in this thread).

In your case, you can also execute a roll with strokes and find the equivalent for onpropertychange for Firefox. See the DOMAttrModified event . In particular, try checking the event.attrName property to see if value changed using autocomplete:

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

Checking event.propertyName should remain compatible with your current onpropertychange implementation (if possible).

Answer 3

No need to add complex setTimeOut or setInterval.

Just intercept the change event of any reusable text field of the form, go through each multiple field and, if it is not empty, hide the label