Jquery: Start function after browser fills textbox

Question

I have created a server control for a login panel. On this panel I have a textbox for the username and a textbox for the password. Below that there is the button for login.

I want the button to be disabled if either or both textboxes are empty.

For that I created a function that checks the length of the contents of the textboxes.

    function doCheck() 
{ 
    var lngth1 = document.getElementById('pnLogin_txtUserName').value.length; 
    var lngth2 = document.getElementById('pnLogin_txtPassword').value.length; 
    if (lngth1 > 0 && lngth2 > 0) 
      { 
        $('#pnLogin_btLogin').removeAttr('disabled'); 
      } else { 
        $('#pnLogin_btLogin').attr('disabled','disabled'); 
      } 
}

I run this function at the start and on every keyup event. That works great.

The problem is when the browser starts with the page. It fills in the username and password if they are stored. When the function is then run, it still disables the button even though there is information in the textboxes.

I tried this:

    setTimeout( function() 
{ 
  doCheck(); 
}, 2000);

But after 2 seconds I see the button disabling while seeing my credentials filled in.

If I inspect the element in Chrome, I don't see my credentials in the html code. So where is it stored? How can I detect this?

If you are using jQuery, then use it everywhere. You tried `$(document).ready(function(){ // Your code here });` ? — lmgonzalves, Jun 06 '15 at 18:56
Yes I did. I only mixed up javascript to see if it would work. — Eric, Jun 06 '15 at 19:13

score 1 · Answer 1 · edited May 23 '17 at 11:58

You will not see the values in the html as they are not actually in the DOM.

You may access their values using $("#pnLogin_txtUserName").val() and $("#pnLogin_txtPassword").val().

I would simplify your function and use jQuery specific syntax rather than native javascript.

function doCheck() { 
  var lngth1 = $("#pnLogin_txtUserName").val().length; 
  var lngth2 = $("#pnLogin_txtPassword").val().length; 
  if (lngth1 > 0 && lngth2 > 0) { 
    $('#pnLogin_btLogin').prop('disabled', false); 
  } else { 
    $('#pnLogin_btLogin').prop('disabled', true); 
  } 
}

I also changed your code from .attr to .prop for disabling the input. Find more information with this stackoverflow question

The problem is when the browser starts with the page. It fills in the username and password if they are stored. When the function is then run, it still disables the button even though there is information in the textboxes.

Your code is being executed the moment it is loaded and parsed by the browser. The proper jQuery method is to use whats called .ready() which will execute after jQuery detects the page has finished loading.

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

Or more simplified to:

$(function() {
    doCheck();
});

detecting change

We can detect when the values get changed by bind an event listener:

$("pnLogin_txtUserName").change(function() {
   console.log( 'pnLogin_txtUserName has changed', $(this).val() );
});

If we add a class to your inputs, say .loginElements, then we do things a bit easier and detect several different events:

$(".loginElements").on( 'change keypress', function() {
  doCheck();
});

Thank you for your answer. Actually this is almost exactly as I started with. I have now a mousehover event on the panel because most users will move their mouse to the login button anyway, but it would be better if the values in the textboxes was detected. — Eric, Jun 06 '15 at 19:11
Thank you. I also found some posts where it was stated that this is different per browser. I have had to let it go. — Eric, Jun 08 '15 at 07:16

Jquery: Start function after browser fills textbox

1 Answers1