Lost Password Script AJAX jQuery Bootstrap PHP and MySql

Now we need to create a lostpassword.php script. When someone clicks on the link from their email, they will be guided back to this script to reset their password.

<!DOCTYPE html>
<html lang="en">
<head>
<?php include_once('config.php'); $oldp=$_GET["p"]?>
<title>Lost Password Script AJAX jQuery Bootstrap PHP and MySql</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<?php
$result = $con->query("SELECT * FROM users WHERE password='$oldp' LIMIT 1") ;
$total=$result->num_rows;
if($total<1){
echo '<div class="alert alert-warning">Is it not a wonderful day? </div>';
}else{
while ($row = $result->fetch_assoc()) {$email=$row['email'];}
echo '<div class="form-group">
<label for="password">New Password:</label>
<input id="password" class="form-control" type="password" placeholder="New Password">
</div>
<input type="hidden" id="email" value="'.$email.'" />
<button type="submit" id="submit" class="btn btn-default">Change Password</button>
<div id="display"></div>';
echo '<script>
$(document).ready(function(){
$("#submit").click(function(){
var pw = $("#password").val();
var em = $("#email").val();
var dataString = "pw1="+ pw + "&em1="+ em;
$.ajax({
type: "POST",
url: "lostpasswordprocessor.php",
data: dataString,
cache: false,
success: function(result){
$("#display").html(result);
}
});
return false;
});
});
</script>';
}
?>
</div>
</body>
</html>

We will need a lostpasswordprocessor.php script. Copy the following code and put it in that file.

<?php
include_once('config.php');
$pw=mysqli_real_escape_string($con, $_POST['pw1']);
$pwclean = filter_var($pw, FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);
$hash=password_hash($pwclean, PASSWORD_BCRYPT);
$em=mysqli_real_escape_string($con, $_POST['em1']);
$emclean = filter_var($em, FILTER_SANITIZE_EMAIL, FILTER_FLAG_STRIP_HIGH);
//update the password in the database
mysqli_query($con,"UPDATE users SET password='$hash' WHERE email='$emclean' ");
echo '<div class="alert alert-success">Your password has changed <a href="#">Login Here</a></div>';
$con->close();
?>

Lost Password Script AJAX jQuery Bootstrap PHP and MySql was last modified: November 14th, 2023 by Maximus Mccullough

Summary

Article Name

Lost Password Script AJAX jQuery Bootstrap PHP and MySql

Description

This is a lost password script tutorial. It is written in AJAX, jQuery, Boostrap, PHP and MySql. Frequently people lose their passwords. Password reset scripts are almost mandatory with people expecting software to do everything for them. Writing scripts that lets people reset their passwords do post some risks.

Author

Maximus McCullough

Publisher

A1WEBSITEPRO LLC

Logo

Pages:Previous 1 2 3 4 Next

Leave a Reply Cancel reply