AJAX & PHP login system not working

  • (3 Pages)
  • +
  • 1
  • 2
  • 3

30 Replies - 3016 Views - Last Post: 02 December 2012 - 04:30 PM

#1 tim9009  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 73
  • Joined: 01-October 10

AJAX & PHP login system not working

Posted 27 November 2012 - 09:51 AM

Hello

I am currently working on a login system that uses AJAX to check if the username and password is correct. It works, but there is a problem. If i press the login button (this button activates the whole javascript code) the code does not go past the validation on line 21 untill I press the button a secound time. This has to be a problem with that if statement. Could you please give me some pointers (no C++ jokes...) as to what I am doing wrong?

function check_login()
{
    console.log("In check_login()");
    if(receiveData.readyState == 4 || receiveData.readyState == 0)
    {
        console.log("readystate passed");
        receiveData.onreadystatechange = handleReceiveData();
        receiveData.open("POST", 'php/login.php', true);
        receiveData.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        
        var param = "username=" + document.getElementById("login_username_input").value;
        param += "&password=" + document.getElementById("login_password_input").value;
        console.log(param);
        receiveData.send(param);
    }
}

function handleReceiveData()
{
    console.log("In handleReceiveData()");
    if(receiveData.readyState == 4)
    {
        console.log("Response: " + receiveData.responseText);
        document.getElementById("status").innerHTML = receiveData.responseText;
    }
}



Thank you!
-Tim

Is This A Good Question/Topic? 0
  • +

Replies To: AJAX & PHP login system not working

#2 oQMr FoxQo  Icon User is offline

  • D.I.C Head

Reputation: 16
  • View blog
  • Posts: 123
  • Joined: 16-August 09

Re: AJAX & PHP login system not working

Posted 27 November 2012 - 10:28 AM

I believe, what is happening is that your not firing the function to execute as soon as the data are received
what you should use is the
onreadystatechange()
to do that job this is a hint:

receiveData.onreadystatechange=function()
{
 console.log("In handleReceiveData()");
    if(receiveData.readyState == 4)
    {
        console.log("Response: " + receiveData.responseText);
        document.getElementById("status").innerHTML = receiveData.responseText;
    }}


This post has been edited by oQMr FoxQo: 27 November 2012 - 10:29 AM

Was This Post Helpful? 0
  • +
  • -

#3 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,236
  • Joined: 08-June 10

Re: AJAX & PHP login system not working

Posted 27 November 2012 - 10:33 AM

rule: event properties (.onclick, .onreadystatechange, etc.) expect function names to be given, not executing functions.
Was This Post Helpful? 0
  • +
  • -

#4 tim9009  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 73
  • Joined: 01-October 10

Re: AJAX & PHP login system not working

Posted 27 November 2012 - 10:37 AM

Hello

Thank you for the reply. I tried this but it did not seem to work. Now it won't go in to that function at all. This all worked perfectly fine in another AJAX project of mine (a AJAX chat application), but it does not work here. Any other suggestions?

Thank you!
-Tim

This post has been edited by tim9009: 27 November 2012 - 10:37 AM

Was This Post Helpful? 0
  • +
  • -

#5 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,236
  • Joined: 08-June 10

Re: AJAX & PHP login system not working

Posted 27 November 2012 - 10:39 AM

what does your code look like?
Was This Post Helpful? 0
  • +
  • -

#6 tim9009  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 73
  • Joined: 01-October 10

Re: AJAX & PHP login system not working

Posted 27 November 2012 - 10:43 AM

The code is in the first post of the topic. This is similar to the one I used in the chat application. The problem I have with the code is that I have to run the javascript code for POSTing to the php file twice before I get past the if statement at line 21.

[edit]
I also just figured out that the responseText is being loaded correctly when I only click the button once. Just checked it in chrome console. So it seems that the only problem is that it can't get past that line 21.

This post has been edited by tim9009: 27 November 2012 - 10:49 AM

Was This Post Helpful? 0
  • +
  • -

#7 oQMr FoxQo  Icon User is offline

  • D.I.C Head

Reputation: 16
  • View blog
  • Posts: 123
  • Joined: 16-August 09

Re: AJAX & PHP login system not working

Posted 27 November 2012 - 10:48 AM

View Posttim9009, on 27 November 2012 - 10:43 AM, said:

The code is in the first post of the topic. This is similar to the one I used in the chat application. The problem I have with the code is that I have to run the javascript code for POSTing to the php file twice before I get past the if statement at line 21.

could you please provide the rest of the code and the event firing the command

This post has been edited by oQMr FoxQo: 27 November 2012 - 10:49 AM

Was This Post Helpful? 0
  • +
  • -

#8 tim9009  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 73
  • Joined: 01-October 10

Re: AJAX & PHP login system not working

Posted 27 November 2012 - 10:55 AM

Ok, I don't really see how it is relevant. But here you go:

The HTML code:
<div class="login_window" id="login_window">
            
            <div class="login_top" id="login_top">
                
            </div>
            
            <form id="login_form" method="post" action="javascript:check_login();">
                <div class="login_username" id="login_username">
                    USERNAME:
                    <input type="text" id="login_username_input"/>
                </div>
                
                <div class="login_password" id="login_password">
                    PASSWORD:
                    <input type="password" id="login_password_input"/>
                </div>
                
                <div class="login_button" id="login_button">
                    <input type="submit" id="submit_login_button" value="ENTER"/>
                </div>
            </form>
            
            <input type="button" value="log out" onclick="destroySession();"/>
            
        </div>
        
        <div id="status">
            STATUS:
        </div>



The rest of the javascript code:
var receiveData = getXmlHttpRequestObject();

function getXmlHttpRequestObject()
{
    if(window.XMLHttpRequest)
    {
        return new XMLHttpRequest();
    }
    else
    if(window.ActiveXObject)
    {
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
    else
    {
        alert("Could not create XMLHttpRequest Object. Please refresh the page and try again. If you keep getting this error message please consider updating/upgrading your browser.");
    }
    
    return null;
}



And the php:
<?php
include 'connect.php';

try
{
    
if(!empty($_POST['username']) && !empty($_POST['password']))
{
    $query = $db->prepare("SELECT * FROM users WHERE username = :username AND password = :password;");
    $query->bindParam(":username", $_POST['username']);
    $query->bindParam(":password", $_POST['password']);
    
    $query->execute();
    $result = $query->fetch( PDO::FETCH_ASSOC );
    
    if($query->rowCount() == 1)
    {
        session_start();
        $_SESSION['logedin'] = 1;
        echo "Logged in!";
    }
    else
    {
        echo "Incorrect username or password.";
    }
}
else
{
    echo "Please enter username and password.";
}

}
catch (PDOException $e)
{
    die("Error! " . $e->getMessage());
}
?>



Thank you
-Tim

This post has been edited by tim9009: 27 November 2012 - 10:55 AM

Was This Post Helpful? 0
  • +
  • -

#9 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,236
  • Joined: 08-June 10

Re: AJAX & PHP login system not working

Posted 27 November 2012 - 11:01 AM

if the check_login() code is as above, you haven’t made the fixes we pointed out.
Was This Post Helpful? 0
  • +
  • -

#10 tim9009  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 73
  • Joined: 01-October 10

Re: AJAX & PHP login system not working

Posted 27 November 2012 - 11:07 AM

When you said that "event properties (.onclick, .onreadystatechange, etc.) expect function names to be given, not executing functions." Did you mean that I should change the code from receiveData.onreadystatechange = handleReceiveData(); to receiveData.onreadystatechange = handleReceiveData; ? Or did I missunderstand something? (if yes, then it is not working at all).

Thank you
-Tim

This post has been edited by tim9009: 27 November 2012 - 11:09 AM

Was This Post Helpful? 0
  • +
  • -

#11 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,236
  • Joined: 08-June 10

Re: AJAX & PHP login system not working

Posted 27 November 2012 - 11:10 AM

View Posttim9009, on 27 November 2012 - 07:07 PM, said:

[…] Did you mean that I should cahnge the code from receiveData.onreadystatechange = handleReceiveData(); to receiveData.onreadystatechange = handleReceiveData; ?

exactly. that would at least trigger handleReceiveData(), if the AJAX request were started.
Was This Post Helpful? 0
  • +
  • -

#12 tim9009  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 73
  • Joined: 01-October 10

Re: AJAX & PHP login system not working

Posted 27 November 2012 - 11:13 AM

The thing is that handleRecieveData IS being triggered in the initial code that I gave you. That is what I have been trying to explain. The issue is that it does not go past the if statement on line 21 before I run it a secound time even though I can access the returnText and get the correct result through console in chrome.

This post has been edited by tim9009: 27 November 2012 - 11:21 AM

Was This Post Helpful? 0
  • +
  • -

#13 oQMr FoxQo  Icon User is offline

  • D.I.C Head

Reputation: 16
  • View blog
  • Posts: 123
  • Joined: 16-August 09

Re: AJAX & PHP login system not working

Posted 27 November 2012 - 11:21 AM

try that and let me know if it worked
receiveData.onreadystatechange=function(){
{
    console.log("In check_login()");
    if(receiveData.readyState == 4 || receiveData.readyState == 0)
    {
        console.log("readystate passed");
        console.log("In handleReceiveData()");
   if(receiveData.readyState == 4)
    {
        console.log("Response: " + receiveData.responseText);
        document.getElementById("status").innerHTML = receiveData.responseText;
    }
        receiveData.open("POST", 'php/login.php', true);
        receiveData.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        
        var param = "username=" + document.getElementById("login_username_input").value;
        param += "&password=" + document.getElementById("login_password_input").value;
        console.log(param);
        receiveData.send(param);
    }}}


Was This Post Helpful? 0
  • +
  • -

#14 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,236
  • Joined: 08-June 10

Re: AJAX & PHP login system not working

Posted 27 November 2012 - 11:27 AM

View Posttim9009, on 27 November 2012 - 07:13 PM, said:

The thing is that handleRecieveData IS being triggered in the initial code that I gave you. That is what I have been trying to explain.

if you put () behind a function name you will execute the function no matter what. whether the function does what it should and at the right time is another matter.


View Posttim9009, on 27 November 2012 - 07:13 PM, said:

The issue is that it does not go past the if statement on line 21 before I run it a scound time

naturally, the default value of the XMLHttpRequest object’s readyState is not 4.


View Posttim9009, on 27 November 2012 - 07:13 PM, said:

before I run it a scound time eaven though I can access the returnText and get the correct result through console in chrome.

what you get is the result of the first AJAX request, not the one triggered by the second button press (that they do not differ just hides this fact).

in short, your problem is the execution time. you execute the handler function before you run the request, hence you have no result. and when you press the button a second time, you run the handler function again (before the request), but thanks to the global variable of the request, the data from the first request are still there and you can process them. and then you fire a second AJAX request, which you leave unprocessed.

This post has been edited by Dormilich: 27 November 2012 - 11:28 AM

Was This Post Helpful? 0
  • +
  • -

#15 tim9009  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 73
  • Joined: 01-October 10

Re: AJAX & PHP login system not working

Posted 27 November 2012 - 11:32 AM

View PostoQMr FoxQo, on 27 November 2012 - 06:21 PM, said:

try that and let me know if it worked
receiveData.onreadystatechange=function(){
{
    console.log("In check_login()");
    if(receiveData.readyState == 4 || receiveData.readyState == 0)
    {
        console.log("readystate passed");
        console.log("In handleReceiveData()");
   if(receiveData.readyState == 4)
    {
        console.log("Response: " + receiveData.responseText);
        document.getElementById("status").innerHTML = receiveData.responseText;
    }
        receiveData.open("POST", 'php/login.php', true);
        receiveData.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        
        var param = "username=" + document.getElementById("login_username_input").value;
        param += "&password=" + document.getElementById("login_password_input").value;
        console.log(param);
        receiveData.send(param);
    }}}



Tried it, but it did not work. Sorry
Was This Post Helpful? 0
  • +
  • -

  • (3 Pages)
  • +
  • 1
  • 2
  • 3