0

The code below displays two text input fields and either creates either an enabled or disabled button depending on whether. There is also a Javascript timer to enable the button when people complete the form.

With dynamic button creation and code on a loop to enable or disable the button when the form is populated with autocomplete the button does not enable until the web page is clicked on anywhere or the user enters a character into the form. This confuses people as the form is complete but the button is disabled.

It seems like the form is not actually completed, just that Chrome/Firefox show the fields as complete but do not actually do so until the user interacts with the page.

How do I get the button to enable when the form is completed automatically with autocomplete?

<input type='text' id='username' autofocus />
<input type='password' id='password' />
<script type="text/javascript">
    if (document.getElementById('username').value != '' && document.getElementById('password').value != '') {
        document.write('<input type="submit" value="Login" />');
    } else {
        document.write('<input type="submit" disabled="disabled" value="Login" />');
    }
</script>

For reference this is the code run on a timer used to check is the form is complete.

window.onload = function () {
    var check_interval = 250;
    window.setInterval( function() {
        if (document.getElementById('username').value != '' && document.getElementById('password').value != '') {
            document.getElementById('button').removeAttribute('disabled');
        } else {
            document.getElementById('button').setAttribute('disabled', 'disabled');
        }
    }, check_interval);
};

Edit: onChange is not a good solution for this problem as autocomplete does not generate events across all browsers. There is some information in the answer to this question. onChange does not work well with our forms anyway, one form has a user set a password where the button enables only when the password is deemed strong enough by zxcvbn lib. Polling works well for that, onChange only seems to kick in once the user has moved to another field.

Community
  • 1
  • 1
Peter Bushnell
  • 918
  • 1
  • 13
  • 30

1 Answers1

0

Using an interval timer to check the values of forms is definitely not the best approach. Instead I would suggest having that code in an event handler for the onChange event on the two form fields that does the same thing. The button will be enabled when there is text in both fields instantly.

Chase
  • 2,206
  • 1
  • 13
  • 17
  • @Chris yeah sry didn't see your comment til after I put in this answer. But yeah this is definitely the best approach. – Chase Dec 13 '16 at 17:10
  • No need for apologies! This should be a correct answer. If it works for the user I'll give you a +1 too. He can probably just write out the the input button in HTML instead of JS too and use that change disabled or enabled. – Chris Dec 13 '16 at 17:13
  • The problem is that you cannot rely on browsers firing a change event on autocomplete. http://stackoverflow.com/questions/11708092/detecting-browser-autofill It is that answer linked in there that has me polling the text fields several times a second which should work. – Peter Bushnell Dec 13 '16 at 17:44
  • Thought I'd add the onChange call as a test. The page loads but the button is still disabled until I interact with the page. – Peter Bushnell Dec 13 '16 at 18:15