AJAX Password Change without Refresh

Posted by Richard on Stack Overflow See other posts from Stack Overflow or by Richard
Published on 2012-10-21T03:25:43Z Indexed on 2012/10/21 5:02 UTC
Read the original article Hit count: 345

Filed under:
|
|
|
|

I'm trying to implement password change functionality into my website. I've got all the password changing script, validation, etc done. But now I need to prevent the page from going to the script page or refreshing. When the user clicks the submit button, I want nothing to change except a message displaying successfully changed or error. So here's my html:

<form id="change_Pass" action="" method="post">
    Current Password<input type="password" id="change_password" name="change_password"><br>
    New Password<input type="password" id="new_password" name="new_password"><br>
    Verify Password<input type="password" id="verify_password" name="verify_password"><br>
    <input type="submit" value="Submit" id="change_pass_submit">
</form>

And my jquery:

$('#change_pass_submit').click(function(){
    var $this = $(this);  
    $.ajax({
        data: $this.serialize(), // get the form data
        type: "POST", // GET or POST
        url: "/Private/change_password.php", // the file to call
        success: function() { // on success..
            //$('#success_div).html(response); // update the DIV
            alert("good");
        },
        error: function() { // on error..
            //$('#error_div).html(e); // update the DIV
            alert("bad");
        }
    });
    return false; //so it doesn't refresh when submitting the page
});

And my php:

<?php
session_start();
require_once '../classes/Bcrypt.php';
ini_set('display_errors', 'On');
error_reporting(E_ALL | E_STRICT);
$usr = $_SESSION["username"];
$old_pwd = $_POST["change_password"];
$new_pwd = $_POST["new_password"];
$new_pwd = Bcrypt::hash($new_pwd);
try {
    $link = new PDO('mysql:host=*;dbname=*;charset=UTF-8','*','*');
    $query = "SELECT *
            FROM Conference
            WHERE Username = :un";

    $stmt = $link->prepare($query);

    $stmt->bindParam(':un', $usr);
    $stmt->execute();
    $row = $stmt->fetchAll();

    $hash = $row[0]["Password"];
    $is_correct = Bcrypt::check($old_pwd, $hash);
    if($is_correct) {
        $query = "UPDATE Conference
                SET `Password`=:new_pwd 
                WHERE Username = :usr";

        $stmt = $link->prepare($query);
        $stmt->bindParam(':new_pwd', $new_pwd);
        $stmt->bindParam(':usr', $usr);
        $stmt->execute();
        return true;
    } else return false;
} catch(PDOException $e) {
    print "Error!: " . $e->getMessage() . "<br/>";
    die();
}

But for some reason, when I hit the submit button, the page STILL goes to change_password.php. I have no idea why, i've looked at so many tutorials and my code matches theirs but for some reason mine won't stay on the same page. Where did I go wrong?

© Stack Overflow or respective owner

Related posts about php

Related posts about html