[MOD] Ajax Username Checker

[Lucifix]

Quote from original mod:
In this post,I’ll show you how to make a fancy username availability checking in ajax and php using jquery.When, you check the the username avaiability a fancy message box will show you the message with a little bit of animation. If you are looking for such kind of effect for checking username availability, then this might be right post for you.
http://roshanbh.com.np/2008/04/check-username-available-ajax-php-jquery.html

Download jquery.js file and upload it to root directory: (EDIT: I have attached file jquery.js to this message)
http://docs.jquery.com/Downloading_jQuery#Download_jQuery

Find in page_header.php

Code: [Select]

  "url_search" => $site_sess->url(ROOT_PATH."search.php"),
and add before:

Code: [Select]

  "url_user_availability" => $site_sess->url(ROOT_PATH."user_availability.php", "&"),
Open header.html
After:

Code: [Select]

<link rel="stylesheet" href="{template_url}/style.css" />
Add:

Code: [Select]

<script src="jquery.js" type="text/javascript" language="javascript"></script>

Open register_form.html
Add to the top:

Code: [Select]

<script language="javascript">
//<!---------------------------------+
//  Developed by Roshan Bhattarai
//  Visit http://roshanbh.com.np for this script and more.
//  This notice MUST stay intact for legal use
// --------------------------------->
$(document).ready(function()
{
$("#username").blur(function()
{
//remove all the class add the messagebox classes and start fading
$("#msgbox").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
//check the username exists or not from ajax
$.post("{url_user_availability}",{ user_name:$(this).val() } ,function(data)
        {
  if(data=='no') //if username not avaiable
  {
  $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
  //add message and change the class of the box and start fading
  $(this).html('This User name Already exists').addClass('messageboxerror').fadeTo(900,1);
});
          }
  else
  {
  $("#msgbox").fadeTo(200,0.1,function()  //start fading the messagebox
{
  //add message and change the class of the box and start fading
  $(this).html('Username available to register').addClass('messageboxok').fadeTo(900,1);
});
  }

        });
 
});
});
</script>
Replace:

Code: [Select]

<input type="text" name="user_name" size="30" value="{user_name}" class="input" />
With:

Code: [Select]

<input type="text" name="user_name" size="30" value="{user_name}" id="username" class="input" /><span id="msgbox" style="display:none"></span>
Create new PHP file, name it user_availability.php and upload it to root directory:

Code: [Select]

<?php
//  Developed by Roshan Bhattarai 
//  Visit http://roshanbh.com.np for this script and more.
//  This notice MUST stay intact for legal use

define('ROOT_PATH', './');
include(ROOT_PATH.'global.php');
require(ROOT_PATH.'includes/sessions.php');

if (isset($HTTP_POST_VARS['user_name'])) {
$user_name = preg_replace("/[ ]{2,}/", " ", un_htmlspecialchars(trim($HTTP_POST_VARS['user_name'])));

if ($user_name != "") {
  $sql = "SELECT ".get_user_table_field("", "user_name")."
  FROM ".USERS_TABLE."
  WHERE ".get_user_table_field("", "user_name")." = '".strtolower($user_name)."'";
  if ($site_db->not_empty($sql)) {
//user name is not availble
echo "no";
  } else {
//user name is available
echo "yes";   
}
}
}
?>

Open style.css (folder: /templates/default) add to the end:

Code: [Select]

.messagebox{
position:absolute;
width:100px;
margin-left:10px;
padding:2px;
}
.messageboxok{
position:absolute;
width:auto;
margin-left:10px;
padding:2px;
font-weight:bold;
color:#008000;

}
.messageboxerror{
position:absolute;
width:auto;
margin-left:10px;
padding:2px;
font-weight:bold;
color:#CC0000;
}

[V@nо]

Nice, just make sure you use $site_sess->url() to generate the url to user_availability.php, otherwise it might create a new session (and slow down the script) on each request.

[Lucifix]

Thank you

But how would you use $site_sess->url() in javascript to generate that url?

[Lucifix]

Gosh, how can I forgot something like that  I'll post modification tomorrow.

Bye!

[V@no]

Also, <style> should be in header.html
By the way, coincidentally, just a few days ago I had question regarding <style> myself

[Lucifix]

Also, <style> should be in header.html

I have included <style> now directly in style.css file.

I hope this mod is valid now

[V@no]

Since the URL is executed directly by JS, I think you should use $site_sess->url(ROOT_PATH."user_availability.php", "&")
otherwise you'll get url with &amp;

P.S.

Code: [Select]

  $user_name = (isset($HTTP_POST_VARS['user_name'])) ? un_htmlspecialchars(trim($HTTP_POST_VARS['user_name'])) : "";
  $user_name = ereg_replace("( ){2,}", " ", $user_name);

  if (isset($HTTP_POST_VARS['user_name'])) {

can be optimized with:

Code: [Select]

  if (isset($HTTP_POST_VARS['user_name'])) {
  $user_name = preg_replace("/[ ]{2,}/", " ", un_htmlspecialchars(trim($HTTP_POST_VARS['user_name'])));

I don't know why ereg_replace() exists, in my benchmark it's over 50% slower then preg_replace()

[Lucifix]

Thx, I fixed that!

[Eagle Eye]

[MOD] Ajax Username Checker

Can this feature be extended for image verification and check email format too?

Thanks for this lovely MOD!

[Lucifix]

For image verification  defenitly not! But for email... maybe yes

[neverkas]

a mi no me funciona! 

Me dice que esta disponible tal usuario, pero en realidad ya está registrado...

Qué sucede? Por qué el error?
Hice paso por paso tal cual.

[Sunny C.]

Kann das jemand vielleicht mal auffrischen?
In der 1.7.7 klappt das irgendwie nicht, obwohl ich mir nicht vorstellen kann warum.
Liegt es vielleicht an dieser PHP Datei, die man erstellen muss?

Ich würde gerne das Script verwenden:
http://www.pa-s.de/php/codeschnipsel-AJAX-Username-Check-52.php

Aber ich weis nicht wie man eine Datenbankanfrage erstellt!

[bergblume]

kann man diesen mod mittlerweile auch als image name checker modifizieren und verwenden - sprich, dass wenn ein user z.B. "schönes Bild" als Bildname eingibt - dies automatisch gegengeprüft wird?

[Sunny C.]

Die Idee finde ich ebenfalls sehr klasse!

[bergblume]

gibt es hierzu evtl. schon was neues?