In this articles i am going to show how to create Change password option in using PHP AJAX and JQuery.
Hope you have already configured login register and logout option.
My User table like below
tbl_admin
id,name,email,password,createdchange_password.php
<link rel="stylesheet" type="text/css" href="css/login.css"/>
<div class="container mt-4">
<form name="frmChange" method="post" action=""
onSubmit="return validatePassword()">
<div style="width: 500px;">
<div class="message"></div>
<table border="0" cellpadding="10" cellspacing="0"
width="500" align="center" class="tblSaveForm">
<tr class="tableheader">
<td colspan="2">Change Password</td>
</tr>
<tr>
<td width="40%"><label>Current Password</label></td>
<td width="60%"><input type="password"
name="currentPassword" class="txtField" id="opwd"/><span
id="currentPassword" class="required"></span></td>
</tr>
<tr>
<td><label>New Password</label></td>
<td><input type="password" name="newPassword"
class="txtField" id="pwd"/><span id="newPassword"
class="required"></span></td>
</tr>
<td><label>Confirm Password</label></td>
<td><input type="password" name="confirmPassword"
class="txtField" id="cpwd"/><span id="confirmPassword"
class="required"></span></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="submit"
value="Submit" class="btnSubmit"></td>
</tr>
</table>
</div>
</form>
</div>
script.js.php
<script>
$('.btnSubmit').click(function(e){
e.preventDefault();
var currentPassword = $('#opwd').val();
var newPassword = $('#pwd').val();
var confirmPassword = $('#cpwd').val();
$.ajax({
url:"ajax/changePassword.php",
datatype:'json',
method:'post',
data:{
'currentPassword':currentPassword,
'newPassword':newPassword,
'confirmPassword':confirmPassword,
'userId':<?=$_SESSION['userid'];?>
},
success:function(data){
// console.log(data);
if(data == '1'){
swal('Successful!','Password Successfully Updated. Reloading...','success');
setTimeout(function(){
location.reload();
},1500);
}else if(data == '2'){
swal('Caution!','New Password Not Match','alert');
}else if(data == '3'){
swal('Error!','Something Went Wrong. Please Try Again Later.','error');
}else if(data == '0'){
swal('Caution!','Current Password Not Match','alert');
}
}
});
});
</script>Include script.js.php file in footer section and JQuery CDN
Note## .js.php extension will help to wirte js and php code in the same file
footer.php
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<?php include('script.js.php');?> ajax/changePassword.php
<?php
//Accessories_fetch.php
include('../Connection/Functions.php');
if(isset($_POST['currentPassword'])){
change_password($_POST['currentPassword'],$_POST['newPassword'],$_POST['confirmPassword'],$_POST['userId']);
}
?>
Note:## You can see under the ajax folder changePassword.php file we have included Functions.php file. we will write PHP code on the same file like below
Functions.php
<?php
session_start();
include('DBClass.php');
/*Change Password function */
function change_password($currentPassword,$newPassword,$confirmPassword,$userId){
$db = new DBClass();
$result = $db->query('SELECT * FROM `tbl_new_admin` WHERE `id`='.$userId);
$data = mysqli_fetch_array($result);
$salt = $data['salt'];
if(sha1($salt.$currentPassword) == $data['password']){
if($newPassword == $confirmPassword){
$tmpPassword = $salt.$newPassword;
$updatePassword = sha1($tmpPassword);
$query = $db->query('UPDATE `tbl_new_admin` SET `password`= "'.$updatePassword.'" WHERE `id`='.$userId);
if($query)
echo '1';//Successfully Updated
else
echo '3';//Something Went Wrong
}else{
echo '2';//New Password Not Match
}
}else{
echo '0';//Current Password Not Match
}
}Note:## You can see under the functions.php file we have started session_start(); and include DBClass.php
session_start(); will help us to store data in session and no need to include separately one by one page because we have included in functions.php file and DBClass.php file is our Database connectivity settings we will us it as an object
Folder Structure
admin/Connection
- DBClass.php
- DBSettings.php
- Functions.php
admin/ajax
- All ajax file placed here.
DBClass.php
<?php
require_once( 'DBSettings.php' );
class DBClass extends DatabaseSettings{
var $classQuery;
var $link;
var $errno = '';
var $error = '';
function __construct(){
$settings = DatabaseSettings::getSettings();
$host = $settings['dbhost'];
$name = $settings['dbname'];
$user = $settings['dbusername'];
$pass = $settings['dbpassword'];
$this->link = new mysqli( $host , $user , $pass , $name );
}
function query( $query ) {
$this->classQuery = $query;
return $this->link->query( $query );
}
function lastInsertedID(){
if($this->link->insert_id)
return $this->link->insert_id;
else
$this->link->errno;
}
}
?>
DBSettings.php
<?php
class DatabaseSettings{
var $settings;
function getSettings()
{
// Database variables
// Host name
$settings['dbhost'] = 'localhost';
// Database name
$settings['dbname'] = 'yourdbname';
// Username
$settings['dbusername'] = 'dbusername';
// Password
$settings['dbpassword'] = 'dbpassword';
return $settings;
}
}
?>Custom CSS for password reset page
body {
font-family:Arial;
}
input {
font-family:Arial;
font-size:14px;
}
label{
font-family:Arial;
font-size:14px;
color:#999999;
}
.tblSaveForm {
border-top:2px #999999 solid;
background-color: #f8f8f8;
}
.tableheader {
background-color: #fedc4d;
}
.btnSubmit {
background-color:#fd9512;
padding:5px;
border-color:#FF6600;
border-radius:4px;
color:white;
}
.message {
color: #FF0000;
text-align: center;
width: 100%;
}
.txtField {
padding: 5px;
border:#fedc4d 1px solid;
border-radius:4px;
}
.required {
color: #FF0000;
font-size:11px;
font-weight:italic;
padding-left:10px;
}Thanks for reading……
