can't tell why it won't work

[harkly]

Can someone help figure out why I can't get this AJAX code to work with only my CSS form and not with the tables version ? I could use just tables but am very curious as to why it won't work.

 

I am checking to see if the email entered is valid.

 

The AJAX ::

 

<SCRIPT type="text/javascript">
<!--
/*
Credits: Bit Repository
Source: http://www.bitrepository.com/web-programming/ajax/userID-checker.html 
*/

pic1 = new Image(16, 16); 
pic1.src = "loader.gif";

$(document).ready(function(){

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

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

if(usr.length >= 4)
{
$("#status2").html('<img src="loader.gif" align="absmiddle"> Checking availability...');

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

if(msg == 'OK')
{ 
        $("#email").removeClass('object_error'); // if necessary
	$("#email").addClass("object_ok");
	$(this).html(' <img src="tick.gif" align="absmiddle">');
}  
else  
{  
	$("#email").removeClass('object_ok'); // if necessary
	$("#email").addClass("object_error");
	$(this).html(msg);
}  
  });
} 
  }); 
}
else
{
$("#status2").html('<font color="red">The email should have at least <strong>4</strong> characters.</font>');
$("#email").removeClass('object_ok'); // if necessary
$("#email").addClass("object_error");
}

});

});

//-->
</SCRIPT>

 

Works with the following --

 

<form  method='post' action='resetUpdate.php' name='mailcheck' id='form_id' ">

    <tr>
      <td width="200"><div align="right">email: </div></td>
      <td width="100"><input id="email" size="20" type="text" name="email"></td>
      <td width="300" align="left"><div id="status2"></div></td>
    </tr>  

    <label for='userID'>Username </label><input type="radio" name="forgot" value='userID' class='outline'>
    <br><label for='pswd'>Password </label><input type="radio" name="forgot" value='pswd' class='outline'>

</form>

 

 

but not with this --

 

<form  method='post' action='resetUpdate.php' name='mailcheck' id='form_id'>

  <fieldset><legend>Change Password </legend>
    <span class='textbox'>
      <label for='email'>Enter your email: </label><input id="email" size="35" type="text" name="email" class='zip'><div id="status2"></div>

      <label for='userID'>Username </label><input type="radio" name="forgot" value='userID' class='outline'>
      <br><label for='pswd'>Password </label><input type="radio" name="forgot" value='pswd' class='outline'>
    </span>
  </fieldset>


</form>

 

Not sure how this line works but I do not have it in my stylesheet

 

<div id="status2"></div>

[jl5501]

That div is where the error message goes, so is important.

 

If you have firefox and run this with the error console open, it will show you any errors you are getting