Authentication using AJAX & PHP

Question

I make a simple program to simulate authentication using AJAX and PHP. The following is my code. It will redirect to "/?" but nothing happened. I tried to use checkLogin(); return false; in onclick event but it didn't work.

index.php

<script type="text/javascript" src="validation.js"></script>
<form>
    <p>
        <label>Username <abbr title="Required">*</abbr></label>
        <input id="usernamelogin" type="text" value="" />
    </p>
    <p>
        <label>Password <abbr title="Required">*</abbr></label>
        <input id="passwordlogin" type="text" value="" />
    </p>                
    <p>
        <input id="login" type="submit" value="Login" onclick="checkLogin()" />
    </p>
</form>

validation.js

function checkLogin(){
    var u = document.getElementById("usernamelogin").value;
    var p = document.getElementById("passwordlogin").value;

    if(window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
    }
    else{
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onReadystatechange = function(){
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
            if(xmlhttp.responseText == u){
                alert(':)');
            }
            else{
                alert(':(');
            }
        }
    }

    xmlhttp.open("GET", "login.php?u=" + u + "&p=" + p, true);
    xmlhttp.send(); 
}

login.php

<?php
    $u = $_GET['u'];
    $p = $_GET['p'];

    $host = 'localhost';
    $user = 'root';
    $pass = '';
    $db = 'db';

    $con = mysql_connect($host, $user, $pass);
    if(!$con) die("Could not connect: " . mysql_error());

    mysql_select_db($db, $con);
    $query = "select username from login where username = '" . $u . "' and password = '" . $p . "'";
    $result = mysql_query($query);
    $row = mysql_fetch_array($result);
    echo $row['username'];
    mysql_close($con);
?>

Why not using /login.php to be sure it will perform request to the same URL independent from the current URL. Also could you check if any XHR requests are performed using the Developer tools of Chrome or Firebug for Firefox? — Harry Dobrev
– Harry Dobrev, Commented Mar 20, 2013 at 0:25
if you like , i have suggestions 1) mysql_* are depricated 2)this authentication method is very weak! — internals-in
– internals-in, Commented Mar 20, 2013 at 0:25
Not an answer to your question, but you didn't sanitize your db inputs which is very dangerous. Certainly not safe for production. — Christopher
– Christopher, Commented Mar 20, 2013 at 0:26
@HaralanDobrev I tried /login.php and it didn't work. I'm checking the XHR requests. — shankshera
– shankshera, Commented Mar 20, 2013 at 0:37
@HaralanDobrev Thanks for your help, its status is 200. Turns out it must be onreadystatechange not onReadystatechange. Unbelievable. I use auto complete feature in Notepad++. — shankshera
– shankshera, Commented Mar 20, 2013 at 1:01

shankshera · Accepted Answer · 2013-03-21 19:25:49Z

2

I change the following code

xmlhttp.onReadystatechange

to

xmlhttp.onreadystatechange

and it works. And also use onclick="checkLogin(); return false;" in input type="submit".

edited Mar 21, 2013 at 19:25

answered Mar 20, 2013 at 1:04

shankshera

9934 gold badges21 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Micha van Eijk · Accepted Answer · 2013-03-20 00:23:19Z

0

What you can do is remove the onclick event from the input type="submit" and add it to the form:

<form onsubmit="return checkLogin()">

To let this work, you have to add

return false

to your javascript function, right before you close the function

answered Mar 20, 2013 at 0:23

Micha van Eijk

1381 silver badge6 bronze badges

1 Comment

shankshera Over a year ago

Thanks for your answer but it didn't work. The result I get is same as when I put onclick='checkLogin()'; return false; in input type="submit".

Collectives™ on Stack Overflow

Authentication using AJAX & PHP

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related