trying to reset password using php and javascript

Question

I am trying to create a forget password webpage using PHP and JS. Although when I try add an email address, and click "reset password" nothing happens, and there are no errors in the console. What I want is for the text to appear so the user knows if their password has been reset. But nothing happens and I am unsure what the problem is. If anyone has any ideas can you please let me know. Thanks

<?php
use PHPMailer\PHPMailer\PHPMailer;
require_once "functions.php";

if (isset($_POST['email'])) {
  require_once('config1.php');

    $email = $conn->real_escape_string($_POST['email']);


    $sql = "SELECT user_id FROM zz_login WHERE email='$email'";
    $result = mysqli_query($conn, $sql, MYSQLI_USE_RESULT);
    if (mysqli_num_rows($result) > 0) {
        $token = generateNewString();

        $sql = "UPDATE zz_login SET token='$token',
                            tokenExpire=DATE_ADD(NOW(), INTERVAL 5 MINUTE)
                            WHERE email='$email' ";
        $result = mysqli_query($conn, $sql, MYSQLI_USE_RESULT);

        require_once "PHPMailer/PHPMailer.php";
        require_once "PHPMailer/Exception.php";

        $mail = new PHPMailer();
        $mail->addAddress($email);
        $mail->setFrom("", "");
        $mail->Subject = "Reset Password";
        $mail->isHTML(true);
        $mail->Body = "
            Hi,<br><br>

            In order to reset your password, please click on the link below:<br>
            <a href='
            URL/resetPassword.php?email=$email&token=$token
            '>URL/resetPassword.php?email=$email&token=$token</a><br><br>

            Kind Regards,<br>
            Trip Guider
        ";

        if ($mail->send())
            exit(json_encode(array("status" => 1, "msg" => 'Please Check Your Email Inbox!')));
        else
            exit(json_encode(array("status" => 0, "msg" => 'Something Wrong Just Happened! Please try again!')));
    } else
        exit(json_encode(array("status" => 0, "msg" => 'Please Check Your Inputs!')));
}
?>

Javascript

alert(response);
response= $.parseJSON(response);
if (!response.status)

var email = $("#email");

$(document).ready(function () {
        $('.btn-primary').on('click', function () {
            if (email.val() != "") {
                email.css('border', '1px solid green');

                $.ajax({
                   url: 'forgotPassword.php',
                   method: 'POST',
                   dataType: 'json',
                   data: {
                       email: email.val()
                   }, success: function (response) {
                        if (!response.success)
                            $("#response").html(response.msg).css('color', "red");
                        else
                            $("#response").html(response.msg).css('color', "green");
                    }
                });
            } else
                email.css('border', '1px solid red');
        });
    });

Answer 1

You have to parse the json output in jQuery with the following lines:

response= $.parseJSON(response);
  if (!response.status)

Then you can check for the status variable value i.e. whether it is 1 or 0 according to your json_encoded variable in PHP. Also make sure that $mail->send() actualls succeeds in sending the email. Depending on the server (localhost or online) settings, it may not always work.

var email = $("#email");

$(document).ready(function () {
        $('.btn-primary').on('click', function () {
            if (email.val() != "") {
                email.css('border', '1px solid green');

                $.ajax({
                   url: 'forgotPassword.php',
                   method: 'POST',
                   dataType: 'json',
                   data: {
                       email: email.val()
                   }, success: function (response) {
                       response= $.parseJSON(response);
                        if (!response.status)
                          $("#response").html(response.msg).css('color', "red");
                        else
                            $("#response").html(response.msg).css('color', "green");
                    }
                });
            } else
                email.css('border', '1px solid red');
        });
    });

Edit: try sending the email using SMTP. Pasting from here,

$mail = new PHPMailer(); // create a new object
$mail->IsSMTP(); // enable SMTP
$mail->SMTPDebug = 1; // debugging: 1 = errors and messages, 2 = messages only
$mail->SMTPAuth = true; // authentication enabled
$mail->SMTPSecure = 'ssl'; // secure transfer enabled REQUIRED for Gmail
$mail->Host = "smtp.gmail.com";
$mail->Port = 465; // or 587
$mail->IsHTML(true);
$mail->Username = "email@gmail.com";
$mail->Password = "password";
$mail->SetFrom("example@gmail.com");
$mail->Subject = "Test";
$mail->Body = "hello";
$mail->AddAddress("email@gmail.com");

 if(!$mail->Send()) {

  // do your stuff
 } else {
    // do your stuff
 }

The example above uses gmail's smtp. If you use any other mailing service to send the email from, change the values of $mail->Host and $mail->Port accordingly

Answer 2

It should be very easy to debug what is happening with the following tools:

• Firefox Debugger Tab in Developer Tools
• Firefox Network Tab in Developer tools,
• xdebug for php

With Developer Tools Firefox Network tab, you should be able to look in the sub tab 'xhr' and see all outgoing requests. You can see the outbound data and the response from the server.

With the Debugger, you can step through your JavaScript and check that your logic is good.

With xdebug for php, you can step through your php code when the request hits your server and make sure the logic is good on that end.

Please use your Developer Tools!