Post
Ask Question

Delete A Record From Database Using Textbox in JavaScript

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.             }  
  29.    
  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.             }  
  47.              
  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>  
  79.                  
  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.


Similar Articles