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;
  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>
  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 />
  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.