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



Spire.Doc - Free .NET Word API
Use Spire.Doc to create, read, write, print, and convert word documents to OpenXML, RTF, TXT, XPS, EPUB, EMF, HTML, Image and PDF.
Infragistics jQuery Controls

Trending up