[ste]

Heya guys,

I'm in the process of building a registration form and I'm checking for the validity of the username and then also checking to see if it exists in the db.

At the moment it's firing on every keyup (because of the code). I was just wondering if anyone could recommend howto pause this request until the user has finished typing.

Here's current state of the code:

$("span#username input").keyup(function () {
            var username = $("span#username input").val().length;
            var username_input = $("span#username input").val();
            if(username >= 2)
            {
                valid_username = 1;
                check_username_exists(username_input);    // function that makes the Ajax request            
                $("span#username img").attr("src","images/tick.png").attr("alt","Valid Username Information");
            }
            else if(username == "")
            {
                $("span#username img").attr("src","images/asterisk_orange.png");
                valid_username = 0;
            }
            else
            {
                $("span#username img").attr("src","images/exclamation.png");
                valid_username = 0;
            }
            
            check_valid_inputs();      
        }); 

Thank you for your time!
Steve

[daveganley]

What about when the input loses focus

Dave

[drowzee]

ste,

use javascript setTimeout(code, timeout_milliseconds) function, something like that:

Code:

var _timeout = null;
$("span#username input").keyup(function() { if(_timeout != null) { clearTimeout(_timeout); _timeout = null; } _timeout = setTimeout('_checkUsername()', 2000); } );

function _checkUsername()
{
  _timeout = null;
  // your code here
}

this sample will wait for 2 seconds after user stop typing and then will send check request.

[ste]

Morning guys,

Thanks for the input so far

Drowzee, I have opted to go with the code you suggested, but for some reason when it comes to the timeout and firing the function it says it's not defined.

Here's the updated version of my code:

$("span#username input").keyup(function () {
            var username = $("span#username input").val().length;
            var username_input = $("span#username input").val();
            if(username >= 2)
            {
                valid_username = 1; 
                $("span#username img").attr("src","images/tick.png").attr("alt","Valid Username Information");
                var _timeout = null;
                if(_timeout != null)
                { 
                    clearTimeout(_timeout); 
                    _timeout = null; 
                } 
 
                _timeout = setTimeout('check_username_exists(username_input)', 2000); 
            }
            else if(username == "")
            {
                $("span#username img").attr("src","images/asterisk_orange.png");
                valid_username = 0;
            }
            else
            {
                $("span#username img").attr("src","images/exclamation.png");
                valid_username = 0;
            }
            
            check_valid_inputs();      
        });  // end keyup
 
        function check_username_exists(username){
            alert(username);
            _timeout = null;
            $("span#username img").after("<img src='images/ajax-loader.gif' alt='' />");
            $.get("act_checkusername.php", { username: username }, function(found)
            {
                if(found == 1)
                    $("span#username img").after("<p>Username taken</p>");
                else
                    $("span#username img").after("<p>Username available</p>");
            });
        } 

I think I'm missing pretty simple, but I can't quite see it!

[drowzee]

Hm, does it say that 'username_input' variable is not defined, or it says that 'check_username_exists' function is not defined?
Try rewriting statement like that:

_timeout = setTimeout('check_username_exists("'+escape(userna me_input)+'")', 2000);

[ste]

Thanks for the quick response drowzee, the original error said:

"check_username_exists is not defined
_timeout = setTimeout('check_username_exists(username_input)' , 2000); "

and using your updated recommendation it produced:

"check_username_exists is not defined
_timeout = setTimeout('check_usernam...s("'+escape(username_i nput)+'")', 2000);"

[drowzee]

Ok. I'm not sure of javascript framework you're using but this looks like syntax error in check_username_exists function (4-th line):

Code:

$.get("act_checkusername.php", { username: username }, function(found)
 ^ shouldn't there be some parenthesis with arguments?

[ste]

_timeout = setTimeout(function() {check_username_exists(username_input);}, 3000) 

Seems to make it work, however, when i monitor the GET requests it is still doing a reqeust for every character, doh!

[UnrealEd]

that's pretty logical: as you're setting a timeout every time the user hits a key.

When a user hits a key, the previous timeout should be unset, and a new one needs to be created.

[ste]

Yeah, your right UnrealEd, I've overlooked this.

Dave suggested I code it to detect when it has lost focus (which would be $().blur()) but ideally I'm trying to do it while the user is still within the input, but also keep the number of get requests down.

Could you possibly recommend another way I should approach this, while the user is still on the same input?

Thanks for the your continued help guys