Ejemplo sencillo con ajax - Comprobar disponibilidad de un nick

Este es un ejemplo sencillo de ajax para comprobar si ya existe el nick del usuario en la base de datos cuando se va a registrar. La única librería que necesitamos descargar es prototype.js y llamarla en el HEAD de nuestra web:

En el formulario, en el INPUT donde hay que introducir el nick de usuario pondremos un evento javascript onKeyUp llamando a nuestra función para comprobar si existe el nick. Usamos el evento onKeyUp para que se llame a la función cada vez que se introduzca una letra. También insertamos una sección SPAN, donde se escribirá si existe el usuario o no.

Ahora definimos también la función "comprobar" dentro del head:

La variable "url" es la dirección donde se encuentra el archivo php que comprobará si existe el nick en la base de datos.
En la variable "pars" escribimos las diferentes varibles que vamos a pasar al anterior php.
El primer parámetro de Ajax.Updater es la etiqueta html que se va a actualizar con el resultado de la función (diciendo si existe el usuario o no). El segundo parámetro es la variable "url" con la dirección del archivo php que ya hemos definido antes. En el tercer parámetro decimos el método por el que pasar las variables a la función (normalmente GET) y las variables que vamos pasar (que hemos definido en la variable "pars").

El archivo ajax_comprobar_nick.php tendrá el siguiente contenido:

Ahora cada vez que se escriba una letra en el campo nick del formulario, se llamará al fichero php anterior para comprobar si existe el nick en la base de datos y se actualizará el campo SPAN "comprobar_mensaje" con el resultado.

Compártelo

También te puede interesar...

Comentarios

  • Avatar_128_thumb

    smeerkahoven - 03/10/2008 10:48:17

    Prototype rules !!!

    jonseg espero comparti yo tambien mi experiencia con esta plataforma.

  • No_avatar_thumb

    thefantas - 01/04/2009 07:46:16

    Mmmmm hay un error en la function comprobar porque siempre busca en la base de datos "nick".. y no le hace honor al título del text (Comprobar disponibilidad de un nick).

     

    Solución:

    Reemplazar la línea 6,

    "var pars='nickname=nick'; "     por

    "var pars= ("nickname=" + nick);"

     

    Saludos

  • No_avatar_thumb

    DAT404 - 27/12/2010 02:54:32

    @thefantas Yo lo he solucionado de la siguiente manera:

    poniendole un campo ID al input

    Y haciendo que javascript obtenga el dato mediante ID (en este caso "username")

Escribe un comentario

Tienes que estar registrado para poder dejar comentarios.
Accede a tu cuenta o regístrate en NotasWeb.com.
Avatar_1 jonseg
en el Ranking


Artículos más vistos del usuario

Últimos artículos del usuario