Creating Ajax Login Form

What Is Ajax Login Form

enable to make easy and fast progress log-in form to verification username and password without refresh page to check valid account and lets to redirect to user page!

Run Tested in IE6, FF3, Opera9 and i think should be worked in other modern browsers as well
easy to used with any method login verification
Automattic redirection could be done within the javascript config
Verification account without refresh page
Message Error login

How To Crating Ajax Login Form
First, let’s start to creating the login form page. I will explain you the code this code will be check login action so you can change the verification method using database mysql or something like that.

this php code to check verification username and password write in ouf.php file name :

$action=trim($HTTP_GET_VARS['action']);
switch($action):
case ‘login’:
$good_email="zmoerf@ajax-tutorial.net";
$good_pass="ajax";
$sub = trim($_POST['sub']);
$email = trim($_POST['email']);
$password =trim($_POST['password']);
$sep=’,';
sleep(2); # simulating
$msg="Email and password do not match";
if ( $password == $good_pass ){
# REGISTER SESSION HERE
print ’success,welcome.html,lolllll’;
}
else{
print ‘error’.$sep.$msg;
}
// print ’success,index.php’;
break;
default:
print ‘error,going somewhere ?’;
endswitch;
#check if the mail is valid
function fun_isemail($strng){
return preg_match(’/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/i’,$strng);
}

and after you crated verificatioin code now you can write html code to make login form but you must call javascript ajax to progress verification without refresh.

this code to call javascript ajax put on header in login.html file:

<script type="text/javascript" src="js/_ajax.new.js?<?=rand()?>"></script>
<script type="text/javascript" src="js/_formdata2querystring.js"></script>
<script type="text/javascript" src="js/_applogin.js?<?=rand()?>"></script>
<link rel="stylesheet" href="css/style.css?<?=rand()?>" type="text/css">

this html code make login form put div id="logindiv" betwen form in login.html file :

<div id="logindiv">
<form id="loginForm" method="POST" action="index.php">
<div id="promptDiv" class="basePrompt">
<span id="msg1"></span>
<span id="msg2"></span>
</div>
<div class="fieldTitle">Email:</div>
<div class="fieldEntry">
<input id="email" name="email" type="text" value="" alt="Email should be email@gospam.biz" title="Email should be email@gospam.biz">
</div>
<div class="fieldTitle">Password:</div>
<div class="fieldEntry">
<input id="password" name="password" type="password" value="" alt="Password should be iwannalogin" title="Password should be iwannalogin">
</div>
<div id="buttonDiv">
<input type="submit" id="submitButton" name="submitButton" value="Submit"/>
</div>
<small>
<u>Hint:</u><br />
Ajax Login Demo
</small>
</form>
</div>