HTML login page using JQuery

 Rate It (1)

Here is the login form it has user id and password text boxes. When user clicks Login button, it calls ajaxLogin.aspx page in background process using JQuery and it returns login success or failure message and prints in one span element.

Example uses jquery.js file. You can download that file from here.

File: Login.html

<!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">
<head>
<title>Html login page</title>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript">
function login() {
var uid = document.getElementById('uid').value;
var pwd = document.getElementById('pwd').value;
$('#resultspan').load('ajaxLogin.aspx?uid='+uid+'&pwd='+pwd);
}
</script>
</head>
<body>
<table width="65%" cellpadding="2" cellspacing="2">
<tr>
<td colspan="2"><span id="resultspan"></span></td>
</tr>
<tr>
<td width="25%">User Id:</td><td><input type="text" id="uid" /></td>
</tr>
<tr>
<td width="25%">Password:</td><td><input type="password" id="pwd" /></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" value="Login" onclick="login();" /></td>
</tr>
</table>
</body>
</html>
Here it checks that if user id is “test” and password is “test” then it does return successful login, here you can call your database and to find the login result.

File:  ajaxLogin.aspx.cs

public partial class ajaxLogin : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["uid"] != null && Request.QueryString["uid"] != null)
{
if (Request.QueryString["uid"].ToString() == "test" && Request.QueryString["pwd"].ToString() == "test")
Response.Write("Login successful");
else
Response.Write("Login failure");
}
}
}

Revision number 1, Thursday, November 13, 2008 10:56:41 PM by sanketce

Comments

It's an unsecured way to log in, you need to encrypt the login information when sending them away to login page.

Well said, we have to encrypt it before sending login info away from the login page, but here i just tried to demo the html page with jquery integration.

I cant make it work...

that's definitly of help

But I am thinking how much it would be secure to encrypt log-in information in client side w/o using SSL Certificate or any other well-known security layers. Isn't there any other way to send them as post instead of get with encrypting it for sure...

how to create a login page and stored in to sqlserver 2005 in asp.net

Not a good...Encrypt the login info!

Related Articles

Javascript

JavaScript holds it all together on the client side. There are a number of extensions that have been made to improve and expand base JavaScript object functionality. Blog Posts Four ASP.NET AJAX JavaScript UI Methods You Should Learn: Dave Ward describes more

ASP.NET Open Source Projects

Links to ASP.NET Open Source Projects Blogs dasBlog BlogEngine.NET SubText- A blogging engine in ASP.NET Owlpal - WebContent System AtomSite (formerly BlogSvc) -Built using ASP.NET MVC. Oxite - Built using ASP.NET MVC. Content Management Systems DotNetNuke

ASP.NET MVC Framework

Overview MVC (Model-View-Controller) now comes to ASP.NET too. As Scott Gu says "If you are looking to build your web applications using a MVC approach, I think you'll find this new ASP.NET MVC Framework option very clean and easy to use. It will

Shortcuts

Table of Contents

Top Wiki Contributors

(last 30 days)

  1. mbanavige (14)
  2. codehard (3)
  3. Dungimon (1)
  4. cabhilash (1)
Microsoft Communities