(untagged)

HTML login page using JQuery

ASP.NET Community

0.00/5 (No votes)

17 Apr 2010

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

This articles was originally at wiki.asp.net but has now been given a new home on CodeProject. Editing rights for this article has been set at Bronze or above, so please go in and edit and update this article to keep it fresh and relevant.

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 = $("#uid").value;

var pwd = $("#pwd").value;
      //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");
        }
    }
}

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here