Introduction

In this article, I will explain how to delete a record from a database using a TextBox in TypeScript.
Note: This program will work only on Internet Explorer.
First I created a database "EmpDetail". Then 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
Show_Record_With_TextBox_Value.htm
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title></title>
  5. <script type="text/javascript" >
  6. function ShowAll()
  7. {
  8. var connection = new ActiveXObject("ADODB.Connection");
  9. var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=password@123;Provider=SQLOLEDB";
  10. connection.Open(connectionstring);
  11. var rs = new ActiveXObject("ADODB.Recordset");
  12. rs.Open("select * from EmpSalary_Info ", connection);
  13. rs.MoveFirst();
  14. var span = document.createElement("span");
  15. span.style.color = "Blue";
  16. span.innerText = " ID " + " Name " + " Salary";
  17. document.body.appendChild(span);
  18. while (!rs.eof)
  19. {
  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 DeleteRecord()
  31. {
  32. var txtid = document.getElementById('txtid').value;
  33. if (txtid.length != 0) {
  34. var connection = new ActiveXObject("ADODB.Connection");
  35. var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=password@123;Provider=SQLOLEDB";
  36. connection.Open(connectionstring);
  37. var rs = new ActiveXObject("ADODB.Recordset");
  38. rs.Open("delete from EmpSalary_Info where EmpId=" + txtid, connection);
  39. alert("Delete Record Successfuly");
  40. txtid.value = " ";
  41. connection.close();
  42. }
  43. else
  44. {
  45. alert("Please Enter Employee Id in TextBox");
  46. }
  48. }
  49. </script>
  50. <style type="text/css">
  51. #main
  52. {
  53. height: 264px;
  54. }
  55. #ShowRecord
  56. {
  57. width: 67px;
  58. z-index: 1;
  59. left: 53px;
  60. top: 119px;
  61. position: absolute;
  62. }
  63. #showall
  64. {
  65. z-index: 1;
  66. left: 146px;
  67. top: 118px;
  68. position: absolute;
  69. }
  70. </style>
  71. </head>
  72. <body style="height: 186px">
  73. <div id="show"
  74. style="font-size: x-large; font-weight: bold; height: 185px; color: #009999;">
  75. Delete Employee Record<p style="font-size: medium; color: #000000;">
  76. Enter Employee Id
  77. <input id="txtid" type="text" /></p>
  78. <p>
  80. <input id="ShowRecord" type="button" value="Delete" onclick="DeleteRecord()" /> <input id="showall" type="button" value="Show All Record" onclick="ShowAll()" /></p>
  81. </div>
  82. </body>
  83. </html>
Output 1
first-image.jpg
Click on the "Show All Record" button.
showAllrecord.jpg
Output 2
Enter the employee id into the TextBox that you want to delete from the database. Then click on the "Delete" button.
delete-record.jpg
Output 3
After deleting the record, click on the "Show All Record" button. You will see that the record was deleted successfully.
after-delete-record.jpg
Output 4
If you will click on the Delete button without entering any value into the TextBox then it will show the error.
error-msg.jpg
For more information, download the attached sample application.