Thursday, July 15, 2010

Free Download : Login Form Jquery

at 2:20 AM Posted by admin 1 comments
Is it necessary to integrate an AJAX form modal Log in a box? This tutorial will show you how you can use the powerful jQuery library. The modal box, I have chosen is a jQuery plugin written by Eric Martin.


Html Script ::

Html Script

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Modal Ajax Login Form</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="javascript/jquery.simplemodal.js"></script>
<script type="text/javascript" src="javascript/init.js"></script>

<link type='text/css' href='style/stylesheet.css' rel='stylesheet' media='screen' />

<link type='text/css' href='style/basic.css' rel='stylesheet' media='screen' />

</head>

<body>

Click the login link to launch the modal box:<br />

<span >
<a id="login_link" href="#">LOGIN</a> | MEMBERS AREA</a>

</span>

<div id="login_form" style='display:none'>

<div id="status" align="left" style="margin-top: 20px; width: 310px;">

<center><h1><img src="images/key.png" align="absmiddle">&nbsp;LOGIN</h1>

<div id="login_response"><!-- spanner --></div> </center>

<form id="login" action="javascript:alert('success!');">
<input type="hidden" name="action" value="user_login">
<input type="hidden" name="module" value="login">

<label>E-Mail</label><input type="text" name="email"><br />
<label>Password</label><input type="password" name="password"><br />

<label>&nbsp;</label><input value="Login" name="Login" id="submit" class="big" type="submit" />

<div id="ajax_loading">
<img align="absmiddle" src="images/spinner.gif">&nbsp;Processing...
</div>

</form>

</div>

</div>

</body>
</html>

Later, the data sent by "do-login.php" using AJAX. If "OK" is returned then a confirmation message will be displayed to the user before redirecting to the website private. Notice how I used jQuery css (Name, value) to change the width and height of the box modes:

Jquery script ::

Jquery Scriptvar login_response = '<div id="logged_in">' +
'<div style="width: 350px; float: left; margin-left: 70px;">' +
'<div style="width: 40px; float: left;">' +
'<img style="margin: 10px 0px 10px 0px;" align="absmiddle" src="images/ajax-loader.gif">' +
'</div>' +
'<div style="margin: 10px 0px 0px 10px; float: right; width: 300px;">'+
"You are successfully logged in! <br /> Please wait while you're redirected...</div></div>";

$('a.modalCloseImg').hide();

$('#simplemodal-container').css("width","500px");
$('#simplemodal-container').css("height","120px");

$(this).html(login_response); // Refers to 'status'

// After 3 seconds redirect the
setTimeout('go_to_private_page()', 3000);

DEMO
- – - – - – - – - – - – - – - – -
E-Mail: demo@demo.com
Password: demo123

Demo : Live Demo

Source : Free Download


Posted under : ,

1 comment:

  1. AnonymousMay 7, 2013 at 6:20 AM

    The particular screen size silent black colored. Roast this the beef and bird for many Fifteen minutes.

    Where it actually is anxiety about the production of a moose cereal bar package it is supplied within both online and offline online
    stores. This could near comparative from conventional goodies microprocesseur biscuit
    meal including 1937 in the the game works with a combined clear and therefore blonde any, the sole real price is this
    that reduced block to drab dark chocolate played with as opposed to pre-made chocolate
    chips.

    Look into my web page ... Kristopher Norko

    ReplyDelete

Subscribe to: Post Comments (Atom)