Use ajax to verify password with javascript prompt

Question

Within a webpage I'm trying to implement a button to prompt for the users password in order to logout. What I want to do is to use a javascript prompt to ask for it and then via AJAX send it to a php file which will verify if the password is correct and if it is it will return to index. What I've tried till now is the following:

HTML:

<button style="" type="submit" class="" onclick='checkPass()'>              
        Logout
</button>

<script>
function checkPass()
{
    var usr = "<?php echo $usr = $_POST['usr']; ?>";
    var pass=prompt("Please write your password","");
    if (pass!=null && pass!="")
    {
        $.post("check.php", {pass: pass, usr:usr});
    }
}

</script>

Check.php:

<?php

$host="localhost"; // Host name 
$username=""; // Mysql username 
$password=""; // Mysql password 
$db_name=""; // Database name 


// Connect to server and select databse.
mysql_connect("$host", "$username", "$password")or die("cannot connect"); 
mysql_select_db("$db_name")or die("cannot select DB");

$pass = mysql_escape_string($_POST['pass']);
$usr = mysql_escape_string($_POST['usr']);
$sql = mysql_query("SELECT * FROM USERS WHERE Usr='$usr' and Password='$pass'");

$count=mysql_num_rows($sql);

// If result matched $myusername and $mypassword, table row must be 1 row
if($count==1){
    header("location:index.php");
}
else {

}

?>

This is what I have but nothing is happening (I am getting no response)... :(

Thanks for your help!

"button to prompt for the users password in order to *logout*" --- WHAT? o_O — zerkms, Jul 06 '14 at 23:22
***Never*** store user passwords in plain text. There is ***no*** reason to do this. User passwords should be hashed immediately upon receiving them and never retrievable. — David, Jul 06 '14 at 23:25
As for the actual question... Define "nothing is happening." Is the AJAX request made? Does it have the parameters you expect? Does the server receive that request? What is the server's response? "It doesn't work" isn't a description of the problem. You need to do some debugging to determine at least specifically *where* the process fails. — David, Jul 06 '14 at 23:26

score 2 · Accepted Answer · edited May 23 '17 at 12:29

This:

if($count==1){
    header("location:index.php");
}

isn't doing what you think it's doing. Remember that this request is being made via AJAX, not as the main browser window. A redirect of this nature doesn't actually tell the browser to do anything, it just sends a specific response type with a specific header. Normally this suggests to the browser that it should initiate a new request to another page (in this case index.php). Browsers normally honor this request.

However, AJAX is a little different. The server-side code is still sending that same response type with that same header, but the browser isn't the one that made the request. The JavaScript code is. And the JavaScript code isn't going to automatically follow this suggestion to redirect the user. You have to do that yourself.

AJAX requests and responses should usually just contain data. So you can send some data back to the client. You can JSON encode some values, but something as simple as this will do the trick in this case:

if($count==1){
    echo "true";
}
else {
    echo "false";
}

Then in the client-side callback, you check for the value and respond accordingly:

$.post("check.php", {pass: pass, use:use}, function (response) {
    if (response == 'true') {
        // redirect the user
    } else {
        // authentication failed
    }
});

Performing the redirect in JavaScript is easy enough.

Edit: on the console I'm getting the error: ReferenceError: Can't find variable: $ $.post("check.php", {pass: pass, usr:usr});

Well, in that case it sounds like you also haven't loaded the jQuery library. You need to do that in order to use jQuery code.

Use ajax to verify password with javascript prompt

1 Answers1