Question

The following function’s if statement never executes even when i have filled both the text-field and the
password field. The alert function works fine before the if statement but the alert function after the
if statement never works.

Here is the function :

<script type="text/javascript">
    function CheckForMissingFields() {
        alert("before if statement");
        if(document.getElementById("username").length != 0 && document.getElementById("password").length != 0) {
            document.getElementByName("SignInButton").disabled = 'false';
            alert("inside if statement");
        }
        alert("outside if statement");
    } 

Initially the state of the button SignIn is disabled. I look to enable it when the both the fields are done with.
What could be the reason for if statement never working ?

Following is the corresponding HTML sign-in snippet :

<ul>  <form method="post" action="#">
          <li> <input type="text" id="username" value="Username or Email" size="25" name="UserID"  onfocus="emptyTextField()" /> </li>
          <li> <input type="password" id="password" value="password" size="25" name="UserPassword" onfocus="emptyPasswordField()" /> 
          <center><input type="submit" value="sign-in" style="font-size:20px" name="SignInButton" disabled="true"/> </center>
          </li>
              </form>
</ul>

Answer 1

Use: if (document.getElementById("username").value.length) etc. In other words, you’ll need the value of the field.

No need for !=0 by the way, if the value.length === 0 value.length will evaluate to false (falsy)

Before checking the value length you may want to trim the value, so:

if (document.getElementById("username").value.replace(/^\s+|\s+$/,'').length)