Username availability is not working in internet explorer

PHP
1

Hi,
In my registration form im using below code for username availability.
username is email address…this code is working in firefox and chrome…but not work in internet explorer…anyone if you konw help me…

my check.php

<?php

// This is a sample code in case you wish to check the username from a mysql db table



if(isSet($_POST['username']))

{

$username = $_POST['username'];



$dbHost = 'localhost'; // usually localhost

$dbUsername = 'root';

$dbPassword = '';

$dbDatabase = 'glasen';



$db = mysql_connect($dbHost, $dbUsername, $dbPassword) or die ("Unable to connect to Database Server.");

mysql_select_db ($dbDatabase, $db) or die ("Could not select database.");



$sql_check = mysql_query("select username from tblregister where username='".$username."'") or die(mysql_error());

$num=mysql_num_rows($sql_check);

if($num >0)

{

$err='<font color="red">The EmailId <STRONG>'.$username.'</STRONG> is already in use.</font>';
echo $err;



}

else

{

echo 'OK';

}



}

?>

script code:

/*
Credits: Bit Repository
Source: [An AJAX (jQuery) Username Availability Checker with PHP Back-end](http://www.bitrepository.com/web-programming/ajax/username-checker.html) 
*/


pic1 = new Image(16, 16); 
pic1.src = "http://www.sitepoint.com/forums/images/loader.gif";

$(document).ready(function(){

$("#username").change(function() { 

var usr = $("#username").val();

if(usr.length >= 10)
{
$("#status").html('<img src="http://www.sitepoint.com/forums/images/loader.gif" align="absmiddle">&nbsp;Checking availability...');

    $.ajax({  
    type: "POST",  
    url: "check.php",  
    data: "username="+ usr,  
    success: function(msg){  
   
   $("#status").ajaxComplete(function(event, request, settings){ 

	if(msg == 'OK')
	{ 
        $("#username").removeClass('object_error'); // if necessary
		$("#username").addClass("object_ok");
		$(this).html('&nbsp;<img src="http://www.sitepoint.com/forums/images/tick.gif" align="absmiddle">');
	}  
	else  
	{  
		$("#username").removeClass('object_ok'); // if necessary
		$("#username").addClass("object_error");
		$(this).html(msg);
		
		
		
       }
   });

 } 
   
  }); 

}


});

});

Html form code:

  <form action="" method="post" name="form1" id="form1" onsubmit="return ValidateForm(form1)">
	  
     <div id="label"><b>First Name<span class="style4">*</span>:</b></div>
         <div>
           <div class="roundedfield" >
             <input name="fname" type="text" class="reg_text" id="fname"/>
           </div>
           </div>
           <div>
             <div id="label"><b>Last Name<span class="style4">*</span>:</b></div>
             <div class="roundedfield" >
               <input name="lname" type="text" class="reg_text" id="lname" />
             </div>
           </div>
           <div>
             <div id="label"><b>Email<span class="style4">*</span>:</b></div>
             <div class="roundedfield" >
			  <input name="username" type="text" class="reg_text" id="username" />             
             </div>
			 <div id="status" ></div>
           </div>
           <div>
             <div id="label"><b>New Password<span class="style4">*</span>:</b></div>
             <div class="roundedfield" >
               <input name="new_password" type="password" class="reg_text" id="new_password" />
             </div>
             <div class="roundedfield" ></div>
           </div>
           <div align="left">
             <label><input name="reg" type="image" class="submit_button" id="reg" value="Submit" src="http://www.sitepoint.com/forums/images/submit_but.PNG" />
             </label>
           </div>
           </form>

help me guys

2

I’m not sure what you’re trying to accomplish with this:

$("#status").ajaxComplete(function(event, request, settings) { .. }

Try something like this, if I correctly understand what you’re trying to do, this appears to work fine in all major browsers.


$(document).ready(function() {

    $("#username").change(function() { 
        var usr = $("#username").val();

        if(usr.length >= 10) {
            $("#status").html('<img src="http://www.sitepoint.com/forums/images/loader.gif" align="absmiddle">&nbsp;Checking availability...');

            $.ajax({  
                type: "POST",  
                url: "check.php",  
                data: "username="+ usr,  
                success: function(msg) {  
                    var elem = $("#status");
					
                    if(msg == 'OK') { 
                        // ... do stuff here
                    }  else  {  
                        // ... do stuff here
                    }
                } 
            }); 
        }
    });

});

The other I would suggest is using an object for post data rather then generating a query string e.g.


data: { 
     'username': usr,
     'foo': 'bar',
     'bar': 'baz'
}

Note quote strings (‘bar’, ‘baz’) not variables (usr)