Registro de usuarios con jQuery, Ajax y PHP
En este artículo vamos a describir con detalle como realizar un formulario de registro de datos validado mediante jQuery y procesado con Ajax y PHP.
Vamos a tratar un ejemplo sencillo de registro de usuarios en el que solo vamos a guardar el nombre de usuario, su contraseña y la fecha de registro.
Como siempre que vamos a trabajar con jQuery, lo primero que deberemos hacer es incluir sus librerías y css en el <head> de nuestra página.
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.6.min.js"></script>
También en el <head> deberemos incluir el código jQuery y Ajax que se encargará de validar los campos del formulario y de procesar esos datos.
<script type="text/javascript">
$(document).ready(function() {
$('.error').hide();
$("#enviar-btn").click(function() {
//Obtenemos el valor del campo nombre
var name = $("input#name").val();
//Validamos el campo nombre, simplemente miramos que no esté vacío
if (name == "") {
$("label#name_error").show();
$("input#name").focus();
return false;
}
//Obtenemos el valor del campo password
var password = $("input#password").val();
//Validamos el campo password, simplemente miramos que no esté vacío
if (password == "") {
$("label#pass_error").show();
$("input#password").focus();
return false;
}
//Construimos la variable que se guardará en el data del Ajax para pasar al archivo php que procesará los datos
var dataString = 'name=' + name + '&password=' + password;
$.ajax({
type: "POST",
url: "register.php",
data: dataString,
success: function() {
$('#register_form').html("<div id='message'></div>");
$('#message').html("<h2>Tus datos han sido guardados correctamente!</h2>")
.hide()
.fadeIn(1500, function() {
$('#message').append("<a href='index.php?action=see'>Ver usuarios registrados</a>");
});
}
});
return false;
});
});
runOnLoad(function(){
$("input#name").select().focus();
});
</script>
Al hacer click en el botón con id=»enviar-btn» se procesa el código anterior que se encaraga de validar el nombre de usuario y contraseña mirando que no estén vacíos y luego envía esos datos al archivo «register.php» mediante la técnica Ajax.
El archivo PHP se encarga de coger el nombre de usuario y contraseña introducidos y guardarlos en la base de datos de la siguiente forma:
<?php
$name = utf8_decode($_POST['name']);
$password = md5($_POST['password']);
//Para la conexión deberás introducir el usuario y password de tu base de datos
$con = mysql_connect('localhost', 'usuario', 'password');
mysql_select_db("tu_base_de_datos", $con);
$insert = "INSERT INTO tu_tabla (name, password, date_add) VALUES ('$name', '$password', now())";
mysql_query($insert);
?>
Como vemos el archivo PHP recoge los datos del formulario mediante POST, conecta a la base de datos e inserta los valores en un nuevo registro.
Para el campo nombre utilizamos la función utf8_decode() para asegurarnos de que los acentos y carácteres especiales se guardarán de forma correcta en la base de datos.
Y el campo password lo guardamos encriptado con la función md5() de PHP por cuestiones de seguridad.
Ahora solo falta que en el <body> pongamos el siguiente formulario:
<div id="register_form"> <form name="register" method="post" action=""> <label for="nombre">Nombre:</label> <input type="text" id="name" name="name" /> <label class="error" for="name" id="name_error">Debe introducir su nombre.</label><br><br> <label for="password">Password:</label> <input type="password" id="password" name="password" /> <label class="error" for="pass" id="pass_error">Debe introducir su contraseña.</label><br><br> <input name="submit" type="submit" value="enviar" id="enviar-btn" /> </form> </div>
Autor
¿Buscas trabajo de programador?
24 respuestas a “Registro de usuarios con jQuery, Ajax y PHP”
Deja una respuesta
103 artículos que te podrían interesar
Ver más sobre
Hola, estoy tratando de montar el registro pero como conecto con la base de datos, tengo que crear un usuario para la base que diste en tu ejemplo, saludos
Excelente gracias , era lo que necesitaba , me funciono perfecto
hola esta muy padre tu ejemplo fíjate que estoy aprendiendo me puedes enviar este ejemplo tal cual lo tienes en Ver ejemplo en funcionamiento
Saludos
Hola buenas tardes,
Te hemos preparado un archivo descargable con todos los archivos del ejemplo y la tabla de la base de datos.
Será necesario que instales el archivo sql en una base de datos y conectes con ella.
http://jose-aguilar.com/scripts/jquery/form-ajax-php/form-ajax-php.zip
Saludos
buenos dias amigo, queria hacerte una pequeña pregunta en tu codigo declaras una funcion runOnLoad la cual si ejecuto mi depurador me dice que no esta definida, mas sin embargo el codigo funciona no tiene problemas pero quiero saber donde tu declaras esta funcion, porque revise los externos y me baje la misma version de los js y nada, espero que me ayudes gracias amigo.
La función runOnload es de jQuery y es parecido a $(document).ready(function() {
SAludos
beunas noches jose, gracias por los aportes que nos das de verdad son de gran ayuda. te escribo por que quisiera q me orientaras en lo siguiente. utilizando ajx php y mysql… necesito verificar en un formulario si el usuario existe….. introduzco el codigo del usuario y si existe automaticamente se llenen los input con las consulta hecha en la base de datos… el evento lo llamaria desde el input «codigo» con la opcionn «onbluir»
Hola que tal,
Si, lo que comentas se puede hacer y te podría servir de base al menos la llamada ajax de este tutorial pero tendrás que cambiar o adaptar bastaten tu archivo php para que cumpla con el objetivo de retornar la información del usuario introducido.
En tu caso, en el evento onblur, hacer la llamada ajax y en el php adaptarlo con lo que te comento.
Saludos
Gracias… Pero sera posible que me ayudes con que no puedas haber dos usuarios con el mismo nick o pass gracias
mmm, creo que tendrás que hacer un ajax que te consulte si el email introducido ya existe y retorne un 0 o un 1 para que en el success del ajax puedas hacer una cosa u otra, es decir, continuar el registro o mostrar un alerta de email ya registrado.
Hola,
Todo perfecto,
pero me gustaria saber como tendria que hacer para comprobar si el usuario se registro anteriormente.
Gracias.
Hola,
Antes de insertar el usuario deberías hacer una consulta a la base de datos que checkee si el usuario existe. Hacer un condicional si no existe insertar
Saludos
Estimado, gracias por tu guia, me resultó útil para poder insertar un registro, pero que pasa cuando tengo que insertar distintos registros con distintos botones, te mando el link de una captura que lo que intento hacer… http://www.subirimagenes.net/i/140713012515302405.png
Me guarda solo la primera fila completa al presionar el boton de la primera fila, si trato de guardar el registro de la segunda fila, con el boton de la segunda fila no pasa nada, agradecería que pudieras ayudarme u orientarme al respecto, saludos.
Hola en esta linea
en el class error que es lo que lleva en estilo
Donde veo la consulta a la base de datos?
veo la inserción de los datos pero en que punto se hace la consulta?
para listar todos los datos.
Hola, el post solo habla de registrar los usuarios. No de mostrarlos. Sería hacer un SELECT de la tabla en cuestión.
Muy buen ejemplo . sabes que estoy aprendiendo todo este tema y la duda que tengo es saber diferenciar las variables de los nombres de los textbox y se me complica un poco por que tienen el mismo nombre
pro ejemplo esta linea
var dataString = \’name=\’ + name + \’&password=\’ + password;
podrias explicarmela un poco mejor.
gracias de antemano
En el dataString estamos construyendo una cadena con la información necesaria (name y password).
name=’ + name +
La primera parte es el nombre que luego en el archivo php tendremos que recoger mediante post y la segunda parte es la variable javascript que contiene el valor del input id=»name» en este caso.
Fíjate que en el archivo register.php procesado por ajax recoge los valores asi:
$name = utf8_decode($_POST[‘name’]);
muchas gracias, me quedo mas entendible
si pudieras postear un pequeño ejemplo de un altas bajas y cambios sencillo te lo agradeceria mucho
Hola! Muy buen tutorial 🙂
Pero una pregunta, como haríamos para validar también desde PHP?
Porque si el usuario no tiene Javascript..
Gracias!
Hola buenas tardes,
Una mejor opción ara contemplar lo que comentas es utilizar lo que se menciona en el siguiente artículo:
http://www.jose-aguilar.com/blog/validate-form-onfocusout/
donde se realiza la valicación mediante jquery y cuando todo es correcto se podria recibir la información por el método POST en el servidor y validar lo introducido con PHP.
i love your blog, i have it in my rss reader and always like new things coming up from it.
I like knowing that you’re attentive to my posts. Thank you. regards!!