I integrated the option to change the user's password, it works perfectly, the problem is that all the data remains right there in the form.
How can I hide the form when I get this response: Password changed successfully! and that after a x
second redirect to another page.
The code is the following:
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>
Bearing in mind that this condition must only be met if it is received as a response that everything in the process was successful, in this case that the password change was successful.
And that it won't redirect or execute when receiving another custom message error.
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";
}
}
The two options would be as follows, inside the
success
, taking advantage of the fact that you already have a variable that references the formfrm
as a recommendation, it would be to replace the
success
withdone
for the success returns of the callsajax
.If you want to validate the messages returned from
PHP
, one option would be to not only return the message but also astatus
to validate from JavaScript, this from PHP would be donejson_encode
as follows.For successful change
For erroneous changes or errors in validations
From JavaScript it would take into account the
status
to know if it hides the form or not.