2

Integré la opción de cambiar la contraseña del usuario funciona perfectamente, el problema es que todos los datos quedan ahí mismo en el formulario.

Como puedo ocultar el formulario cuando reciba esta respuesta: ¡Contraseña cambiada con éxito! y que luego de x segundo redirrecionar a otra página.

El código es el siguiente:

Ajax

<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    var frm = $('#resetform');
    frm.submit(function(e){
        e.preventDefault();

        var formData = frm.serialize();
        formData += '&' + $('#submit_btn').attr('name') + '=' + $('#submit_btn').attr('value');
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: formData,
            success: function(data){
                $('#message').fadeIn();
                $('#message').html(data).delay(3000).fadeOut(3000);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                $('#message').fadeIn();
                $('#message').html(textStatus).delay(2000).fadeOut(2000);
            }

        });
    });
});
</script>

form.php

<form name="resetform" action="changepass.php" id="resetform" class="passform" method="post" role="form">
    <h3>Change Your Password</h3>
    <br />
    <input type="hidden" name="username" value="<?php //echo $id_user; ?>" ></input>
    <label>Enter Old Password</label>
    <input type="password" class="form-control" name="old_password" id="old_password">
    <label>Enter New Password</label>
    <input type="password" class="form-control" name="new_password" id="new_password">
    <label>Confirm New Password</label>
    <input type="password" class="form-control"  name="con_newpassword"  id="con_newpassword" />
    <br>
    <input type="submit" class="btn btn-warning" name="password_change" id="submit_btn" value="Change Password" />
</form>

Teniendo en cuenta que solo se debe cumplir aquella condición solamente si se recibe como respuesta de que todo es proceso fue exitoso, en este caso que el cambio de la contraseña fue exitoso.

Y que no vaya a redireccionar o ejecutar al recibir otro error de mensaje personalizado.

if (isset($_POST['password_change'])) {
    // Asignamos variables
    $user = $_POST['username'];
    $old_password = $_POST['old_password'];
    $new_password = $_POST['new_password'];
    $con_password = $_POST['con_newpassword'];

    // comprobamos que las password coinciden
    if($con_password !== $new_password){
        echo "¡Las contraseñas no coinciden!";
        exit;
    }

    // Buscamos el usuario 
    $stmtUsers = $con->prepare("SELECT * FROM users where username=? limit 1");
    $stmtUsers->bind_param("s", $username);
    // validamos consulta
    if(!$stmtUsers->execute()) {
        echo 'Error nose pudo ejecutar la consulta';
        exit;
    }
    //obtenemos el resultado
    if(!$result = $stmtUsers->fetch()){
        echo "Nombre de usuario incorrecto";
        exit;
    }

    // validamos password bd con la introducida
    if (!password_verify($old_password, $result['password'])) {
        echo '¡La contraseña no es válida!';
        exit;
    }

    // si llegamos hasta aquí todo esta en orden y actualizamos


    // cifrados la password antes de guardarla recuerda
    $hash = password_hash($new_password, CRYPT_BLOWFISH);

    $stmtUpdate = $con->prepare("UPDATE `users` SET `password` = ? WHERE `username` = ?");
    $stmtUpdate->bind_param("ss", $hash, $username);
    if($stmtUpdate->execute()){
        echo "¡Contraseña cambiada con éxito!";
    } else{
         echo "La contraseña no se pudo actualizar";
    }
}

1 respuesta 1

3

Las dos opciones serían de la siguiente forma, dentro del success, aprovechando que ya tienes una variable que referencia al formulario frm

success: function(data){
   $(frm)[0].reset(); //Eliminar los valores en los input
   $(frm).hide();  // ocultar el formulario 
   // para redireccionar a otra página, sería setTimeout, 
   // o setInterval,la sintaxis es la misma 
   //como se recargará la página no habrá diferencia.
     setInterval(function(){ 
        location.href = 'google.com';
   },2000); // el 2000 es el tiempo en milisegundos,  2 segundos para el ejemplo
}

como recomendación, sería reemplazar el success por done para las devoluciones de éxito de las llamadas ajax.

Si desea validar los mensajes devueltos desde PHP, una opción sería no solo retornar el mensaje si no también un status para validar desde JavaScript, esto desde PHP ser haría con json_encode de la siguiente forma.

Para cambio exitoso

echo json_encode(['status'=> true, 'message'=>"¡La contraseña no es válida!"]);

Para cambios erróneos o errores en las validaciones

 echo json_encode(['status'=> false, 'message'=>"¡La contraseña no es válida!"]);

Desde JavaScript tendría en cuenta el status para saber si oculta o no el formulario.

$.ajax({
    type: frm.attr('method'),
    url: frm.attr('action'),
    data: formData,
})
.done(function(data) {
    let res = JSON.parse(data);
    if(res.status){ // si es true el estado
       $('#message').fadeIn();
       $('#message').html(res.message).delay(3000).fadeOut(3000);
       $(frm).hide();
       setTimeout(function(){
        location.href = 'otrapágina';
        },2000);
    }
    else{ //caso contrario ejecutamos alguna otra opción

    }

})
.fail(function() {
    $('#message').fadeIn();
    $('#message').html(textStatus).delay(2000).fadeOut(2000);
})
12
  • Interesante +1, el redireccionamiento solo funciona cuando los datos son ingresados correctamente, o también se ejecuta cuándo existe un error, por ejemplo si introdujo mal la contraseña actual o si la contraseña no coincide con la repetición. Commented el 14 ago. 2018 a las 4:26
  • @IniDesing.com dicha validación debería hacerse desde PHP y desde ahí retornar los valores o validaciones, en realidad la pregunta solo se centró en ocultar formulario y redireccionar.
    – Dev. Joel
    Commented el 14 ago. 2018 a las 4:44
  • Entiendo pero el usuario SO, indicó que de un determinado mensaje de éxito se ejecute, tocaría preguntarle bien al SO. Commented el 14 ago. 2018 a las 11:36
  • @Dev.Joel Hola! Tiene razón IniDesing.com me preguntó lo mismo viendo los comentarios, todo caso actualicé mi pregunta gracias :)
    – Fernando
    Commented el 14 ago. 2018 a las 11:58
  • 1
    @Dev.Joel Entiendo, pensé que los mensaje de error los hacía el .fail por favor amigo solo dígame para mostrar los mensajes de error, solo debo añadir esto: $('#message').fadeIn(); $('#message').html(res.message).delay(3000).fadeOut(3000); en el else
    – Fernando
    Commented el 15 ago. 2018 a las 17:00

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.