Question

I am learning how to use JQuery to help check data availability.
To start with it, I wrote a few lines of codes using cakePHP.

I have written a function in a Controller for checking data input,
and the URL is like this:
http://www.mywebsite.com/controllers/action/avariable

I was trying to pass the value in a Input TextBox field using the JQuery Ajax to the URL above,
but I don’t know why it is not working in passing a variable to the Controller’s action.
Could you help me out please?

<Script language="javascript">
//<!--
$(document).ready(function(){  
$(document).change(function() { 
var usr = $("#data\\[User\\]\\[name\\]").val();
if(usr.length >= 3){ 
$("#username").append('<span><img align="absmiddle" src="loader.gif" />Checking</span>');

$.ajax({ 
type: "POST",
url: "http://www.mywebsite.com/controllers/action/",
data: usr,
success: function(msg){

     if(msg == 'OK')
     {
     $("#username").append('<span><img align="absmiddle" src="accepted.png"/></span>');
      }
     else
     {
     $("#username").append('<span>'+msg+'</span>');
     }
      } 
     });
      }
else
{
$("#username").append('<span>The username should have at least 3 characters.</span>');
}

});
}); 
//-->
</Script>

<form name="adduser" id="adduser" method="post" action="/controllers/action2">
<table border=0 width="100%">
<tr>
 <td>Username</td>
 <td>       
        <div id="username">
 <input type=text name="data[User][name]" id="data[User][name]">
 </div>       
        </td>
</tr>
<tr>
 <td>
 <input type="submit" value="Send">
 </td>
</tr>
</table>
</form>

Here is the code of the Action:

 function action($uname=null){
                 $result2=$this->__avail($uname);           
                  if($result2==1)
                   {return "OK";}
                   else
                   {return "NOT";}           
            }

Answer 1

Well for one you’re assigning a change event to the document object which isn’t going to do anything. What you probably want is:

(function($) {
    var timeout;
    var $user = $("#data\\[User\\]\\[name\\]").bind("keyup keydown keypress", function() {
        window.clearTimeout(timeout);
        // Give it a delay since the end user is probably still typing
        timeout = setTimeout(function() {
            ... your ajax logic and length check ...
            ... can use $user here to access the textfield ...
        }, 500);
    });
)(jQuery);