Click here to Skip to main content
15,880,651 members
Articles / Password
Article

HTML login page using JQuery

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
11 Oct 2013CPOL 12.4K   2  
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"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br />    <title>Html login page</title><br />    <script language="javascript" type="text/javascript" src="jquery.js"></script><br />    <script language="javascript" type="text/javascript"><br />        function login() {
var uid = $("#uid").value;
var pwd = $("#pwd").value;<br />      //var uid = document.getElementById('uid').value;<br />     //var pwd = document.getElementById('pwd').value;<br />      $('#resultspan').load('ajaxLogin.aspx?uid='+uid+'&pwd='+pwd);<br />    }<br />    </script><br /></head><br /><body><br /><table width="65%" cellpadding="2" cellspacing="2"><br /><tr><br /> <td colspan="2"><span id="resultspan"></span></td><br /></tr><br /><tr><br /> <td width="25%">User Id:</td><td><input type="text" id="uid" /></td><br /></tr><br /><tr><br /> <td width="25%">Password:</td><td><input type="password" id="pwd" /></td><br /></tr><br /><tr><br /> <td colspan="2" align="center"><input type="button" value="Login" onclick="login();" /></td><br /></tr><br /></table><br /></body><br /></html><br />
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<br />{<br />    protected void Page_Load(object sender, EventArgs e)<br />    {<br />        if (Request.QueryString["uid"] != null && Request.QueryString["uid"] != null)<br />        {<br />            if (Request.QueryString["uid"].ToString() == "test" && Request.QueryString["pwd"].ToString() == "test")<br />                Response.Write("Login successful");<br />            else<br />                Response.Write("Login failure");<br />        }<br />    }<br />}

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
United States United States
The ASP.NET Wiki was started by Scott Hanselman in February of 2008. The idea is that folks spend a lot of time trolling the blogs, googlinglive-searching for answers to common "How To" questions. There's piles of fantastic community-created and MSFT-created content out there, but if it's not found by a search engine and the right combination of keywords, it's often lost.

The ASP.NET Wiki articles moved to CodeProject in October 2013 and will live on, loved, protected and updated by the community.
This is a Collaborative Group

755 members

Comments and Discussions

 
-- There are no messages in this forum --