CODEWITHSUNDEEP
javascriptjqueryhtmlasp.net
Eric
Eric

Reputation: 705

Jquery: Start function after browser fills textbox

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?

Upvotes: 0

Views: 73

Answers (1)

pcnate
pcnate

Reputation: 1774

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();
});

Upvotes: 1

Related Questions