Reader Level:

SignIn Page in JavaScript

By Nitin Bhardwaj on Apr 04, 2013
In this article I explain how to create a login or signin page in JavaScript.

Note: This program will work only on Internet Explorer.

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.

First I have created a database EmpDetail then I created a table in this database. 

Query Code

CREATE TABLE [dbo].[LoginDetail](

      [Username] [varchar](50) NULL,

      [Passwrd] [varchar](50) NULL


Now insert some data into the LoginDetail table.

Complete Program



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">



    <script type="text/javascript">

        function LoginFn()


            var a = 0;

            var txtuname = document.getElementById('txtusername').value;

            var txtpwd = document.getElementById('txtpasswrd').value;


            if (txtuname.length != 0 && txtpwd.length != 0)


                var connection = new ActiveXObject("ADODB.Connection");

                var connectionstring = "Data Source=MCNDESKTOP20;Initial Catalog=EmpDetail;uid=sa;pwd=******;Provider=SQLOLEDB";


                var rs = new ActiveXObject("ADODB.Recordset");

                rs.Open("select * from LoginDetail where Username='" + txtuname + "' and Passwrd='" + txtpwd + "'", connection);

                while (!rs.eof)


                    alert("Welcome to "+txtuname+"\n you are successfully login");

                    a = 1;



                if (a == 0)


                    alert("Invalid UserName and Password");







                alert("Please Enter Values in TextBox ");



        function CancelFn()


            txtpasswrd.innerText = "";




    <style type="text/css">

        #main {

            height: 264px;






    <fieldset style="font-size: medium; color: #000000;">

        <legend style="background-color: Aqua; font-size: larger">Sign In Page</legend>

        <br />


        <input id="txtusername" type="text" /><br />

        <br />


            <input id="txtpasswrd" type="password"  /><br />

        <br />


            <input id="login" type="button" value="Login" onclick="LoginFn()" />&nbsp;&nbsp;&nbsp;&nbsp;

            <input id="cancel" type="button" value="Cancel" onclick="CancelFn()" />





Output 1

Enter Username and password:


Click on the "Login" button:


Output 2

If we click on the Login button without entering anything in the TextBox then:




Output 3

If we enter the wrong UserName or Password then:


Output 4

If you type the wrong UserName and Password and then click on the "Cancel" button:


After clicking on the Cancel button:


For more information, download the attached sample application.

Nitin Bhardwaj
Nitin Bhardwaj

Normal 0 false false false EN-US X-NONE X-NONE ... Read more