Thursday, April 25, 2013

How Update Record in Database Using Textbox in JavaScript



Note: This program will work only with Internet Explorer.

In this article I will explain how to update a record from database using textbox in JavaScript.

Firstly I am created a database EmpDetail. and Now I am created a table in this database. 

Query Code

CREATE TABLE [dbo].[EmpSalary_Info](
      [id] [int] NULL,
      [name] [varchar](50) NULL,
      [salary] [int] NULL
) ON [PRIMARY]
Now Insert some Data in EmpSalary_Info table. Then use the following procedure.
Complete Program
Update_Record.htm

<!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 ShowAll()
        {
            var connection = new ActiveXObject("ADODB.Connection");
            var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=password@123;Provider=SQLOLEDB";
            connection.Open(connectionstring);
            var rs = new ActiveXObject("ADODB.Recordset");
            rs.Open("select * from EmpSalary_Info ", connection);
            rs.MoveFirst();
            var span = document.createElement("span");
            span.style.color = "Blue";
            span.innerText = "  ID " + "  Name " + "   Salary";
            document.body.appendChild(span);
            while (!rs.eof) {
                var span = document.createElement("span");
                span.style.color = "green";
                span.innerText = "\n " + rs.fields(0) + " |  " + rs.fields(1) + " |  " + rs.fields(2);
                document.body.appendChild(span);
                rs.MoveNext();
            }
            rs.close();
            connection.close();
        }
 
        function UpdateRecord()
        {  
            var txtid = document.getElementById('txtid').value;
            var txtname = document.getElementById('txtname').value;
            if (txtid.length != 0 && txtname.length!=0) {
                var connection = new ActiveXObject("ADODB.Connection");
                var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=password@123;Provider=SQLOLEDB";
                connection.Open(connectionstring);
                var rs = new ActiveXObject("ADODB.Recordset");
                rs.Open("update EmpSalary_Info set EmpName = '" + txtname + "' where EmpId=" + txtid,connection);
                alert("Update Record Successfuly");
                txtid.value = " ";
                connection.close();
            }
            else
            {
                alert("Please textbox's value");
            }
 
        }
    </script>
    <style type="text/css">
        #txtname
        {
            z-index: 1;
            left: 230px;
            top: 94px;
            position: absolute;
        }
        #txtid
        {
            z-index: 1;
            left: 230px;
            top: 54px;
            position: absolute;
        }
    </style>
</head>
<body style="height: 89px">
    <div id="show"
        style="font-size: x-large; font-weight: bold; height: 185px; color: #009999;">
       Update Employee Record<p style="font-size: medium; color: #000000;">
    Enter Employee ID&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input id="txtid" type="text" /></p>
        <p style="font-size: medium; color: #000000;">
            Update Employee Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </p>
        <input id="txtname" type="text" /><p>
    &nbsp;<input id="ShowRecord" type="button" value="Update" onclick="UpdateRecord()"
        style="font-weight: bold" />&nbsp;
    <input id="showall" type="button" value="Show All Record" onclick="ShowAll()"
        style="font-weight: bold" /></p>
    </div>
    </body>
</html>
   
Output 1
 First-image.jpg

Click on Show All Record button
 click-on-show-button.jpg

Output 2
Enter employee id in textbox which you want to Update from database and then enter update employee name in textbox. than click on Update button
 click-on-update-button.jpg

Output 3
After Update record, you click on Show All Record button. you will see record updated successfully.
 again-click-on-show-button.jpg

Output 4
If you will click on Update button without enter any value in textbox then it will show the error.
 error-msg.jpg