Posted 27th Jul by Carl Crawley
One of the other jobs needed for our last project was an ‘auto-check’ function whereby we could tell a user whether their chosen username was available or not *before* they signed up.
To do this, I simply used a custom/hidden template group/file, the tag and jQuery to pull it all together.
Firstly, you need to create yourself a new template group / file. These suggestions are purely for examples, you can call them what you want:
- Template Group “_ajax”
- Template File “username_check”
Ok – now that you have them, open the username_check template and enter the following:
{exp:query sql="select username from exp_members where username = '{segment_3}'"}
{username}
{/exp:query}
Note: If you have a multi-lingual set up like my previous post on Multilingual sites in EE, then you will need to change for .
To test your setup, you can simply now visit http://www.yoursite.com/_ajax/username_check/ and if a user exists it should return you the username else it will return a blank page.
(I had thought about turning the returned data into a JSON or XML response with more details, however this would then be open to misuse – so decided against it).
Now for the jQuery Implementation:
Firstly, create your input field and a container to handle your returned messages:
<input type="text" name="username" id="frm_username" value="" /> <p class="username_return"></p>
Then, either in the <head> or in a js file – simply put the following:
$(document).ready(function(){
$("#frm_username").keyup(function(){
$.ajax({
type: 'GET',
url: '/index.php/_ajax/username_check/'+$(this).val(),
success: function(data){
if (data=="")
{
$("p.username_return").html("Username Available")
$("p.username_return").css('background-color','#00ff00');}
else
{
$("p.username_return").html("Username Not Available, please choose another!")
$("p.username_return").css('background-color','#ff0000');
}
}
})
return false;
})
})
And thats it! You can extend this beyond the example here, for example, disable the submit button, change the colour of the input field, make the input field shake etc etc – the possibilities are endless!
Likewise, you can extend the script to check for anything you want – screen_name, email etc etc.
