Foros del web, para los que viven de bits

komodo · 19-nov-2006, 16:20

Hola a todos! Empiezo diciendo que soy nuevo en el mundo ajax y no soy experto en javascript, solo voy saliendo del paso. El caso és que tengo un formulario de registro con un campo "usuario", lo que pretendo és que cuando un usuario complete el campo y pase al siguiente, mediante ajax comprovar en ese instante si el nombre de usuario que ha escrito está en la base de datos o no.
Me gustaria poder contar con vuestras ideas o recursos para como solventar esto.
Muchas gracias y un saludo!

nixv2 · 19-nov-2006, 18:45

tendrias que usar el evento blur de la caja de texto y en ese instante comprobar solicitar al servidor la confirmacion de que el texto introducido exista o no, el servidor recibe el texto, consulta la base de datos y le regresa al cliente la respuesta, afirmativa o negativa. esoes todo!

have funnnnnnnnnnn

komodo · 20-nov-2006, 03:18

hola nixv2! Grácias por tu respuesta. Por casualidad no tendrias algun ejemplo con el que pudiera ver el codigo y asi ir aprendiendo... No estoy pidiendo exactamente el codigo que necesito,sinó alguno parecido que conecte a una base de datos para comprovar algo. Estoy bastante verde en esto y me gustaria ir aprendiendo.
Grácias y un saludo

komodo · 20-nov-2006, 04:27

Ya está solucionado! Grácias igualmente por la ayuda nixv2.
Saludos!

Valkam · 20-nov-2006, 04:30

Tienes dudas a la hora de validar el usuario con AJAX o bien a la hora de comprobar si el usuario se encuentra en la base de datos en el servidor??

Valkam · 20-nov-2006, 04:30

Tienes dudas a la hora de validar el usuario con AJAX o bien a la hora de comprobar si el usuario se encuentra en la base de datos en el servidor??

komodo · 20-nov-2006, 12:54

Ya está valkam, el problema era que no sabia muy bien como manejar ajax y haber si alguien me podia exar un cable dando algun pequeño ejemplo, pero ya lo he encontrado algun ejemplo por la red que me ha ido de maravilla.
Grácias de todos modos.
Un slaudo!

gvargas · 21-nov-2006, 17:58

Sería bueno que compartieras tu ejemplo.

Quizá le sirva a alguien más.

Un saludo

komodo · 23-nov-2006, 14:25

Hola gvargas! Si, perdonar por olvidar postear el ejemplo, esque he ido con prisas estos dias y no he pensado.
Aqui os dejo el ejemplo:

comprovar_disponibilidad_usuario.php

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<script language="javascript">
function nuevoAjax()
{
/* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por
lo que se puede copiar tal como esta aqui */
var xmlhttp=false;
try
{
// Creacion del objeto AJAX para navegadores no IE
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
// Creacion del objet AJAX para IE
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(E) { xmlhttp=false; }
}
if (!xmlhttp && typeof XMLHttpRequest!="undefined") { xmlhttp=new XMLHttpRequest(); }

return xmlhttp;
}

function eliminaEspacios(cadena)
{
// Funcion para eliminar espacios delante y detras de cada cadena
while(cadena.charAt(cadena.length-1)==" ") cadena=cadena.substr(0, cadena.length-1);
while(cadena.charAt(0)==" ") cadena=cadena.substr(1, cadena.length-1);
return cadena;
}

function validaIngreso(valor)
{
/* Funcion encargada de validar lo ingresado por el usuario. Se devuelve TRUE en caso de ser
valido, FALSE en caso contrario */
var reg=/(^[a-zA-Z0-9.@ ]{4,40}$)/;
if(reg.test(valor)) return true;
else return false;
}

function nuevoEvento(evento)
{
var divMensaje=document.getElementById("mensaje");

/* Dependiendo de cual sea el evento que ejecuto esta funcion (ingreso o verificacion) se setean
distintas variables */
if(evento=="ingreso")
{
var input=document.getElementById("ingreso");
var boton=document.getElementById("boton_1");
var valor=input.value;
var accion="Ingresando...";
}
else
{
var input=document.getElementById("verificacion");
var boton=document.getElementById("boton_2");
var valor=input.value;
var accion="Comprobando...";
}
// Elimino espacios por delante y detras de lo ingresado por el usuario
valor=eliminaEspacios(valor);
// Si el ingreso es invalido...
if(!validaIngreso(valor))
{
divMensaje.innerHTML="El texto ingresado contiene caracteres o longitud inválida";
}
else
{
// Deshabilito inputs y botones para evitar dobles ingresos
boton.disabled=true; input.disabled=true;
input.value=accion;

var ajax=nuevoAjax();
ajax.open("POST", "comprobar_disponibilidad_de_apodo_proceso.php ", true);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send(evento+"="+valor);

ajax.onreadystatechange=function()
{
if (ajax.readyState==4)
{
// Habilito nuevamente botones e inputs
input.value="";
boton.disabled=false; input.disabled=false;
// Muestro el mensaje enviado desde el servidor
divMensaje.innerHTML=ajax.responseText;
}
}
}
}
</script>

<style type="text/css">
.boton
{
height:16px;
width:58px;
font-size:8px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

.inputs
{
width:130px;
height:12px;
font-size:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

.aviso
{
text-align:center;
font-size:11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#FFFFFF; color:#FF0000;
}

.punteado
{
border-style:dotted;
border-color:#000000;
background-color:#EAEAEA;
font-family:Verdana;
font-size:10px;
text-align:center;
}
</style>
</head>

<body>
<center>
<table border="1" width="550" style="border-style:none;">
<tr>
<td id="fila_1" class="punteado" style="width:50%">
<input type="text" id="ingreso" class="inputs">
<input id="boton_1" onclick="nuevoEvento('ingreso');" type="button" value="Ingresar" class="boton">
</td>
<td id="fila_2" class="punteado" style="width:50%;">
<input type="text" id="verificacion" class="inputs">
<input id="boton_2" onclick="nuevoEvento('verificacion');" type="button" value="Comprobar" class="boton">
</td>
</tr>
</table>
<div class="aviso" id="mensaje"></div>
</center>
</body>
</html>

comprovar_disponibilidad_usuario_proceso.php

Cita:

<?php
function validaIngreso($valor)
{
// Funcion utilizada para validar el dato a ingresar recibido por POST
if(eregi("^[a-zA-Z0-9.@ ]{4,40}$", $valor)) return TRUE;
else return FALSE;
}

function conectar()
{
// Conexion a base de datos
mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("ajax") or die(mysql_error());
}

function desconectar()
{
mysql_close();
}

function verificaExistencia($apodo)
{
/* Funcion encargada de verificar la existencia del apodo recibido en base de datos.
Devuelve TRUE si el apodo existe, FALSE de lo contrario */
$consulta=mysql_query("SELECT id FROM apodos WHERE apodo='$apodo'") or die(mysql_error());
$registro=mysql_fetch_row($consulta);

if(!empty($registro)) return TRUE;
else return FALSE;
}

if($_POST["ingreso"])
{
// Quito espacios en blanco al comienzo y fin de la cadena
$valor=trim($_POST["ingreso"]);
// Si el valor recibido es valido...
if(validaIngreso($valor))
{
conectar();
// Si el apodo ya existe en base de datos...
if(verificaExistencia($valor)) echo "Tu apodo ya existe en la base de datos";
else
{
// Ingreso el nuevo apodo
mysql_query("INSERT INTO apodos (apodo) VALUES ('$valor')") or die(mysql_error());
echo "Tu apodo ha sido ingresado";
}
desconectar();
}
}
elseif($_POST["verificacion"])
{
// Quito espacios en blanco al comienzo y fin de la cadena
$valor=trim($_POST["verificacion"]);
// Si el valor recibido es valido...
if(validaIngreso($valor))
{
conectar();
// Si el apodo ya existe en base de datos...
if(verificaExistencia($valor)) echo "Tu apodo ya existe en la base de datos";
else echo "Apodo disponible";
desconectar();
}
}
?>

Espero que hos sirva de ayuda!

Un saludo!

19-nov-2006, 16:20	#1 (permalink)
komodo Fecha de Ingreso: noviembre-2006 Mensajes: 421	validar usuario Hola a todos! Empiezo diciendo que soy nuevo en el mundo ajax y no soy experto en javascript, solo voy saliendo del paso. El caso és que tengo un formulario de registro con un campo "usuario", lo que pretendo és que cuando un usuario complete el campo y pase al siguiente, mediante ajax comprovar en ese instante si el nombre de usuario que ha escrito está en la base de datos o no. Me gustaria poder contar con vuestras ideas o recursos para como solventar esto. Muchas gracias y un saludo!

20-nov-2006, 04:30	#5 (permalink)
Valkam Fecha de Ingreso: junio-2006 Ubicación: Sevilla Mensajes: 157	Comprobar Usuario Tienes dudas a la hora de validar el usuario con AJAX o bien a la hora de comprobar si el usuario se encuentra en la base de datos en el servidor??

20-nov-2006, 04:30	#6 (permalink)
Valkam Fecha de Ingreso: junio-2006 Ubicación: Sevilla Mensajes: 157	Comprobar Usuario Tienes dudas a la hora de validar el usuario con AJAX o bien a la hora de comprobar si el usuario se encuentra en la base de datos en el servidor??

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado

19-nov-2006, 18:45	#2 (permalink)
nixv2 Fecha de Ingreso: febrero-2006 Mensajes: 13	tendrias que usar el evento blur de la caja de texto y en ese instante comprobar solicitar al servidor la confirmacion de que el texto introducido exista o no, el servidor recibe el texto, consulta la base de datos y le regresa al cliente la respuesta, afirmativa o negativa. esoes todo! have funnnnnnnnnnn

20-nov-2006, 03:18	#3 (permalink)
komodo Fecha de Ingreso: noviembre-2006 Mensajes: 421	hola nixv2! Grácias por tu respuesta. Por casualidad no tendrias algun ejemplo con el que pudiera ver el codigo y asi ir aprendiendo... No estoy pidiendo exactamente el codigo que necesito,sinó alguno parecido que conecte a una base de datos para comprovar algo. Estoy bastante verde en esto y me gustaria ir aprendiendo. Grácias y un saludo

20-nov-2006, 04:27	#4 (permalink)
komodo Fecha de Ingreso: noviembre-2006 Mensajes: 421	Ya está solucionado! Grácias igualmente por la ayuda nixv2. Saludos!

20-nov-2006, 12:54	#7 (permalink)
komodo Fecha de Ingreso: noviembre-2006 Mensajes: 421	Ya está valkam, el problema era que no sabia muy bien como manejar ajax y haber si alguien me podia exar un cable dando algun pequeño ejemplo, pero ya lo he encontrado algun ejemplo por la red que me ha ido de maravilla. Grácias de todos modos. Un slaudo!

21-nov-2006, 17:58	#8 (permalink)
gvargas Fecha de Ingreso: octubre-2006 Ubicación: México D.F Mensajes: 211	Sería bueno que compartieras tu ejemplo. Quizá le sirva a alguien más. Un saludo

23-nov-2006, 14:25	#9 (permalink)
komodo Fecha de Ingreso: noviembre-2006 Mensajes: 421	Hola gvargas! Si, perdonar por olvidar postear el ejemplo, esque he ido con prisas estos dias y no he pensado. Aqui os dejo el ejemplo: comprovar_disponibilidad_usuario.php Cita: <!-- Este código fuente es de libre utilización y modificación bajo la siguiente licencia: http://creativecommons.org/licenses/by-nc-sa/2.5/ Puedes distribuir estos scripts o colocarlos en tu Sitio siempre y cuando no elimines estos comentarios y la licencia expuesta sea respetada. Mas ejemplos y material sobre AJAX en: http://www.formatoweb.com.ar/ajax Cualquier sugerencia, crítica o comentario son bienvenidos. Contacto: edanps@gmail.com --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script language="javascript"> function nuevoAjax() { /* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por lo que se puede copiar tal como esta aqui / var xmlhttp=false; try { // Creacion del objeto AJAX para navegadores no IE xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { // Creacion del objet AJAX para IE xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch(E) { xmlhttp=false; } } if (!xmlhttp && typeof XMLHttpRequest!="undefined") { xmlhttp=new XMLHttpRequest(); } return xmlhttp; } function eliminaEspacios(cadena) { // Funcion para eliminar espacios delante y detras de cada cadena while(cadena.charAt(cadena.length-1)==" ") cadena=cadena.substr(0, cadena.length-1); while(cadena.charAt(0)==" ") cadena=cadena.substr(1, cadena.length-1); return cadena; } function validaIngreso(valor) { / Funcion encargada de validar lo ingresado por el usuario. Se devuelve TRUE en caso de ser valido, FALSE en caso contrario / var reg=/(^[a-zA-Z0-9.@ ]{4,40}$)/; if(reg.test(valor)) return true; else return false; } function nuevoEvento(evento) { var divMensaje=document.getElementById("mensaje"); / Dependiendo de cual sea el evento que ejecuto esta funcion (ingreso o verificacion) se setean distintas variables / if(evento=="ingreso") { var input=document.getElementById("ingreso"); var boton=document.getElementById("boton_1"); var valor=input.value; var accion="Ingresando..."; } else { var input=document.getElementById("verificacion"); var boton=document.getElementById("boton_2"); var valor=input.value; var accion="Comprobando..."; } // Elimino espacios por delante y detras de lo ingresado por el usuario valor=eliminaEspacios(valor); // Si el ingreso es invalido... if(!validaIngreso(valor)) { divMensaje.innerHTML="El texto ingresado contiene caracteres o longitud inválida"; } else { // Deshabilito inputs y botones para evitar dobles ingresos boton.disabled=true; input.disabled=true; input.value=accion; var ajax=nuevoAjax(); ajax.open("POST", "comprobar_disponibilidad_de_apodo_proceso.php ", true); ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); ajax.send(evento+"="+valor); ajax.onreadystatechange=function() { if (ajax.readyState==4) { // Habilito nuevamente botones e inputs input.value=""; boton.disabled=false; input.disabled=false; // Muestro el mensaje enviado desde el servidor divMensaje.innerHTML=ajax.responseText; } } } } </script> <style type="text/css"> .boton { height:16px; width:58px; font-size:8px; font-family:Verdana, Arial, Helvetica, sans-serif; } .inputs { width:130px; height:12px; font-size:10px; font-family:Verdana, Arial, Helvetica, sans-serif; } .aviso { text-align:center; font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif; background-color:#FFFFFF; color:#FF0000; } .punteado { border-style:dotted; border-color:#000000; background-color:#EAEAEA; font-family:Verdana; font-size:10px; text-align:center; } </style> </head> <body> <center> <table border="1" width="550" style="border-style:none;"> <tr> <td id="fila_1" class="punteado" style="width:50%"> <input type="text" id="ingreso" class="inputs"> <input id="boton_1" onclick="nuevoEvento('ingreso');" type="button" value="Ingresar" class="boton"> </td> <td id="fila_2" class="punteado" style="width:50%;"> <input type="text" id="verificacion" class="inputs"> <input id="boton_2" onclick="nuevoEvento('verificacion');" type="button" value="Comprobar" class="boton"> </td> </tr> </table> <div class="aviso" id="mensaje"></div> </center> </body> </html> comprovar_disponibilidad_usuario_proceso.php Cita: <?php function validaIngreso($valor) { // Funcion utilizada para validar el dato a ingresar recibido por POST if(eregi("^[a-zA-Z0-9.@ ]{4,40}$", $valor)) return TRUE; else return FALSE; } function conectar() { // Conexion a base de datos mysql_connect("localhost", "root", "") or die(mysql_error()); mysql_select_db("ajax") or die(mysql_error()); } function desconectar() { mysql_close(); } function verificaExistencia($apodo) { / Funcion encargada de verificar la existencia del apodo recibido en base de datos. Devuelve TRUE si el apodo existe, FALSE de lo contrario */ $consulta=mysql_query("SELECT id FROM apodos WHERE apodo='$apodo'") or die(mysql_error()); $registro=mysql_fetch_row($consulta); if(!empty($registro)) return TRUE; else return FALSE; } if($_POST["ingreso"]) { // Quito espacios en blanco al comienzo y fin de la cadena $valor=trim($_POST["ingreso"]); // Si el valor recibido es valido... if(validaIngreso($valor)) { conectar(); // Si el apodo ya existe en base de datos... if(verificaExistencia($valor)) echo "Tu apodo ya existe en la base de datos"; else { // Ingreso el nuevo apodo mysql_query("INSERT INTO apodos (apodo) VALUES ('$valor')") or die(mysql_error()); echo "Tu apodo ha sido ingresado"; } desconectar(); } } elseif($_POST["verificacion"]) { // Quito espacios en blanco al comienzo y fin de la cadena $valor=trim($_POST["verificacion"]); // Si el valor recibido es valido... if(validaIngreso($valor)) { conectar(); // Si el apodo ya existe en base de datos... if(verificaExistencia($valor)) echo "Tu apodo ya existe en la base de datos"; else echo "Apodo disponible"; desconectar(); } } ?> Espero que hos sirva de ayuda! Un saludo!