Post
Ask Question

SignIn Page in JavaScript

Introduction

 
In this article, I will explain the best way to implement a simple login form to check account information details of a user within a database. If the user details exist in the database then we should instead redirect the user to a Welcome page otherwise we should instead display "Invalid Username/Password". This is very common for all websites before allowing access to it.
 
Note: This program will work only on Internet Explorer.
 
First I have created a database EmpDetail then I created a table in this database. 
 
Query Code
  1. CREATE TABLE [dbo].[LoginDetail](  
  2.       [Username] [varchar](50) NULL,  
  3.       [Passwrd] [varchar](50) NULL  
  4. ) ON [PRIMARY] 
Now insert some data into the LoginDetail table.
 
Complete Program
 
SignIn_Page_in_javascript.htm
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title></title>  
  5.     <script type="text/javascript">  
  6.         function LoginFn()  
  7.         {  
  8.             var a = 0;  
  9.             var txtuname = document.getElementById('txtusername').value;  
  10.             var txtpwd = document.getElementById('txtpasswrd').value;  
  11.    
  12.             if (txtuname.length != 0 && txtpwd.length != 0)  
  13.             {  
  14.                 var connection = new ActiveXObject("ADODB.Connection");  
  15.                 var connectionstring = "Data Source=MCNDESKTOP20;Initial Catalog=EmpDetail;uid=sa;pwd=******;Provider=SQLOLEDB";  
  16.                 connection.Open(connectionstring);  
  17.                 var rs = new ActiveXObject("ADODB.Recordset");  
  18.                 rs.Open("select * from LoginDetail where Username='" + txtuname + "' and Passwrd='" + txtpwd + "'", connection);  
  19.                 while (!rs.eof)  
  20.                 {  
  21.                     alert("Welcome to "+txtuname+"\n you are successfully login");  
  22.                     a = 1;  
  23.                     rs.MoveNext();  
  24.                 }  
  25.                 if (a == 0)  
  26.                 {  
  27.                     alert("Invalid UserName and Password");  
  28.                 }  
  29.                 rs.close();  
  30.                 connection.close();  
  31.             }  
  32.             else  
  33.             {  
  34.                 alert("Please Enter Values in TextBox ");  
  35.             }  
  36.         }  
  37.         function CancelFn()  
  38.         {  
  39.             txtpasswrd.innerText = "";  
  40.             txtusername.innerText="";  
  41.         }  
  42.     </script>  
  43.     <style type="text/css">  
  44.         #main {  
  45.             height: 264px;  
  46.         }  
  47.     </style>  
  48. </head>  
  49. <body>  
  50.    
  51.     <fieldset style="font-size: medium; color: #000000;">  
  52.         <legend style="background-color: Aqua; font-size: larger">Sign In Page</legend>  
  53.         <br />  
  54.         <b>UserName</b>  
  55.         <input id="txtusername" type="text" /><br />  
  56.         <br />  
  57.         <b>Password</b>    
  58.             <input id="txtpasswrd" type="password"  /><br />  
  59.         <br />  
  60.                
  61.             <input id="login" type="button" value="Login" onclick="LoginFn()" />      
  62.             <input id="cancel" type="button" value="Cancel" onclick="CancelFn()" />  
  63.     </fieldset>  
  64. </body>  
  65. </html> 
Output 1
 
Enter Username and password:
 
enter-uname-pwd.jpg
 
Click on the "Login" button: 
 
success-msg.jpg
 
Output 2
 
If we click on the Login button without entering anything in the TextBox then:
 
blank-click.jpg
 
error-enter-username-pwd.jpg
 
Output 3
 
If we enter the wrong UserName or Password then:
 
invalid-msg.jpg
 
Output 4
 
If you type the wrong UserName and Password and then click on the "Cancel" button:
 
cancel-click.jpg
 
After clicking on the Cancel button:
 
cancel-result.jpg
 
For more information, download the attached sample application.


Similar Articles