Create an employee database in ms-access as follows
Write javascript code as follows
------------------------------------------
1) Add_form.html
----------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" >
function InsertRecord()
{
var txtid = document.getElementById('txtid').value;
var txtname = document.getElementById('txtname').value;
var txtsalary = document.getElementById('txtsalary').value;
var txtcity = document.getElementById('txtcity').value;
if (txtid.length != 0 || txtname.length !=0 || txtsalary.length !=0|| txtcity.length !=0)
{
var connection = new ActiveXObject("ADODB.Connection");
var connectionstring = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source =D:/JAVASCRIPTDB/EmpDetail.mdb;Persist Security Info=False";
connection.Open(connectionstring);
var rs = new ActiveXObject("ADODB.Recordset");
rs.Open("insert into Emp_Info values('" + txtid + "','" + txtname + "','" + txtsalary + "','" + txtcity + "')", connection);
alert("Insert Record Successfuly");
txtid.value = " ";
connection.close();
}
else
{
alert("Please Enter Employee \n Id \n Name \n Salary \n City ");
}
}
</script>
<style type="text/css">
#main
{
height: 264px;
}
#ShowRecord
{
width: 67px;
z-index: 1;
left: 20px;
top: 257px;
position: absolute;
}
#showall
{
z-index: 1;
left: 114px;
top: 257px;
position: absolute;
}
</style>
</head>
<body style="height: 431px">
<div id="show"
style="font-size: x-large; font-weight: bold; height: 298px; color: #009999;">
Insert Employee Record<p style="font-size: medium; color: #000000;">
Employee Id
<input id="txtid" type="text" /></p>
<p style="font-size: medium; color: #000000;">
Name
<input id="txtname" type="text" /></p>
<p style="font-size: medium; color: #000000;">
Salary
<input id="txtsalary" type="text" /></p>
<p style="font-size: medium; color: #000000;">
City
<input id="txtcity" type="text" /></p>
<input id="ShowRecord" type="button" value="Insert" onclick="InsertRecord()" />
</body>
</html>
----------------------------------------------------------------------------------------
2.show_detals_form.html
----------------------------------------------------------------------------------------
<html>
<center>
<h2 style="font-family:algerian; color:#A06D3F">Want to See the daetails!! </h2>
<head>
<title>Entitled Document</title>
<script language="JavaScript">
function getdetails()
{
i=1;
var cn = new ActiveXObject("ADODB.Connection");
var strConn = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source = D:/JAVASCRIPTDB/EmpDetail.mdb;Persist Security Info=False";
cn.Open(strConn);
var rs = new ActiveXObject("ADODB.Recordset");
var SQL = "select * from Emp_Info";
rs.Open(SQL, cn);
rs.MoveFirst
while(!rs.eof)
{
document.write( "<h5> "+i,rs('txtid')+" ",rs('txtname')+" ",rs('txtsalary')+" ",rs('txtcity')+"</h5>");
rs.movenext;
i=i+1;
}
rs.Close();
cn.Close();
}
</script>
</head>
<body bgcolor="#FFFFFF">
<input type="button" value="Click here" onclick="getdetails()">
</body>
</html>
---------------------------------------------------------------------------
3. display_record.html
---------------------------------------------------------------------------
<html>
<head>
<title>Entitled Document</title>
<script language="JavaScript">
function getSubmit()
{
i=1;
var cn = new ActiveXObject("ADODB.Connection");
var strConn = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source = D:/JAVASCRIPTDB/EmpDetail.mdb;Persist Security Info=False";
cn.Open(strConn);
var rs = new ActiveXObject("ADODB.Recordset");
var SQL = "select * from Emp_Info";
rs.Open(SQL, cn);
rs.MoveFirst
while(!rs.eof)
{
txtid.value = rs(0);
txtname.value = rs(1);
txtsalary.value = rs(2);
txtcity.value =rs(3);
rs.movenext;
i=i+1;
}
rs.Close();
cn.Close();
}
</script>
<h4>EMPLOYEE DETAILS</H4>
</head>
<body>
Employee ID: <input type="text" name="txtid" /> </br> </br>
Name: <input type="text" name="txtname" /> </br> </br>
Salary: <input type="text" name="txtsalary" /> </br> </br>
City: <input type="text" name="txtcity" /> </br> </br>
<input type="button" value="submit" onclick="getSubmit()">
</body>
</html>
----------------------------------------------------------------------------------
open with internet explorer and enable popups in the browser.
output:
Download zip file
