Introduction

In this article, I will explain how to update a record in a database using a TextBox in JavaScript.
Note: This program will work only with Internet Explorer.
First I created a database EmpDetail. I created a table in this database.
Query Code
  1. CREATE TABLE [dbo].[EmpSalary_Info](
  2. [id] [int] NULL,
  3. [name] [varchar](50) NULL,
  4. [salary] [int] NULL
  5. ) ON [PRIMARY]
Now insert some data into the "EmpSalary_Info" table. Then use the following procedure.
Complete Program
Update_Record.html
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title></title>
  6. <script type="text/javascript">
  7. function ShowAll()
  8. {
  9. var connection = new ActiveXObject("ADODB.Connection");
  10. var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=password@123;Provider=SQLOLEDB";
  11. connection.Open(connectionstring);
  12. var rs = new ActiveXObject("ADODB.Recordset");
  13. rs.Open("select * from EmpSalary_Info ", connection);
  14. rs.MoveFirst();
  15. var span = document.createElement("span");
  16. span.style.color = "Blue";
  17. span.innerText = " ID " + " Name " + " Salary";
  18. document.body.appendChild(span);
  19. while (!rs.eof) {
  20. var span = document.createElement("span");
  21. span.style.color = "green";
  22. span.innerText = "\n " + rs.fields(0) + " | " + rs.fields(1) + " | " + rs.fields(2);
  23. document.body.appendChild(span);
  24. rs.MoveNext();
  25. }
  26. rs.close();
  27. connection.close();
  28. }
  30. function UpdateRecord()
  31. {
  32. var txtid = document.getElementById('txtid').value;
  33. var txtname = document.getElementById('txtname').value;
  34. if (txtid.length != 0 && txtname.length!=0) {
  35. var connection = new ActiveXObject("ADODB.Connection");
  36. var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=password@123;Provider=SQLOLEDB";
  37. connection.Open(connectionstring);
  38. var rs = new ActiveXObject("ADODB.Recordset");
  39. rs.Open("update EmpSalary_Info set EmpName = '" + txtname + "' where EmpId=" + txtid,connection);
  40. alert("Update Record Successfuly");
  41. txtid.value = " ";
  42. connection.close();
  43. }
  44. else
  45. {
  46. alert("Please textbox's value");
  47. }
  49. }
  50. </script>
  51. <style type="text/css">
  52. #txtname
  53. {
  54. z-index: 1;
  55. left: 230px;
  56. top: 94px;
  57. position: absolute;
  58. }
  59. #txtid
  60. {
  61. z-index: 1;
  62. left: 230px;
  63. top: 54px;
  64. position: absolute;
  65. }
  66. </style>
  67. </head>
  68. <body style="height: 89px">
  69. <div id="show"
  70. style="font-size: x-large; font-weight: bold; height: 185px; color: #009999;">
  71. Update Employee Record<p style="font-size: medium; color: #000000;">
  72. Enter Employee ID
  74. <input id="txtid" type="text" /></p>
  75. <p style="font-size: medium; color: #000000;">
  76. Update Employee Name
  78. </p>
  79. <input id="txtname" type="text" /><p>
  80. <input id="ShowRecord" type="button" value="Update" onclick="UpdateRecord()"
  81. style="font-weight: bold" />
  82. <input id="showall" type="button" value="Show All Record" onclick="ShowAll()"
  83. style="font-weight: bold" /></p>
  84. </div>
  85. </body>
  86. </html>
Output 1
First-image.jpg
Click on the "Show All Record" button.
click-on-show-button.jpg
Output 2
Enter an employee id in the TextBox that you want to update in the database and then enter the new employee name in the TextBox. Then click on the "Update" button.
click-on-update-button.jpg
Output 3
After updating the record, click on the "Show All Record" button. You will see a record updated successfully.
again-click-on-show-button.jpg
Output 4
If you will click on the Update button without entering a value into the TextBox then it will show the error:
error-msg.jpg
For more information, download the attached sample application.