Enable button when browser fills data automatically

Question

http://jsfiddle.net/jy3UR/2/

Above given is the fiddle.

I have a simple login form. Username, password textfield & a submit button. Submit button is kept disabled until both username & password is entered. And I have successfully done that using the jQuery function given below.

var $input = $('input'),
$register = $('#signin');
$register.attr('disabled', true);

$input.keyup(function() {
    var trigger = false;
    $input.each(function() {
        if (!$(this).val()) {
            trigger = true;
        }
    });
    trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');
});

Given below is my form.

<div class="form-group">
    <label for="txtusername" class="col-sm-4 control-label">Username</label>
    <div class="col-sm-8">
        <input type="text" class="form-control" id="txtusername" name="txtusername" placeholder="Username">
    </div>
</div>
<div class="form-group">
    <label for="txtpassword" class="col-sm-4 control-label">Password</label>
    <div class="col-sm-8">
        <input  type="password" class="form-control" id="txtpassword" name="txtpassword" placeholder="Password">
    </div>
</div>
<div class="form-group">
    <div class="col-sm-offset-4 col-sm-8">
        <div class="checkbox">
            <label><input type="checkbox">Remember me</label>
        </div>
    </div>
</div>
<div class="form-group">
    <div class="col-sm-offset-4 col-sm-8">
        <button type="submit" id="signin" class="btn btn-default"  >Sign in</button>

</div>

You know when a user enters his credentials and submits the button, web browsers ask for storing password & if the user clicks yes, his password & username is stored in the browser. So the next time, when he visits the page, his username & password is already filled in the filed. Now comes the problem, even though the web browser (chrome, firefox) automatically filled in the form for the user, the button is still disabled. For enabling the button, user needs to enter any one of fields (even a single alphabet) of the fields for enabling that button. Technically speaking, this is not right. As data is already filled in the form (by the browser), the button has to be enabled. Any suggestions to make it as like that???

Answer 1

$.fn.extend({
    has_value: function() {
        return this.filter( function() {
            return $( this ).val().length == 0;
        }).length;
    }
});

var $input = $( 'input.form-control' ),
    $register = $('#signin');

$input.on( 'change keyup', function() {
    $register.prop( 'disabled', $input.has_value() );       
}); 

$input.trigger( 'change' );

Explanation

• The first part is an example of extending the jQuery prototype object, has_value() method is added, and since that method is now part of jQuery it can be called as any other method on collection of DOM elements. This method filters elements by value, and returns true if there are no elements with empty value.

• To successfully monitor the changes in the input fields, at least two events, change and keyup, must be used. Input elements the for username and password are bound to that two events. Change event is fired when element loses focus, and keyup is fired when user releases a key.

• Event handler enables or disables the button, to do that it sets the disabled property with .prop() method, recommended by jQuery to avoid inconsistent behaviors.

• This code should be placed inside the domready event, where can we immediately fire the change event and test whether the fields are auto-filled by browser.

• FIDDLE

Browser autocomplete

Because of inconsistencies of web browsers, you can't rely that the change event will be triggered when browser autocompletes an input field. There is a simple workaround to use the setInterval() function that will monitor for changes at regular intervals. Since we are dealing with small form with only a couple of input fields it can be used safely without noticeable lags.

setInterval( function() {
    $input.trigger( 'change' );
}, 100 );

Suggestion

Instead of writing all that code manually, HTML5 required attribute ( supported by any sane browser ) does all that. This attribute specifies that the user must fill in a value before submitting a form. Browser will prevent form submission if any required field is empty, and the user will also get a notification to fill that field.

Additional Info

jQuery extend: jQuery.fn.extend()
jQuery events: .change() .keyup()
jQuery properties: .prop() .prop() vs .attr():
Autocomplete: Browser Autofill, Autocomplete and JavaScript Change Event
HTML5: required attribute

Answer 2

You can add the following code. So that it will check initially without any key trigger.

$(document.ready(function(){
   $input.each(function() {
                if (!$(this).val()) {
                    trigger = true;
                }
        });

 });

Answer 3

Might be the reason is that you remove the "disable" attribute of button inside the key-up event of input. that's OK in the case when user fill up form manually. But if input's are filled up by the browser automatically then you must have to check the input values on the document ready event and based on the result you need to apply disable attribute to button. Below is the example :

$(document).ready(function(){
  HandleButtonState();
  $input.keyup(function() {
      HandleButtonState();
  });
}); 

function HandleButtonState(){
    var trigger = false;
    $input.each(function() {
       if (!$(this).val()) {
          trigger = true;
       }
    });
    trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');
}

Answer 4

You can check weather the form is blank on load and also on keyup as followed :

$(function(){
  var $input = $('input:not(:checkbox)'),// Check box is having some value even when not checked so ommitting it.
              $register = $('button:submit');
              $register.attr('disabled', !isFilledForm());

  $input.keyup(function() {
      $register.prop('disabled', !isFilledForm())
  });

  function isFilledForm(){
      var isFilled = true;
      $input.each(function(){
        if(!$(this).val()) isFilled = false;
      })
      return isFilled
  }
})

Please find the updated fiddle in which I have deleberately given value for password field so as to demostrate prefilled value in any input. The sign In button is being enabled.

UPDATED FIDDLE

Updated Fiddle with sign in button enabled only when both fields are filled

Revised Fiddle kept everything in document.ready.

I have checked this in browser. Hope this help.

Answer 5

Can you try this javascript instead of yours?

var $input = $('input'),
$register = $('#signin');
$register.attr('disabled', true);
$input.keyup(function() {
var trigger = false;
$input.each(function() {
    if (!$(this).val()) {
        trigger = true;
    }
});
trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');
});
$('.form-group').on('change', function(){
  var usr_name = $('#txtusername').val().length;
  var usr_pass = $('#txtpassword').val().length;
  if(usr_name < 1 || usr_pass < 1){
    $register.attr('disabled', true);   
  }
});

Here's fiddle to check http://jsfiddle.net/vaske1986/va4Kz/

Answer 6

$(document).ready(function() {
    checkLoginStats();
    $("#txtusername").attr("onkeyup","checkLoginStats();");
    $("#txtpassword").attr("onkeyup","checkLoginStats();");
});

function checkLoginStats()
{
    var userName   = $("#txtusername").val();
    var userPass   = $("#txtpassword").val();
    var buttonStat = true;
    if(userName!="" && userPass!="")
    {
        buttonStat = false;
    }
    $("#signin").attr("disabled",buttonStat);
}

hopefully this may work out http://jsfiddle.net/jy3UR/8/

Answer 7

Some notes:

• If you want to dynamically change disabled state, better use the property, not the attribute.
• Instead of each loop you can easily use every.
• Consider using faster vanilla-js when jQuery doesn't simplify your code.
• If you listen to keyup instead of input event, you won't notice if the user changes the field using the mouse.

Working ES5 code:

var inputs = [].slice.call(document.getElementsByTagName('input')),
    register = document.getElementById('signin');
function check() {
    register.disabled = !inputs.every(function(inp) {
        return inp.value;
    });
}
$(inputs).on('input', check);
check();

Demo

Answer 8

just Trigger Key UP function of input

$("input").keyup();

as simple as that

it will trigger key up event for your textbox (wont add any data to textbox), so your code for keyup will check there textbox are filled with data and make button enable

fiddle link Demo

full code

  $(document).ready(function () {
     var $input = $('input'),
        $register = $('#signin');
        $register.attr('disabled', true);

        $input.keyup(function() {
            var trigger = false;
            $input.each(function() {
                if (!$(this).val()) {
                    trigger = true;
                }
            });
            trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');
        });

        $("input").keyup();

    })

Answer 9

Try my fiddlejs...

http://jsfiddle.net/jy3UR/13/

I've setup a timeout which will fire 2 seconds after the page loads if you put this script right before the body end tag, ''.

 var $input = $('input'), $register = $('#signin');

$register.attr('disabled', true);

$input.keyup(function() {
    validateForm();
});

var validateForm = function (){
    var trigger = false;
    $input.each(function() {
        if (!$(this).val()) {
            trigger = true;
        }
    });
    trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');
};

setTimeout(validateForm(), 2000);

Answer 10

I have updated the code on the fiddle here:

http://jsfiddle.net/jy3UR/14/

var $input = $('input'),
            $register = $('#signin');
            $register.attr('disabled', true);

var checkInput = function(){
    var trigger = false;
    $input.each(function() {
        if (!$(this).val()) {
            trigger = true;
        }
    });
    trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');
}

$input.keyup( function(){
    checkInput();
} );

$(document).ready( function(){
    checkInput(); 
} );

And checked that the code is working fine.

Brief Explanation of Changes:

Previously, you were checking the form values status on just keyup event. Now, we are checking it also when the document is ready. The whole condition is getting checked twice that's why it has been placed inside a function now.

Debugging:

I have placed values field on the inputs and pre-populating the username field. You can populate the password field and check that if both the fields are filled then the button becomes enabled. Vice versa, if there is no input or there is only one field filled then the button remains disabled.

Answer 11

Use Following JavaScript code

var $input = $('input'),

  $register = $('#signin');
  $register.attr('disabled', true);

  //update signin button    
  function isDisabled($input,$register){
         var trigger = false;
                    $input.each(function() {
                        if (!$(this).val()) {
                            trigger = true;
                        }
                    });
         trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');
    }

 //check signin button status on window load event   
 $(window).load(function(){
         isDisabled($input,$register)
    });

//check signin button status on keyup event 
  $input.keyup(function() {
                    isDisabled($input,$register)
  });

Answer 12

Put this after your jquery code. Ensure it comes after it

    var $input = $('input'),
    $register = $('#signin');
    $register.attr('disabled', true);

    $input.keyup(function() {
    var trigger = false;
    $input.each(function() {
        if (!$(this).val()) {
            trigger = true;
        }
    });
    trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');
   });


   $('.form-group > input').on('input', function () {

        var empty = false;
        $('form > input, form > select').each(function () {
            if ($(this).val() == '') {
                empty = true;
            }
        });

        if (empty) {
            $('#signin').attr('disabled', 'disabled');
        } else {
            $('#signin').removeAttr('disabled');
        }
    });

Try this and see if you get the desired results

Check this fiddle http://jsfiddle.net/DaCardinal/P2c2g/

Answer 13

write your code when document loads, use $(document).ready(function(){ /*your validation code*/})

Answer 14

Depending on whether the fields are aldready filled by document.onload you can check with

$(document).ready(function () {
  // trigger validation
});

If that's too early I'm afraid you can only try adding a timeout (window.setTimeout()), if that's not working for you neither, you might get around your issue with adding autocomplete="off" to your input fields.

Answer 15

I have modified you code and here is the new working DEMO You should call a function on document load which checks whether the txtusername and password are empty or not. And if they are already filled up on page load, then you should write some code which enables the button.

Note: I have added a <form> tag around your HTML content

Comment out your existing code and try this code:

$(document).ready(function(){
    function check()
    {
        var txtusername = $('#txtusername').val();
        var txtpassword = $('#txtpassword').val();
        alert('txtusername = '+txtusername+' txtpassword = '+txtpassword);
        if(txtusername !="" && txtpassword != "")
        {
            $('#signin').attr('disabled', false);
        }
        else
        {
            $('#signin').attr('disabled', true);
        }
    }    
    var $input = $('input');
    $input.keyup(function() {
        check();
    });
    check();
});

Answer 16

var hasUsername = false
  , hasPassword = false;

$('#password').on('keyup', function(e){
    var val = $(this).val();

    if ( val.length > 8 ) {
        hasUsername = true;
    }

    checkButton();
});

$('#password').on('keyup', function(e){
    var val = $(this).val();

    if ( val.length > 8 ) {
        hasPassword = true;
    }

    checkButton();
});

function checkButton(){
    if ( hasUsername && hasPassword ) {
        $("button").attr('disabled', false);
    }
}