En este tutorial te enseñaré cómo comprobar la disponibilidad de un nombre de usuario o username sin tener que recargar la página, gracias a jQuery Ajax y PHP. Es fácil de implementar, y no requiere muchos conocimientos ni sobre PHP, ni sobre jQuery. Para ello utilizaré el método $.ajax(), pero puedes utilizar $.post() para crear el mismo script.
La implementación es simple, el usuario escribe en la caja de texto el nombre de usuario que haya escogido. Después la función $.ajax() envía una petición HTTP POST al script de PHP y, este, comprueba su disponibilidad en la base de datos. Dependiendo de si está disponible o no, el script de PHP devolverá un mensaje u otro, y dicho mensaje será mostrado al usuario.
Este simple tutorial contiene dos archivos PHP, uno es el principal, llamado index.php que contiene todo el código Javascript/jQuery y un simple formulario HTML, y el segundo es username-check.php, al cual se le llama dinámicamente via $.ajax() y muestra si el nombre de usuario está disponible o no.
Copia y pega el siguiente código SQL en tu phpMyAdmin para crear la tabla en tu base de datos.
CREATE TABLE `users` ( `id` INT( 5 ) NOT NULL AUTO_INCREMENT PRIMARY KEY , `user_name` VARCHAR( 25 ) NOT NULL ) ENGINE = MYISAM ;
Introduce algún registro en la tabla para poder hacer pruebas posteriormente. Copia y pega el siguiente código sql para insertar registros.
INSERT INTO `dbtest`.`users` (`id`, `user_name`) VALUES (NULL, 'Jorge'), (NULL, 'Angel');
Utilizando la función $.ajax(), el código debería ser similar a:
$.ajax({
type : 'POST',
url : 'username-check.php',
data : $(this).serialize(),
success : function(data)
{
$("#result").html(data);
}
});
Utilizando la función $.post(), el código debería ser similar a:
$.post("username-check.php", $("#reg-form").serialize())
.done(function(data){
$("#result").html(data);
});
Index.php
Contiene el código jQuery/Javascript junto a un formulario HTML. Cuando el usuario escriba el nombre de usuario en la caja de texto, se ejecutará el evento keyup(), el cual enviará lo escrito vía ajax POST al fichero username-check.php, el cual mostrará si está disponible o no.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Live Username Availability Check using PHP PDO and jQuery</title>
<script type="text/javascript" src="jquery-1.11.3-jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#name").keyup(function()
{
var name = $(this).val();
if(name.length > 3)
{
$("#result").html('checking...');
/*$.post("username-check.php", $("#reg-form").serialize())
.done(function(data){
$("#result").html(data);
});*/
$.ajax({
type : 'POST',
url : 'username-check.php',
data : $(this).serialize(),
success : function(data)
{
$("#result").html(data);
}
});
return false;
}
else
{
$("#result").html('');
}
});
});
</script>
</head>
<body>
<form id="reg-form" action="" method="post" autocomplete="off">
<fieldset>
<div>
<input type="text" name="name" id="name" placeholder="Username" />
<span id="result"></span>
</div>
</fieldset>
</form>
</body>
</html>Username-check.php
Este script de PHP es el que se encarga de comprobar la disponibilidad del nombre de usuario escogido por el visitante haciendo una consulta a base de datos. El script será llamado vía Ajax cada vez que el usuario escriba en la caja de texto correspondiente. Como puedes ver, al final del archivo, mediante un mensaje indica si el nombre de usuario está disponible o no.
<?php
$host="localhost";
$user="root";
$pass="";
$dbname="dbtest";
$dbcon = new PDO("mysql:host={$host};dbname={$dbname}",$user,$pass);
if($_POST)
{
$name = strip_tags($_POST['name']);
$stmt=$dbcon->prepare("SELECT user_name FROM users WHERE user_name=:name");
$stmt->execute(array(':name'=>$name));
$count=$stmt->rowCount();
if($count>0)
{
echo "<span style='color:brown;'>Sorry username already taken !!!</span>";
}
else
{
echo "<span style='color:green;'>available</span>";
}
}
?>Style.css
@charset "utf-8";
/* CSS Document */
*{margin:0; padding:0;}
#reg-form
{
margin:100px auto;
padding:25px;
border:solid #cfcfcf 1px;
width:50%;
background:#f9f9f9;
}
fieldset
{
padding:5px;
width:60%;
margin:0 auto;
border:0;
}
input
{
width:100%;
height:35px;
border:solid #00a2d1 1px;
padding-left:10px;
font-family:Verdana, Geneva, sans-serif;
font-weight:bold;
font-size:15px;
}
span
{
font-family:Verdana, Geneva, sans-serif;
font-weight:bold;
font-size:15px;
}
Fuente: codingcage.com