Post
Ask Question

How To Delete Record From Database Using Textbox in TypeScript

How To Delete Record From Database Using Textbox in TypeScript

 
Note: This program will work only on Internet Explorer.
 
In this article, I will explain how to delete a record from a database using a TextBox in TypeScript.
 
First, I created a database "EmpSalary_Info". 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

 
Delete_Record.ts
  1. class Delete_record  
  2. {  
  3.  ShowAllRecord()  
  4.  {  
  5.   var connection = new ActiveXObject("ADODB.Connection");  
  6.   var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=password@123;Provider=SQLOLEDB";  
  7.   connection.Open(connectionstring);  
  8.   var rs = new ActiveXObject("ADODB.Recordset");  
  9.   rs.Open("select * from EmpSalary_Info ", connection);  
  10.   rs.MoveFirst();  
  11.   var span = document.createElement("span");  
  12.   span.style.color = "Blue";  
  13.   span.innerText = "  ID " + "  Name " + "   Salary";  
  14.   document.body.appendChild(span);  
  15.   while (!rs.eof)  
  16.   {  
  17.    var span = document.createElement("span");  
  18.    span.style.color = "green";  
  19.    span.innerText = "\n " + rs.fields(0) + " |  " + rs.fields(1) + " |  " + rs.fields(2);  
  20.    document.body.appendChild(span);  
  21.    rs.MoveNext();  
  22.   }  
  23.   rs.close();  
  24.   connection.close();  
  25.  }  
  26.  DeleteRecord()  
  27.  {  
  28.   var txtid = ( < HTMLTextAreaElement > document.getElementById('txtid')).value;  
  29.   if (txtid.length != 0)  
  30.   {  
  31.    var connection = new ActiveXObject("ADODB.Connection");  
  32.    var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=password@123;Provider=SQLOLEDB";  
  33.    connection.Open(connectionstring);  
  34.    var rs = new ActiveXObject("ADODB.Recordset");  
  35.    rs.Open("delete from EmpSalary_Info where EmpId=" + txtid, connection);  
  36.    alert("Delete Record Successfuly");  
  37.    txtid = " ";  
  38.    connection.close();  
  39.   } else  
  40.   {  
  41.    alert("Please Enter Employee Id in TextBox");  
  42.   }  
  43.  }  
  44. }  
  45. window.onload = () =>  
  46.  {  
  47.   var obj = new Delete_record();  
  48.   var bttndelete = document.getElementById("delete");  
  49.   var bttnshowall = document.getElementById("showall");  
  50.   bttnshowall.onclick = function()  
  51.   {  
  52.    obj.ShowAllRecord();  
  53.   }  
  54.   bttndelete.onclick = function()  
  55.   {  
  56.    obj.DeleteRecord();  
  57.   }  
  58.  };  
Delete_Record_From_Database.aspx
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Delete_Record_From_Database.aspx.cs" Inherits="Delete_Record.Delete_Record_From_Database" %>  
  2.  <  
  3.  !DOCTYPE html >  
  4.  <  
  5.  html xmlns = "http://www.w3.org/1999/xhtml" >  
  6.  <  
  7.  head runat = "server" >  
  8.  <  
  9.  title > < /title>  
  10.  <  
  11.  script src = "Delete_Record.js"  
  12. type = "text/javascript" > < /script>  
  13.  <  
  14.  style type = "text/css" > 
  15.  #main  
  16. {  
  17.  height: 264 px;  
  18. }  
  19. #  
  20. ShowRecord  
  21. {  
  22.  width: 67 px;  
  23.  z - index: 1;  
  24.  left: 53 px;  
  25.  top: 167 px;  
  26.  position: absolute;  
  27.  height: 0 px;  
  28. } 
  29. #  
  30. showall  
  31. {  
  32.  z - index: 1;  
  33.  left: 175 px;  
  34.  top: 165 px;  
  35.  position: absolute;  
  36. } 
  37. #  
  38. delete {  
  39.  z - index: 1;  
  40.  left: 58 px;  
  41.  top: 164 px;  
  42.  position: absolute;  
  43. }  
  44. <  
  45. /style>  
  46. <  
  47. /head>  
  48. <  
  49. body >  
  50.  <  
  51.  form id = "form1"  
  52. runat = "server" >  
  53.  <  
  54.  h2 style = "color:blue" > Delete Record From Database In TypeScript < /h2>  
  55.  <  
  56.  /form>  
  57.  <  
  58.  div id = "show"  
  59. style = "font-size: x-large; font-weight: bold; height: 135px; color: #009999;" >  
  60.  Delete Employee Record < p style = "font-size: medium; color: #000000;" >  
  61.  Enter Employee Id & nbsp; & nbsp;  
  62. <  
  63. input id = "txtid"  
  64. type = "text" / > & nbsp; & nbsp;  
  65. <  
  66. input id = "delete"  
  67. type = "button"  
  68. value = "Delete" / > & nbsp;  
  69. <  
  70. input id = "showall"  
  71. type = "button"  
  72. value = "Show All Record" / > < table style = "width: 100%; height: 61px;" >  
  73.  <  
  74.  tr >  
  75.  <  
  76.  td > & nbsp; < /td>  
  77. <  
  78. td > & nbsp; < /td>  
  79. <  
  80. td > & nbsp; < /td>  
  81. <  
  82. /tr>  
  83. <  
  84. /table>  
  85. <  
  86. /p>  
  87. <  
  88. /div>  
  89. <  
  90. /body>  
  91. <  
  92. /html>  
Delete_Record.js
  1. var Delete_record = (function() {  
  2.  function Delete_record() {}  
  3.  Delete_record.prototype.ShowAllRecord = function() {  
  4.   alert("dfdf");  
  5.   var connection = new ActiveXObject("ADODB.Connection");  
  6.   var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=password@123;Provider=SQLOLEDB";  
  7.   connection.Open(connectionstring);  
  8.   var rs = new ActiveXObject("ADODB.Recordset");  
  9.   rs.Open("select * from EmpSalary_Info ", connection);  
  10.   rs.MoveFirst();  
  11.   var span = document.createElement("span");  
  12.   span.style.color = "Blue";  
  13.   span.innerText = "  ID " + "  Name " + "   Salary";  
  14.   document.body.appendChild(span);  
  15.   while (!rs.eof) {  
  16.    var span = document.createElement("span");  
  17.    span.style.color = "green";  
  18.    span.innerText = "\n " + rs.fields(0) + " |  " + rs.fields(1) + " |  " + rs.fields(2);  
  19.    document.body.appendChild(span);  
  20.    rs.MoveNext();  
  21.   }  
  22.   rs.close();  
  23.   connection.close();  
  24.  };  
  25.  Delete_record.prototype.DeleteRecord = function() {  
  26.   var txtid = (document.getElementById('txtid')).value;  
  27.   if (txtid.length != 0) {  
  28.    var connection = new ActiveXObject("ADODB.Connection");  
  29.    var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=password@123;Provider=SQLOLEDB";  
  30.    connection.Open(connectionstring);  
  31.    var rs = new ActiveXObject("ADODB.Recordset");  
  32.    rs.Open("delete from EmpSalary_Info where EmpId=" + txtid, connection);  
  33.    alert("Delete Record Successfuly");  
  34.    txtid = " ";  
  35.    connection.close();  
  36.   } else {  
  37.    alert("Please Enter Employee Id in TextBox");  
  38.   }  
  39.  };  
  40.  return Delete_record;  
  41. })();  
  42. window.onload = function() {  
  43.  var obj = new Delete_record();  
  44.  var bttndelete = document.getElementById("delete");  
  45.  var bttnshowall = document.getElementById("showall");  
  46.  bttnshowall.onclick = function() {  
  47.   obj.ShowAllRecord();  
  48.  };  
  49.  bttndelete.onclick = function() {  
  50.   obj.DeleteRecord();  
  51.  };  
  52. };  
  53. //@ sourceMappingURL=Delete_Record.js.map  
Output 1
 
 First-image.jpg
 
Click on the "Show All Record" button.
 
Click-on-show-button.jpg
 
Output 2
Enter the employee id into the TextBox that you want to delete from the database. Then click on the "Delete" button.
 
click-on-delete-button.jpg
 
Output 3
After deleting the record, click on the "Show All Record" button. You will see that the record was deleted successfully.
 
 again-click-on-show-button.jpg
 
Output 4
If you will click on the Delete button without entering any value into the TextBox then it will show the error.
 
 without-value-enter-click-delete-button.jpg
 
For more information, download the attached sample application.


Similar Articles