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
<input id="txtid"
type="text"
/></p>
<p
style="font-size:
medium; color:
#000000;">
Update Employee
Name
&nbs
p;
</p>
<input
id="txtname"
type="text"
/><p>
<input
id="ShowRecord"
type="button"
value="Update"
onclick="UpdateRecord()"
style="font-weight:
bold" />
<input id="showall"
type="button"
value="Show All
Record" onclick="ShowAll()"
style="font-weight:
bold" /></p>
</div>
</body>
</html>
Output 1
Click on Show All Record button
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
Output 3
After Update record, you click on Show All Record button. you
will see record updated successfully.
Output 4
If you will click on Update button without enter any value in
textbox then it will show the error.
