sateesh.bagadhi: Javascript and MS-Access data connectivity(insert and display records)

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

sateesh.bagadhi

Thursday 30 March 2017

Javascript and MS-Access data connectivity(insert and display records)

No comments:

Post a Comment

Oracle Reserved Words