Question

I can’t put together a javascript if statment to activate my submit button if(username_ready && email_ready) ("#register").removeAttr("disabled"); so I have two vars and if they are both true I want the submit button to be active. The above doesn’t seem to work? I tried to hitch it into this…

$(document).ready(function()
{
$("#username").blur(function()
{
    //remove all the class add the messagebox classes and start fading
    $("#msgbox").removeClass().addClass('messagebox').text('Checking...').fadeIn(1000);
    //check the username exists or not from ajax
    $.post("user_availability.php",{ username:$(this).val() } ,function(data)
    {
      if(data=='no') //if username not avaiable
      {
        $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
        { 
          //add message and change the class of the box and start fading
          $(this).html('This User name Already exists').addClass('messageboxerror').fadeTo(900,1);
         var username_ready = false;
        });     
      }
      else
      {
        $("#msgbox").fadeTo(200,0.1,function()  //start fading the messagebox
        { 
          //add message and change the class of the box and start fading
          $(this).html('Username available to register').addClass('messageboxok').fadeTo(900,1);
           var username_ready = true;   
        });
      }

    });

});
});
</script>

<script src="jquery.js" type="text/javascript" language="javascript"></script> 
<script language="javascript"> 

$(document).ready(function()
{
$("#email").blur(function()
{
    //remove all the class add the messagebox classes and start fading
    $("#box").removeClass().addClass('messagebox').text('Checking...').fadeIn(1000);
    //check the username exists or not from ajax
    $.post("email_availability.php",{ email:$(this).val() } ,function(data)
    {
      if(data=='no') //if username not avaiable
      {
        $("#box").fadeTo(200,0.1,function() //start fading the messagebox
        { 
          //add message and change the class of the box and start fading
          $(this).html('This email name Already exists have you forgot your password? ').addClass('messageboxerror').fadeTo(900,1);
         var email_ready = false;
        });     
      }
      else
      {
        $("#box").fadeTo(200,0.1,function()  //start fading the messagebox
        { 
          //add message and change the class of the box and start fading
          $(this).html('Tezac Hamra').addClass('messageboxok').fadeTo(900,1);
           var email_ready = true;  
        });
      }

    });

});
});

Answer 1

You are declaring your username_ready and email_ready variables inside the anonymous functions you pass to the .moveTo() function, which means you cannot access them from outside those particular functions. Also those variables are being set as a result of two independent event handlers, so you need to coordinate the test somehow.

The way that seems simplest to me is something like the following (this is an over-simplified version of your code, so you may need to fiddle with it a bit):

$(document).ready(function() {

  // declare the flags outside the other functions
  var username_ready = false,
      email_ready = false;

  function checkSubmitStatus() {
    if (username_ready && email_ready) {
      $("#register").prop('disabled',false); 
    }
  }

  $("#email").blur(function() {
    // put your existing code here, with just a change
    // where you set email_ready to not declare it with `var`
    // (it's now declared above)
    email_ready = true; // or false
    checkSubmitStatus();
  }

  $("#username").blur(function() {
    // your other code here
    username_ready = true; // or false
    checkSubmitStatus();
  }

});