Login form: enable disabled login button when username/password have values

[Bob Smith]

I have to come up with a user authenication page the logs the user in and also gives them access to do the right things. without using server side scripting. Just javacript and access. I have attached the code and the access file and have got started on a few things.
I first need to create a login page with the fields username and password have that check the access database and then proceed it to a page to do the following depending on the user access. For The Login button to even be enabled the username and password must have a value in it; I have no idea how to do that

Add A User [No duplicate Users]
Modify A User
- Admin can change anyone
- Power User can change only themselves
and everyone else except admin
- regular user can only change themselves
Delete A User
-Admin can delete anyone
Password Length [9-20 Characters]
Display The current person logged in person's info
Display all users

Groups:
Administrative - Has the ability to change everything
Power - Can change/modify everyone's informantion EXCEPT administrative group people
Regular - Can modify themselves only.

Only administrator and power user should be able to add a user

Only admin can delete users

Again it's supposed to connect with Access database and need to use javascript. I attached the file and code.Access 2007 File Thanks =).

HTML Page

<html>
<head>
    <title>JavaScript Example 2</title>
    <script type="text/javascript" src="JScriptDB.js">

    </script>
</head>
<body>

<form name="student" method="get" action="" onSubmit="return false;">

<p>Enter student's first name: <input type="text" name="studentfn" /><br />
  Enter student's last name: <input type="text" name="studentln" /><br />
  Enter student's ID: <input type="text" name="studentid" /><br />
  User Name:  <input type="text" name="usr1" id="usr1" /><br/>
Password*: <input type="password" name="pswd1" id="pswd1" /><br /> 
Date Of Birhth:  <input type="text" name="dob1" id="dob1" /><br/>
 </p>
<p>
  <input type="button" id="Display" onClick="Display()" value="Display All Records" />
    <input type="button" id="Update" onClick="updateStudent()" value="Update Student" />
      <input type="button" id="Delete" onClick="deleteStudent()" value="Delete Record" />
        <input type="button" id="Insert" onClick="insertStudent()" value="Insert Record" />
          <input type="button" id="Display" onClick="DisplayUser()" value="Display User Record" />
</p>

</form>

</body>
</html>

Javascript

//declare variables

var adOpenDynamic =2;
var adLockOptimistic =3;
var strDB_Path = "C:\Temp\\cst2309.accdb"; //MS access db path
var conn_str = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source=" + strDB_Path; // MS 2007 Provider String

var conn_str11 = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + strDB_Path; // MS 2003 Provider String


function AdoDB(strADO)
{
    if(window.ActiveXObject)
    {
        return new ActiveXObject(strADO);
    }
    else
    {
        return ActiveXObject(strADO);
    }
}

function DisplayUser()
{
    var conn = AdoDB("ADODB.Connection");
    var strSQL = "Select * from Student where usr ='"+ usr1 + "' and pswd = '"+ pswd1 +"'";
    
    conn.open(conn_str,"",""); //open my db connection
    
    // declare my dataset
    var dsStudent = new ActiveXObject("ADODB.Recordset");
    
    dsStudent.open(strSQL, conn, adOpenDynamic, adLockOptimistic);
    
    var strHTML ="";
    strHTML ="<table cellpadding=0 cellspacing=0 border=1 width='100%' align=center>";
    strHTML +="<tr><td align=center colspan=4><b>Student Records</b></td></tr>";
    
    if(!dsStudent.bof)
    {
        dsStudent.MoveFirst();
        while(!dsStudent.eof)
        {
            strHTML += "<tr>";
            strHTML += "<td><Font face='tahoma'>" + dsStudent.fields(0) +"</font></td>";
            strHTML += "<td><Font face='tahoma'>" + dsStudent.fields(1) +"</font></td>";
            strHTML += "<td><Font face='tahoma'>" + dsStudent.fields(2) +"</font></td>";
            strHTML += "<td><Font face='tahoma'>" + dsStudent.fields(3) +"</font></td>";
            strHTML += "<td><Font face='tahoma'>" + dsStudent.fields(4) +"</font></td>";
            strHTML += "<td><Font face='tahoma'>" + dsStudent.fields(5) +"</font></td>";
            strHTML += "<td><Font face='tahoma'>" + dsStudent.fields(6) +"</font></td>";
            strHTML += "</tr>";
            dsStudent.MoveNext();
        }//close while
    }// close if statement
    else
    {
        strHTML += "<tr colspan=4><td align=center><font color=red>No Records :(</font></td></tr>";
    }//close else
    strHTML = "</table>";
    document.write(strHTML);
}// close Display

function Display()
{
    var conn = AdoDB("ADODB.Connection");
    var strSQL = "Select * from Student";
    
    conn.open(conn_str,"",""); //open my db connection
    
    // declare my dataset
    var dsStudent = new ActiveXObject("ADODB.Recordset");
    
    dsStudent.open(strSQL, conn, adOpenDynamic, adLockOptimistic);
    
    var strHTML ="";
    strHTML ="<table cellpadding=0 cellspacing=0 border=1 width='100%' align=center>";
    strHTML +="<tr><td align=center colspan=4><b>Student Records</b></td></tr>";
    
    if(!dsStudent.bof)
    {
        dsStudent.MoveFirst();
        while(!dsStudent.eof)
        {
            strHTML += "<tr>";
            strHTML += "<td><Font face='tahoma'>" + dsStudent.fields(0) +"</font></td>";
            strHTML += "<td><Font face='tahoma'>" + dsStudent.fields(1) +"</font></td>";
            strHTML += "<td><Font face='tahoma'>" + dsStudent.fields(2) +"</font></td>";
            strHTML += "<td><Font face='tahoma'>" + dsStudent.fields(3) +"</font></td>";
            strHTML += "<td><Font face='tahoma'>" + dsStudent.fields(4) +"</font></td>";
            strHTML += "<td><Font face='tahoma'>" + dsStudent.fields(5) +"</font></td>";
            strHTML += "<td><Font face='tahoma'>" + dsStudent.fields(6) +"</font></td>";
            strHTML += "</tr>";
            dsStudent.MoveNext();
        }//close while
    }// close if statement
    else
    {
        strHTML += "<tr colspan=4><td align=center><font color=red>No Records :(</font></td></tr>";
    }//close else
    strHTML = "</table>";
    document.write(strHTML);
}// close Display


function updateStudent() {
    var fn = document.getElementById("studentfn").value;
    var ln = document.getElementById("studentln").value;
    var studid = document.getElementById("studentid").value;

    var strSQL = "update Student set fname = '" + fn + "' ,lname ='" + ln + "' where studentid =" + studid;
    alert("SQL statement: " + strSQL);
    
    var conn = AdoDB("ADODB.Connection");
  
    conn.open(conn_str,"",""); //open my db connection
    
    // declare my dataset
    var dsStudent = new ActiveXObject("ADODB.Recordset");
    
    dsStudent.open(strSQL, conn, adOpenDynamic, adLockOptimistic);

    alert("updated completed");
}// close updateStudent

function deleteStudent()
{
//    var fn = document.getElementById("studentfn").value;
//    var ln = document.getElementById("studentln").value;
    var studid = document.getElementById("studentid").value;

    var strSQL = "delete Student where studentid =" + studid;
    alert("SQL statement: " + strSQL);

    var conn = AdoDB("ADODB.Connection");

    conn.open(conn_str, "", ""); //open my db connection

    // declare my dataset
    var dsStudent = new ActiveXObject("ADODB.Recordset");

    dsStudent.open(strSQL, conn, adOpenDynamic, adLockOptimistic);

    alert("deleted completed");

}// close deleteStudent

function insertStudent()
{
    var fn = document.getElementById("studentfn").value;
    var ln = document.getElementById("studentln").value;
    var studid = document.getElementById("studentid").value;
	var dobv = document.getElementById("dob1").value;

    var strSQL = "insert into Student(fname, lname,dob) values('" + fn + "','" + ln + "','" + dobv +"')";
    alert("SQL statement: " + strSQL);

    var conn = AdoDB("ADODB.Connection");

    conn.open(conn_str, "", ""); //open my db connection

    // declare my dataset
    var dsStudent = new ActiveXObject("ADODB.Recordset");

    dsStudent.open(strSQL, conn, adOpenDynamic, adLockOptimistic);

    alert("insert completed");
}// close insertStudent

function LoginPerson()
{

var conn = AdoDB("ADODB.Connection");
var strSQL = "Select * from Student where usr ='"+ usr1 + "' and pswd = '"+ pswd1 +"'";
    
    conn.open(conn_str,"",""); //open my db connection
    
    // declare my dataset
    var dsStudent = new ActiveXObject("ADODB.Recordset");
    
    dsStudent.open(strSQL, conn, adOpenDynamic, adLockOptimistic);
    
	alert("Logging In");

 var strHTML ="";
    strHTML ="<table cellpadding=0 cellspacing=0 border=1 width='100%' align=center>";
    strHTML +="<tr><td align=center colspan=4><b>Student Records</b></td></tr>";
    
    if(!dsStudent.bof)
    {
        dsStudent.MoveFirst();
        while(!dsStudent.eof)
        {
            strHTML += "<tr>";
            strHTML += "<td><Font face='tahoma'>" + dsStudent.fields(0) +"</font></td>";
            strHTML += "<td><Font face='tahoma'>" + dsStudent.fields(1) +"</font></td>";
            strHTML += "<td><Font face='tahoma'>" + dsStudent.fields(2) +"</font></td>";
            strHTML += "<td><Font face='tahoma'>" + dsStudent.fields(3) +"</font></td>";
            strHTML += "<td><Font face='tahoma'>" + dsStudent.fields(4) +"</font></td>";
            strHTML += "<td><Font face='tahoma'>" + dsStudent.fields(5) +"</font></td>";
            strHTML += "<td><Font face='tahoma'>" + dsStudent.fields(6) +"</font></td>";
            strHTML += "</tr>";
            dsStudent.MoveNext();
        }//close while
    }// close if statement
    else
    {
        strHTML += "<tr colspan=4><td align=center><font color=red>No Records :(</font></td></tr>";
    }//close else
    strHTML = "</table>";
    document.write(strHTML);
}// close Login

[acoder]

Keep your login button disabled:

<input type="button" ... disabled="disabled">

Then you need some event to trigger the change. One event is the onchange event on the username and password text boxes, e.g.

<input type="text" name="username" ... onchange="enableButton()">

where the function would enable the button if both the text boxes had values in them. To enable a button, set the disabled property to false:

btn.disabled = false;

[Bharat383]

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Login form </title>
<script type="text/javascript">
	function display_submit()
	{
			if((document.getElementById("uname").value != "") && (document.getElementById("pwd").value != ""))
			{
				document.getElementById("submit_button").disabled = false;
			}
			else
			{
				document.getElementById("submit_button").disabled = true;
			}
	}
</script>
</head>
<body>
<form name="form1">
	<table width="300" cellspacing="10">
		<tr>
				<th>Username</th>
				<td>
						<input type="text" name="uname" value="" id="uname" onblur="display_submit()"/>
				</td>
		</tr>
		<tr>
				<th>Password</th>
				<td>
					<input type="password" name="password" value="" id="pwd"  onblur="display_submit()"/>
				</td>
		</tr>
		<tr>
				<td colspan="2" align="center">
						<input type="submit" name="submit_button" id="submit_button" value="LOG IN" disabled="disabled"/>
				</td>
		</tr>
	</table>
</form>
</body>
</html>

[acoder]

onchange (triggered on a change) makes more sense that onblur.