How do I implement AJAX into a PHP user changing password form?

Question

I have a small password reset form that is accessible to the user on their user account page once they have successfully logged in. I want to implement JQUERY AJAX so that the page doesn't refresh but I am encountering errors where now the users password is not changed when a user submits the form.

HTML

<section id = "changepassword" class = "text-center">



  <div class = "container mt-4">

  <h1>Change Password</h1><hr />

  <form method = "POST" id = "change_password">



   <div class = "form-group mt-4">

     <label for = "currentPasswordField">Current Password</label>

     <input type = "password" name = "current_Password" class = "form-control mt-2" id = "currentPasswordField" placeholder = "Current Password">

   </div>



    <div class = "form-group mt-4">

      <label for = "newPasswordField">New Password</label>

      <input type = "password" name = "new_Password" class = "form-control mt-2" id = "newPasswordField" placeholder = "New Password">

     </div>



    <div class = "form-group mt-4">

      <label for = "confirmNewPassword">Confirm New Password</label>

      <input type = "password" name = "confirm_Password" class = "form-control mt-2" id = "currentPasswordField" placeholder = "Confirm New Password">

     </div>

     <button type="submit" name="changePasswordBtn" class="mt-4 btn btn-primary">Change Password</button>

   </form>

  </div>

Javascript

<script type="text/javascript">

    $(document).ready(function() {

        $("#change_password").submit(function(e) {

            e.preventDefault();

            $.ajax({

                type : "POST",

                url : "changepwfunc.php",

                data : $("#change_password"),

                beforeSend : function() {

                    toastr.info("Please wait. Your request will be processed shortly.");

                },

                success : function(response){

                  if (response.status) {

                    toastr.success(response.message);

                    $("#change_password")[0].reset();

                  }else{

                   toastr.error(response.message);

                   $("#change_password")[0].reset();

                  }

                }

              });

           });

         });

</script>

PHP

session_start(); 
$userEmail = $_SESSION['email']; if(isset($_POST['changePasswordBtn'])){ 
// get entered variables 
$oldPassword = $_POST['currentPasswordField']; 
$newPassword = $_POST['newPasswordField']; 
$confPassword = $_POST['confirmNewPasswordField'];



// hash password $hashPassword = password_hash($newPassword, PASSWORD_BCRYPT, array('cost'=>12)); 

// Run initial query check 
$chg_pwd = $conn -> query("SELECT * FROM `users` where `email` = '$userEmail'"); $chg_pwd1=mysqli_fetch_array($chg_pwd); $data_pwd=$chg_pwd1['password']; $pwVerify = password_verify($oldPassword, $data_pwd);

$pwAlertNeg = "Your old password was incorrect.";

$pwAlertPos = "Your password has been updated successfully.";

$pwAlertNeg2 = "Your new passwords do not match";



if($pwVerify == true){

    if($newPassword==$confPassword){

        $update_pwd = $conn -> query("UPDATE `users` SET password='$hashPassword' WHERE email = '$userEmail'");

        $response = array('status' => true, 'message' => $pwAlertPos);        

    }else{

        $response = array('status' => false, 'message' => $pwAlertNeg2);  

    }

}

else

{

    $response = array('status' => false, 'message' => $pwAlertNeg);

}

This code right now does not function as intended as the main purpose, the changing password function does not work, most likely a result of the javascript code I wrote to pass the form data, if I had to take a guess, as before I added it, the passwords were being changed successfully.

Answer 1

Note:- What you need is to do with firstly fetch the record based on email you entered in current password from the Database where only the email matches (assuming it is the Unique key), after that compare it with the user inputted password if it both database password & inputted password are matched then only password will be update with new password by sql updated query.

HTML Part :-

<section id = "changepassword" class = "text-center">
  <div class = "container mt-4">
  <h1>Change Password</h1><hr />
  <form method="post" name="password-form" id="form-password">
   <div class = "form-group mt-4">
     <label >Current Password</label>
     <input type = "password" name = "current_Password" class = "form-control mt-2" id = "oldpassword" placeholder = "Old Password">
   </div>
    <div class = "form-group mt-4">
      <label for = "newPasswordField">New Password</label>
      <input type="password" name="password" id="password" value="" 
 placeholder = "New Password">
     </div>
    <div class = "form-group mt-4">
      <label for = "confirmNewPassword">Confirm New Password</label>
      <input type="password" name="password-check" id="password-check" value="" placeholder = "Confirm New Password">
     </div>
<input type="submit" value="Submit" id="passsubmit" " class="mt-4 btn btn-primary">
   </form>
  </div>

JQuery Part:-

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript">
    
        $(document).ready(function() {
           $("#passsubmit").click(function(){
    event.preventDefault();
            $(".error").hide();
            var hasError = false;
            var newpass = $("#password").val();
             var oldpassword= $("#oldpassword").val();    
            var checkVal = $("#password-check").val();
            if (newpass == '') {
                $("#password").after('<span class="error">Please enter a password.</span>');
                hasError = true;
            } else if (checkVal == '') {
                $("#password-check").after('<span class="error">Please re-enter your password.</span>');
                hasError = true;
            } else if (newpass != checkVal ) {
                $("#password-check").after('<span class="error">Passwords do not match.</span>');
                hasError = true;
            }
    
            if(hasError == true) {return false;}
    
            if(hasError == false) {
                    $.ajax({
                    type: "POST",
                    url: "changepassword.php",
                    data: {oldpassword:oldpassword,newpass:newpass},
                    success: function(){
                      }
                    });
            };
        });
    });
    });
    
    </script>

PHP Part Update Query:-