Ajax Login Form

McBryver · July 25, 2010

Hello all,

I have a problem with my script it works up to the point of not returning the right image for input verification.

If you can find any problems or help me out with the structure of the code that would be nice.

<?php
include("connect_db.php");
/**
* @author ULC!
* @copyright 2010
*/



?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Brian T. Flores" />

<title>Login - Loading Ajax</title>


<script type="text/javascript">
function usercheckFunction(){
var ajaxRequest;  // The variable that makes Ajax possible!
   
try{
	// Opera 8.0+, Firefox, Safari
	ajaxRequest = new XMLHttpRequest();
} catch (e){
	// Internet Explorer Browsers
	try{
		ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try{
			ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e){
			// Something went wrong
			alert("Your browser broke!");
			return false;
		}
	}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
	if(ajaxRequest.readyState == 4){

    var returi = ajaxRequest.responseText;
                
    if(returi="continue"){
        
    setTimeout("getUser()", 3000);
    
    }
    
    if(returi="usererror"){
        
     setTimeout("getUserError()", 3000);
     
    }
	}
}
    var username = document.getElementById("username").value;
var queryString = "?username=" + username;
    
ajaxRequest.open("GET", "login_secure.php" + queryString, true);
ajaxRequest.send(null); 
}
function passcheckFunction(pass){
var ajaxRequest;  // The variable that makes Ajax possible!
   
try{
	// Opera 8.0+, Firefox, Safari
	ajaxRequest = new XMLHttpRequest();
} catch (e){
	// Internet Explorer Browsers
	try{
		ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try{
			ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e){
			// Something went wrong
			alert("Your browser broke!");
			return false;
		}
	}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
	if(ajaxRequest.readyState == 4){
		var returi = ajaxRequest.responseText;
            
if(returi = "continue"){
        
    setTimeout("getPass()", 4000);   
        
    }
    
if(returi = "passerror"){
    
     setTimeout("getPassError()", 4000);
     
    }
	}
}
    var password = document.getElementById("password").value;
var queryString = "?password=" + password;
    
ajaxRequest.open("GET", "login_secure.php" + queryString, true);
ajaxRequest.send(null); 
}
function bothcheckFunction(){
var ajaxRequest;  // The variable that makes Ajax possible!

try{
	// Opera 8.0+, Firefox, Safari
	ajaxRequest = new XMLHttpRequest();
} catch (e){
	// Internet Explorer Browsers
	try{
		ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try{
			ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e){
			// Something went wrong
			alert("Your browser broke!");
			return false;
		}
	}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
	if(ajaxRequest.readyState == 4){
		var bothcheck = ajaxRequest.responseText;
  if(bothcheck == "continue"){
    setTimeout("getError()", 5000);
  }else{
    setTimeout("getErrorE()", 5000);
  }
	}
}

var queryString = "?both=1";
ajaxRequest.open("GET", "login_secure.php" + queryString, true);
ajaxRequest.send(null); 
}
function login(){
   

document.getElementById("user_loading").innerHTML = "<img width='50' height='50' src='loading.gif'>";  
document.getElementById("pass_loading").innerHTML = "<img width='50' height='50' src='loading.gif'>";

usercheckFunction();
passcheckFunction(); 
bothcheckFunction();


}

function getUser(){
       document.getElementById("user_loading").innerHTML = "<img width='50' height='50' src='check.jpg'>"; 
}  
function getUserError(){
       document.getElementById("user_loading").innerHTML = "<img width='50' height='50' src='ex.jpg'>";  
}   
function getPass(){
       document.getElementById("pass_loading").innerHTML = "<img width='50' height='50' src='check.jpg'>"; 
} 
function getPassError(){
       document.getElementById("pass_loading").innerHTML = "<img width='50' height='50' src='ex.jpg'>"; 
} 
function redirect(){
    window.location="index.php";

    
}
function getError(){
       document.getElementById("error_loading").innerHTML = "<font color='red'>You will be directed in 5 seconds...</font>"; 
       setTimeout("redirect()", 5000);
} 
function getErrorE(){
       document.getElementById("error_loading").innerHTML = "<font color='red'>Your Account Information was Incorrect...</font>"; 
       
} 
</script>
</head>

<body>

<div id="container">

<div id="no">You must have Javascript Activated to View this site.<br /><a style="cursor: pointer;" onclick="hidenoajax();">If you have Javascript Enabled Click Here</a></div>
<div id="login" style="display: none;">
<div id="error_loading"></div>
<div class="username">Username: <input type="text" name="username" id="username" /></div>
<div id="user_loading"></div>
<div class="password">Password: <input type="password" name="password" id="password" /></div>
<div id="pass_loading"></div>
<div class="submit"><img src="login.gif" style="cursor: pointer;" onclick="login();"></div>
</div>

</div>
    <script type="text/javascript">
hidenoajax();
function hidenoajax(){
document.getElementById("no").style.display = "none";
document.getElementById("login").style.display = "block";
}
</script>

</body>
</html>

Here is the login_secure.PHP file,

<?php
include("connect_db.php");
/**
* @author Brian T. Flores
* @copyright 2010
*/

if(isset($_GET['username'])){
    
    $user = mysql_real_escape_string($_GET['username']);
    $_SESSION['login_username'] = $user;
    
    $sql = "SELECT * FROM `accounts` WHERE `username` = '$user'";
    $res = mysql_query($sql);
    
    if(isset($res)){
        die("continue");
    }else{
        die('usererror');
    }
        
    

}

if(isset($_GET['password'])){
    $user = $_SESSION['login_username'];
    $pass = mysql_real_escape_string(md5($_GET['password']));
    $_SESSION['login_password'] = $_GET['password'];
    
    $sql = "SELECT * FROM `accounts` WHERE `username` = '$user' AND `password` = '$pass'";
    
    $res = mysql_query($sql);
    
    if(isset($res)){
        die("continue");
    }else{
        die('passerror');
    }
        
    

}
if(isset($_GET['both'])){
    
    if($_SESSION['both']==1){
        
        die("continue");
        
    }else{
        die("error");
    }
}


?>

Any help would be great thank you.

McBryver.

Sign In

Ajax Login Form

Recommended Posts

McBryver

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information