🇻🇪 Terremoto en Venezuela — si eres de allá, repórtate y cuéntanos cómo estás. Tu comunidad está al pendiente. Ir al tema →
🏆 Mundial 2026 EN VIVO · Próximo: Francia vs España entra →

Formulario de registro no envía datos con ajax

  • Autor Autor AlexMnrs
  • Fecha de inicio Fecha de inicio
A

AlexMnrs

Beta
Verificación en dos pasos activada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Buenas!

Primero pido disculpas por no ser más específico con el título, pero no sabía como explicarlo en tan pocas palabras.

En segundo lugar, os pongo en situación. Tengo un formulario de registro con el siguiente código:

unirme.php

Insertar CODE, HTML o PHP:
<?php

if (!isset($_GET['accion'])) {
    echo '<div class="centrado">
    <form onsubmit="return false" class="formulario formulario-pequenio" id="frmRegistro" >
        <div class="formulario-grupo">
            <label for="nombre">Nombre</label>
            <input type="text" name="nombre" id="nombre" placeholder="Nombre..."> </div>
        <div class="formulario-grupo">
            <label for="usuario">Usuario</label>
            <input type="text" name="usuario" id="usuario" placeholder="Usuario..."> </div>
        <div class="formulario-grupo">
            <label for="email">Email</label>
            <input type="email" name="email" id="email" placeholder="Email..."> </div>
        <div class="formulario-grupo">
            <label for="pass1">Contraseña</label>
            <input type="password" name="pass1" id="pass1" placeholder="Contraseña..."> </div>
        <div class="formulario-grupo">
            <label for="pass2">Repetir contraseña</label>
            <input type="password" name="pass2" id="pass2" placeholder="Repetir contraseña..."> </div>
        <div class="formulario-grupo oculto" id="registro-erroneo">
            <div class="alerta alerta-rojo alerta-pequenia" id="registro-mensaje-error">Error</div>
        </div>
        <div class="formulario-grupo oculto" id="registro-correcto">
            <div class="alerta alerta-verde alerta-pequenia" id="registro-mensaje-ok">Correcto</div>
        </div>
        <div class="formulario-grupo centrado">
            <input type="submit" name="submit" class="boton boton-verde derecha" value="Registrar" onclick="registro(nombre.value, usuario.value, email.value, pass1.value, pass2.value);"> </div>
    </form>
</div>';

} else if ($_GET['accion'] == 'registrar') {
// Recibir los datos y almacenarlos en variables
    $nombre = $_POST['nombre'];
    $usuario = $_POST['usuario'];
    $email = $_POST['email'];
    $pass1 = $_POST['pass1'];
    $pass1 = md5($pass1); // Encriptar contraseña usuario en md5

    // Comprueba si el usuario/email ya existe en la base de datos
    $comprobar_existe = "SELECT * FROM ".$prefijo."_usuarios WHERE email = '$email' OR usuario = '$usuario'";
    $consulta_existe = mysqli_query($conexion, $comprobar_existe) or die('Error: ' . mysqli_error());
    $datos_existe = mysqli_fetch_assoc($consulta_existe);
    $cantidad_existe = mysqli_num_rows($consulta_existe); // 0 = No existe, 1 = Existe

    if ($cantidad_existe == 0) {
        // Insertar usuario
        $insertar = "INSERT INTO ".$prefijo."_usuarios (nombre, usuario, email, pass) VALUES ('$nombre', '$usuario', '$email', '$pass1')";

        // Ejecutar la consulta
        $resultado_insertar = mysqli_query($conexion, $insertar) or die(mysqli_error());

        echo 'correcto';
    } else {
        echo 'existe';
    }
}

?>

Y un archivo validar.js que se encarga de validar los campos y registrar al usuario en caso de que éste no exista:

Insertar CODE, HTML o PHP:
var url = 'http://localhost/betacreativa/';
var maximoCaracteresNombre = 30;
var maximoCaracteresUsuarioPass = 20;
var maximoCaracteresEmail = 100;

function registro(nombre, usuario, email, pass1, pass2) {
    if (limpiar(nombre) != '' && limpiar(usuario) != '' && limpiar(email) != '' && limpiar(pass1) != '' && limpiar(pass2) != '') {
        if (limpiar(pass1) != limpiar(pass2)) {
            $('#registro-erroneo').fadeIn(500);
            $('#registro-mensaje-error').text('Las contraseñas no coinciden');
        } else if (limpiar(nombre).length > maximoCaracteresNombre)
        {
            $('#registro-erroneo').fadeIn(500);
            $('#registro-mensaje-error').text('El nombre es demasiado largo');
        } else if (limpiar(usuario).length > maximoCaracteresUsuarioPass) {
            $('#registro-erroneo').fadeIn(500);
            $('#registro-mensaje-error').text('El usuario es demasiado largo');
        } else if (limpiar(email).length > maximoCaracteresEmail) {
            $('#registro-erroneo').fadeIn(500);
            $('#registro-mensaje-error').text('El email es demasiado largo');
        } else if (limpiar(pass1).length > maximoCaracteresUsuarioPass) {
            $('#registro-erroneo').fadeIn(500);
            $('#registro-mensaje-error').text('La contraseña es demasiado larga');
        } else {
            // Intentar llevar a cabo el registro
            $.ajax({
                // Especificamos si será una petición POST o GET
                type: 'POST',
                // Le pasamos la URL para la petición
                url: url + 'index.php?seccion=unirme&accion=registrar',
                // Establecemos si la petición será guardada en la cache del navegador o no.
                // Cuando el valor es false, se agrega una cadena de caracteres anti-cache
                // al final de la URL de la petición
                cache: false,
                // Esta es la información a enviar. En este caso estamos serializando, es decir, recogiendo
                // los datos que el usuario ha ingresado en el formulario de registro
                data: $('#frmRegistro').serialize(),
                // Código a ejecutar si la petición es satisfactoria
                // la respuesta es pasada como argumento a la función
                success: function(respuesta) {
                    if (limpiar(respuesta) == 'correcto') {
                        $('#registro-correcto').fadeIn(500);
                        $('#registro-mensaje-ok').text('Usuario registrado satisfactoriamente');
                    }
                    else if (limpiar(respuesta) == 'existe') {
                        // Mostrar error
                        $('#registro-erroneo').fadeIn(500);
                        $('#registro-mensaje-error').text('El usuario ya está registrado');
                    }
                }
            });
        }
    } else {
        $('#registro-erroneo').fadeIn(500);
        $('#registro-mensaje-error').text('Todos los campos son obligatorios');
    }
}

function limpiar(valor) {
    var cadena = valor.split(' ').join('');
    return cadena;
}

Del que, si no me equivoco, esta es la parte que está fallando:

Insertar CODE, HTML o PHP:
            $.ajax({
                type: 'POST',
                url: url + 'index.php?seccion=unirme&accion=registrar',
                cache: false,
                data: $('#frmRegistro').serialize(),
                success: function(respuesta) {
                    if (limpiar(respuesta) == 'correcto') {
                        $('#registro-correcto').fadeIn(500);
                        $('#registro-mensaje-ok').text('Usuario registrado satisfactoriamente');
                    }
                    else if (limpiar(respuesta) == 'existe') {
                        // Mostrar error
                        $('#registro-erroneo').fadeIn(500);
                        $('#registro-mensaje-error').text('El usuario ya está registrado');
                    }
                }
            });

Y particularmente, esta línea:

Insertar CODE, HTML o PHP:
url: url + 'index.php?seccion=unirme&accion=registrar',

Todo esto es una suposición mía por las distintas pruebas que he hecho, como separar el formulario en formulario_registro.php y el código php en registrar.php, y la línea anterior dejarla tal que así:

Insertar CODE, HTML o PHP:
url: url + 'registrar.php',

Y de esa forma funciona perfectamente. Por lo tanto, he llegado a esa conclusión, pero corregidme si me equivoco.

Espero que me hayáis entendido y podáis echarme un cable, me está pudiendo la presión desde ayer, no sé qué hacer :neglected:
 
Viendo que funciona si pones "registrar.php" puedo suponer que es un error en el archivo de index.php, ¿Qué hace index.php con el "?accion=registrar"?, si es una redirección común con HTML/JS no funcionará, tendría que ser una redirección con "header("location: Registrar.php");
 
Uhm, no creo que el index.php tenga nada que ver con este problema si te soy sincero. Lo único que hay es el enlace al formulario de registro que es index.php?seccion=unirme, entonces el objetivo es que al pulsar el botón Registrar del formulario, se envíe la petición a través de index.php?seccion=unirme&accion=registrar como le tengo puesto en el archivo validar.js.

De hecho, conseguí que funcionara al principio, pero no sé qué toqué que lo fastidié y no he sido capaz de solucionarlo :grumpy:
 
AJAX envía una petición POST a esa URL, si index.php no hace nada con esos datos (ya sea redireccionarlos, insertarlos en una base de datos o algo), la petición muere ahí, es como que yo haga un formulario que se envíe a otra página y dicha página sea estática, es decir no haga uso de las variables $_POST/REQUEST/GET para obtener los datos del formulario, lo correcto sería que en el index.php hubiese una condición:
PHP:
if($_GET['accion']=="registrar") header("location: registrar.php");

Adicionalmente te recomiendo el Uso de "Jquery.post", ya que hace esto un poco más sencillo siendo la función
HTML:
<script>
$.post("registrar.php",$('#frmRegistro').serialize(),function(respuesta){...});
</script>
 
AJAX envía una petición POST a esa URL, si index.php no hace nada con esos datos (ya sea redireccionarlos, insertarlos en una base de datos o algo), la petición muere ahí, es como que yo haga un formulario que se envíe a otra página y dicha página sea estática, es decir no haga uso de las variables $_POST/REQUEST/GET para obtener los datos del formulario, lo correcto sería que en el index.php hubiese una condición:
PHP:
if($_GET['accion']=="registrar") header("location: registrar.php");

Adicionalmente te recomiendo el Uso de "Jquery.post", ya que hace esto un poco más sencillo siendo la función
HTML:
<script>
$.post("registrar.php",$('#frmRegistro').serialize(),function(respuesta){...});
</script>

Voy a echarle un ojo! :encouragement:

----------------------------------------------------------------------------

No me ha funcionado.

Lo de la función $.post es así? No hace falta indicarle el tipo de la petición GET o POST ni nada de nada? Es como un shorthand del $.ajax o algo así?

Insertar CODE, HTML o PHP:
var url = 'http://localhost/betacreativa/';
var maximoCaracteresNombre = 30;
var maximoCaracteresUsuarioPass = 20;
var maximoCaracteresEmail = 100;

function registro(nombre, usuario, email, pass1, pass2) {
    if (limpiar(nombre) != '' && limpiar(usuario) != '' && limpiar(email) != '' && limpiar(pass1) != '' && limpiar(pass2) != '') {
        if (limpiar(pass1) != limpiar(pass2)) {
            $('#registro-erroneo').fadeIn(500);
            $('#registro-mensaje-error').text('Las contraseñas no coinciden');
        } else if (limpiar(nombre).length > maximoCaracteresNombre)
        {
            $('#registro-erroneo').fadeIn(500);
            $('#registro-mensaje-error').text('El nombre es demasiado largo');
        } else if (limpiar(usuario).length > maximoCaracteresUsuarioPass) {
            $('#registro-erroneo').fadeIn(500);
            $('#registro-mensaje-error').text('El usuario es demasiado largo');
        } else if (limpiar(email).length > maximoCaracteresEmail) {
            $('#registro-erroneo').fadeIn(500);
            $('#registro-mensaje-error').text('El email es demasiado largo');
        } else if (limpiar(pass1).length > maximoCaracteresUsuarioPass) {
            $('#registro-erroneo').fadeIn(500);
            $('#registro-mensaje-error').text('La contraseña es demasiado larga');
        } else {
            // Intentar llevar a cabo el registro
            $.post("index.php?seccion=unirme&accion=registrar",
            $('#frmRegistro').serialize(),
            function(respuesta){
                if (limpiar(respuesta) == 'correcto') {
                        $('#registro-correcto').fadeIn(500);
                        $('#registro-mensaje-ok').text('Usuario registrado satisfactoriamente');
                    }
                    else if (limpiar(respuesta) == 'existe') {
                        // Mostrar error
                        $('#registro-erroneo').fadeIn(500);
                        $('#registro-mensaje-error').text('El usuario ya está registrado');
                    }
                }
            });
        }
    } else {
        $('#registro-erroneo').fadeIn(500);
        $('#registro-mensaje-error').text('Todos los campos son obligatorios');
    }
}

function limpiar(valor) {
    var cadena = valor.split(' ').join('');
    return cadena;
}

Respecto a mi problema, piensa que en la url no le puedo poner registrar.php porque yo no quiero que al pulsar el botón de Registrar me lleve a ese archivo, de hecho no quiero ir a ninguna página, por lo menos de momento, y si te fijas en el código de arriba lo que hago es mostrar caja que por defecto está oculta en el formulario diciendo que el usuario se ha registrado correctamente. Por tanto, no necesito ir a ninguna página adicional, no sé cómo explicarlo... simplemente que al pulsar el botón Registrar envíe los datos a través de index.php?seccion=unirme&accion=registrar, pero que no se mueva del formulario porque entonces no tiene sentido que muestre una caja diciendo que el usuario se ha registrado, ya que al cambiar de página no se vería, no sé si me entiendes.
 
Última edición:
Precisamente qué es lo que pasa o por qué dices que no envia los datos, ya que yo estoy probando tal cual pusiste el código y me envia los datos bien.

Saludos.
 
Precisamente qué es lo que pasa o por qué dices que no envia los datos, ya que yo estoy probando tal cual pusiste el código y me envia los datos bien.

Saludos.

No lo sé tío... me estoy volviendo loco. Al principio funcionaba, luego "mágicamente" me cargué el código no sé cómo y hasta hoy no había conseguido solucionarlo. Y justo ahora, he conseguido que me funcione otra vez y no sé ni como, lo que pasa que con dos fallos:

1. Me gustaría que al pulsar el botón de Registrar saliera en la URL el index.php?seccion=unirme&accion=registrar, pero se queda en index.php?seccion=unirme obviamente porque el código está hecho para que la página no refresque ni nada, es decir, el formulario digamos que es estático, no redirecciona a una pagina registrado.php ni nada por el estilo, entonces ni idea cómo hacerlo.

2. No me aparecen los divs diciendome que el usuario existe o que me he registrado correctamente, sin embargo los de validación (todos los campos son obligatorios, el usuario es demasiado largo, etc.) sí que parecen.
 
No lo sé tío... me estoy volviendo loco. Al principio funcionaba, luego "mágicamente" me cargué el código no sé cómo y hasta hoy no había conseguido solucionarlo. Y justo ahora, he conseguido que me funcione otra vez y no sé ni como, lo que pasa que con dos fallos:

1. Me gustaría que al pulsar el botón de Registrar saliera en la URL el index.php?seccion=unirme&accion=registrar, pero se queda en index.php?seccion=unirme obviamente porque el código está hecho para que la página no refresque ni nada, es decir, el formulario digamos que es estático, no redirecciona a una pagina registrado.php ni nada por el estilo, entonces ni idea cómo hacerlo.

2. No me aparecen los divs diciendome que el usuario existe o que me he registrado correctamente, sin embargo los de validación (todos los campos son obligatorios, el usuario es demasiado largo, etc.) sí que parecen.

No te redirecciona porque tienes el:
PHP:
onsubmit="return false"

quitale eso y ponle un action con el archivo al que quieres que te mande. Tu función de validación metela en el evento onsubmit y si no se cumple alguna validacíon regresa false.
 
No te redirecciona porque tienes el:
PHP:
onsubmit="return false"

quitale eso y ponle un action con el archivo al que quieres que te mande. Tu función de validación metela en el evento onsubmit y si no se cumple alguna validacíon regresa false.

No no, no me has entendido, es que yo no quiero que me redireccione, yo simplemente quiero que del formulario (blabla.com/index.php?seccion=unirme) envíe los datos a la DB por blabla.com/index.php?seccion=unirme&accion=registrar, que parece que ahora sí lo está haciendo, el problema es que no se refleja en la url ese &accion=registro, pero bueno tampoco es un detalle imprescindible.

Lo que me preocupa es lo de los divs. Por alguna razón no se está ejecutando esta parte:

Insertar CODE, HTML o PHP:
success: function(respuesta) {
                    if (limpiar(respuesta) == 'correcto') {
                        $('#registro-correcto').fadeIn(500);
                        $('#registro-mensaje-ok').text('Usuario registrado satisfactoriamente');
                    }
                    else if (limpiar(respuesta) == 'existe') {
                        // Mostrar error
                        $('#registro-erroneo').fadeIn(500);
                        $('#registro-mensaje-error').text('El usuario ya está registrado');
                    }
                }
 
No no, no me has entendido, es que yo no quiero que me redireccione, yo simplemente quiero que del formulario (blabla.com/index.php?seccion=unirme) envíe los datos a la DB por blabla.com/index.php?seccion=unirme&accion=registrar, que parece que ahora sí lo está haciendo, el problema es que no se refleja en la url ese &accion=registro, pero bueno tampoco es un detalle imprescindible.

Lo que me preocupa es lo de los divs. Por alguna razón no se está ejecutando esta parte:

Insertar CODE, HTML o PHP:
success: function(respuesta) {
                    if (limpiar(respuesta) == 'correcto') {
                        $('#registro-correcto').fadeIn(500);
                        $('#registro-mensaje-ok').text('Usuario registrado satisfactoriamente');
                    }
                    else if (limpiar(respuesta) == 'existe') {
                        // Mostrar error
                        $('#registro-erroneo').fadeIn(500);
                        $('#registro-mensaje-error').text('El usuario ya está registrado');
                    }
                }

Es que tu "no se refleja en la url ese &accion=registro" me confundió. Para que se vea el la url (barra de direcciones del navegador) tienes que mandar el submit del formulario (redireccionar) si no la url va a ser la misma (en dónde se manda ese &accion=registro es en el ajax).

Y de lo que dices que no te pone los textos, pues ve checando paso a paso por qué puede ser, imprime la repuesta en el success y ve qué contiene, después fijate que si entre a su respectiva condición, etc.

Saludos.
 
Última edición:
Presiona F12, recarga, envía el formulario... Ahí tienes el error.

Enviado desde mi XT1097 mediante Tapatalk
 
Presiona F12, recarga, envía el formulario... Ahí tienes el error.

Enviado desde mi XT1097 mediante Tapatalk

Uhm, no sé a qué te refieres, no veo ningún error :ambivalence:
 
Uhm, no sé a qué te refieres, no veo ningún error :ambivalence:

La consola te indica dónde, y qué errores hay...

vennuUG.png
 
Eso lo sé, programo en otros lenguajes, pero es que no me sale ningún error, a eso me refiero xD

Y en network qué te sale al enviar el formulario? :fatigue::distant:
 
Y en network qué te sale al enviar el formulario? :fatigue::distant:

El título de la web, el menú del header, la palabra "existe" o "correcto" que es la respuesta que utilizo para determinar si el usuario que se registra ya existe o no, y el footer. Todo sin estilos, fondo blanco, texto negro.

7eoh9ks.png

(Tapo el nombre de la web porque la tengo en local y alguien podría quitarme el dominio, que no lo he comprado todavía jajaja :witless🙂
 
El título de la web, el menú del header, la palabra "existe" o "correcto" que es la respuesta que utilizo para determinar si el usuario que se registra ya existe o no, y el footer. Todo sin estilos, fondo blanco, texto negro.

7eoh9ks.png

(Tapo el nombre de la web porque la tengo en local y alguien podría quitarme el dominio, que no lo he comprado todavía jajaja :witless🙂

Ahí está el problema 🙂 te está regresando más datos que sólo la palabra "existe", que es la que comparas en js, por eso nunca te sale nada. Revisa bien el php.
 
Ahí está el problema 🙂 te está regresando más datos que sólo la palabra "existe", que es la que comparas en js, por eso nunca te sale nada. Revisa bien el php.

Sí, lo suponía, llevo todo el día pensando en eso, pero es que por más que miro el php no veo el error, yo por el if sólo le paso el insert a la base de datos en caso de no estar registrado y hago un echo de la palabra correcto, no le paso el header, ni el menú ni nada... de dónde sale eso??
 
Sí, lo suponía, llevo todo el día pensando en eso, pero es que por más que miro el php no veo el error, yo por el if sólo le paso el insert a la base de datos en caso de no estar registrado y hago un echo de la palabra correcto, no le paso el header, ni el menú ni nada... de dónde sale eso??
Ponle un exit cuando termina cada query, para que no muestre el html de la página.

Enviado desde mi XT1097 mediante Tapatalk
 
Ponle un exit cuando termina cada query, para que no muestre el html de la página.

Enviado desde mi XT1097 mediante Tapatalk

Después de cada query literal? Es que lo he hecho, pero sólo quita el footer, lo demás sigue saliendo :ambivalence: supongo que lo estaré poniendo mal...

Insertar CODE, HTML o PHP:
// Recibir los datos y almacenarlos en variables
    $nombre = $_POST['nombre'];
    $usuario = $_POST['usuario'];
    $email = $_POST['email'];
    $pass1 = $_POST['pass1'];
    $pass1 = md5($pass1); // Encriptar contraseña usuario en md5

    // Comprueba si el usuario/email ya existe en la base de datos
    $comprobar_existe = "SELECT * FROM ".$prefijo."_usuarios WHERE email = '$email' OR usuario = '$usuario'";
    $consulta_existe = mysqli_query($conexion, $comprobar_existe) or die('Error: ' . mysqli_error());
    exit;
    $datos_existe = mysqli_fetch_assoc($consulta_existe);
    $cantidad_existe = mysqli_num_rows($consulta_existe); // 0 = No existe, 1 = Existe

    if ($cantidad_existe == 0) {
        // Insertar usuario
        $insertar = "INSERT INTO ".$prefijo."_usuarios (nombre, usuario, email, pass) VALUES ('$nombre', '$usuario', '$email', '$pass1')";

        // Ejecutar la consulta
        $resultado_insertar = mysqli_query($conexion, $insertar) or die(mysqli_error());
        exit;

        echo 'correcto';
    } else {
        echo 'existe';
    }

He probado en otras partes que no literalmente después de las querys pero no parece que haya diferencias.
 
Atrás
Arriba