0

Tengo el siguiente formulario :

<form id="frm-registrarusuario" action="../php/usuario.php" method="post">
  <input name="usuario" id="usuario" type="text">
  <input name="clave" id="clave" type="text">
  <button type="submit" name="submit" >Registrar</button>
</form>

El archivo usuario.php:

if(isset($_POST["validarUsuario"])){
    header('content-type: text/json');
    $usuario = $_POST["usuario"];
    $where = array("usuario"=>$usuario);
    if($obj -> validarUsuario("usuario",$where))
    {
        $data["respuesta"] = "EXISTE";
        $data["mensaje"] = "¡ERROR!, El usuario ingresado ya existe";
    }else{
        $data["respuesta"] = "NOEXISTE";
    }
    echo json_encode($data);
}

el codigo jquery:

$(document).ready(function () {
    $("#frm-registrarusuario").on("submit",function (e) {
        e.preventDefault();
        var usuario = $("#usuario").val();
        $.ajax({
            method:'post',
            url:'../php/usuario.php',
            data:{
                usuario:usuario,
                validarUsuario:1
            },
            dataType:'json',
            success:function (data) {
                if(data["respuesta"]=="EXISTE"){
                    alert(data["mensaje"]);
                    return false;
                }
                if(data["respuesta"]=="NOEXISTE"){
                    return true;
                }
            }
        });

    });
});

Lo que intento hacer es que si el usuario existe, el form no permita enviar datos, sin embargo al exister el usuario, aun envia el formulario. Parece que el ajax se ejecuta al final de todo, despues de enviar el form. Alguna idea como solucionarlo?

5
  • 1
    Si hay que buscar la existencia del usuario en el servidor, el formulario tendrá que enviarse siempre, exista el usuario o no, será la respuesta del servidor la que determinará su existencia y tú determinarás si existe o no en base a esa respuesta del servidor. Parece que hay un ligero problema de comprensión sobre cómo funciona Ajax en sí. Ahora bien, si tienes otro medio para validar al usuario sin acudir al servidor, entonces sí tendría sentido lo que planteas.
    – A. Cedano
    Commented el 23 dic. 2017 a las 0:04
  • Que alternativa podria usar? La idea es validar con ajax la existencia de un usuario antes de su registro.
    – Raphael
    Commented el 23 dic. 2017 a las 0:06
  • 1
    Si los datos del usuario están en el servidor, tu código es correcto como está planteado ahora: envía los datos recogidos en el formulario para verificar si existen y en el success, determinas (en base a la respuesta del servidor), si el usuario existe o no. Lo que no entiendo es por qué quieres evitar que el formulario se envíe en caso de que el usuario exista. ¿Qué otro medio tienes para verificar que el usuario existe? Supongo que los datos del mismo están almacenados en una base de datos y que es allí donde verificas. A no ser que quieras evitar que la página se cargue de nuevo.
    – A. Cedano
    Commented el 23 dic. 2017 a las 0:10
  • Quiero evitar que la pagina cargue de nuevo si el usuario existe, si no existe, que se envie de forma tradicional.
    – Raphael
    Commented el 23 dic. 2017 a las 0:13
  • ¿Como lo tienes ahora la página se carga de nuevo? Puedes quitarle los return false; y return true;. En la parte del success donde tienes eso lo que deberías es modificar el contenido de la página actual si así lo quisieras. Si quitando los return la página carga de nuevo significa que hay algún error, en el código jQuery mismo o del lado del servidor (PHP).
    – A. Cedano
    Commented el 23 dic. 2017 a las 0:16

2 respuestas 2

1

En tu caso concreto no puedes impedir el envió de los datos, lo necesitas por lógica de negocio. Si puede evitar que se realice la acción por defecto del submit.

Si lo que quieres es validar la existencia del usuario antes de su registro ¿Porque no enviar la petición al servidor como estás haciendo? Al hacerlo, permites que el servidor realice la validación y en caso de que no exista lo registra, en caso contrario de que exista, por ejemplo puedes retornar su información y actualizas el contenido de la página con esos datos.

Por defecto como lo tienes planteado ajax no refresca la página:

$("#frm-registrarusuario").on("submit",function (e) {
            e.preventDefault(); 
           // PERFECTO-> Capturas el evento y evitas que refresque haciendo la llamada con ajax.
            $.ajax({
            ...

El problema lo tienes con los returns, estos pueden provocar un refresh del DOM recargando la página, ahí deberías de poner funcionalidad que puedas aprovechar con la llamada ajax como los alert que ya haces.

0

Al final de tu código Ajax añade lo siguiente

e.preventDefault();
return false;
1
  • Por favor explica tu respuesta
    – user128299
    Commented el 3 jul. 2019 a las 4:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.