How to Insert Record in Database Using Textboxes in TypeScript

In this article I will explain how to insert record in database using textbox in TypeScript.

Introduction

 
Note: This program will work only with Internet Explorer.
 
In this article, I will explain how to insert a record in a database using a TextBox in TypeScript.
 
First I created a database EmpDetail. Then I created a table in this database. 
 

Query Code 

  1. CREATE TABLE[dbo]. [Emp_Info]([Emp_Id][int] NULL, [Name][varchar](50) NULL, [Salary][int] NULL, [City][varchar](50) NULL) ON[PRIMARY]  
Now insert some data in the Emp_Info table. Then use the following procedure.
 

Complete Program

 
InsertRecord.ts
  1. class Insert_Record  
  2.  InsertRecord()  
  3.  {  
  4.   var txtid = ( < HTMLTextAreaElement > document.getElementById('txtid')).value;  
  5.   var txtname = ( < HTMLTextAreaElement > document.getElementById('txtname')).value;  
  6.   var txtsalary = ( < HTMLTextAreaElement > document.getElementById('txtsalary')).value;  
  7.   var txtcity = ( < HTMLTextAreaElement > document.getElementById('txtcity')).value;  
  8.   if (txtid.length != 0 || txtname.length != 0 || txtsalary.length != 0 || txtcity.length != 0)  
  9.   {  
  10.    var connection = new ActiveXObject("ADODB.Connection");  
  11.    var constr = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=****;Provider=SQLOLEDB";  
  12.    connection.Open(constr);  
  13.    var rs = new ActiveXObject("ADODB.Recordset");  
  14.    rs.Open("insert into Emp_Info values('" + txtid + "','" + txtname + "','" + txtsalary + "','" + txtcity + "')", connection);  
  15.    alert("Insert Record Successfuly");  
  16.    connection.close();  
  17.   } else  
  18.   {  
  19.    alert("Please Enter Employee \n Id \n Name \n Salary \n City ");  
  20.   }  
  21.  }  
  22.  ShowAll()  
  23.  {  
  24.   var connection = new ActiveXObject("ADODB.Connection");  
  25.   var constr = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=****;Provider=SQLOLEDB";  
  26.   connection.Open(constr);  
  27.   var rs = new ActiveXObject("ADODB.Recordset");  
  28.   rs.Open("select * from Emp_Info ", connection);  
  29.   rs.MoveFirst();  
  30.   var span = document.createElement("span");  
  31.   span.style.color = "Blue";  
  32.   span.innerText = "ID " + "  Name " + "  Salary" + " City ";  
  33.   document.body.appendChild(span);  
  34.   while (!rs.eof) {  
  35.    var span = document.createElement("span");  
  36.    span.style.color = "green";  
  37.    span.innerText = "\n " + rs.fields(0) + " |  " + rs.fields(1) + " |  " + rs.fields(2) + " |  " + rs.fields(3);  
  38.    document.body.appendChild(span);  
  39.    rs.MoveNext();  
  40.   }  
  41.   rs.close();  
  42.   connection.close();  
  43.  }  
  44. }  
  45. window.onload = () =>  
  46.  {  
  47.   var bttnShow = document.getElementById("showall");  
  48.   var bttnInRecord = document.getElementById("InsertRecord");  
  49.   var obj = new Insert_Record();  
  50.   bttnShow.onclick = function()  
  51.   {  
  52.    obj.ShowAll();  
  53.   }  
  54.   bttnInRecord.onclick = function()  
  55.   {  
  56.    obj.InsertRecord();  
  57.   }  
  58.  };  
Insert_Record.html
  1. < !DOCTYPE html >  
  2.  <  
  3.  html lang = "en"  
  4. xmlns = "http://www.w3.org/1999/xhtml" >  
  5.  <  
  6.  head >  
  7.  <  
  8.  meta charset = "utf-8" / >  
  9.  <  
  10.  title > TypeScript < /title>  
  11.  <  
  12.  link rel = "stylesheet"  
  13. href = "app.css"  
  14. type = "text/css" / >  
  15.  <  
  16.  script src = "InsertRecord.js" > < /script>  
  17.  <  
  18.  style type = "text/css" > 
  19.  #main  
  20. {  
  21.  height: 264 px;  
  22. #  
  23. ShowRecord  
  24. {  
  25.  width: 67 px;  
  26.  z - index: 1;  
  27.  left: 20 px;  
  28.  top: 257 px;  
  29.  position: absolute;  
  30. #  
  31. showall  
  32. {  
  33.  z - index: 1;  
  34.  left: 114 px;  
  35.  top: 257 px;  
  36.  position: absolute;  
  37. }  
  38. <  
  39. /style>  
  40. <  
  41. /head>  
  42. <  
  43. body style = "height: 315px" >  
  44.  &  
  45.  nbsp; < div id = "show"  
  46. style = "font-size: x-large; font-weight: bold; height: 256px; color: #009999;" >  
  47.  Insert Employee Record in TypeScript < p style = "font-size: medium; color: #000000;" >  
  48.  &  
  49.  nbsp; & nbsp; & nbsp; & nbsp;  
  50. Employee Id & nbsp; & nbsp; & nbsp; < input id = "txtid"  
  51. type = "text" / > < /p>  
  52.  <  
  53.  p style = "font-size: medium; color: #000000;" >  
  54.  Name & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;  
  55. <  
  56. input id = "txtname"  
  57. type = "text" / > < /p>  
  58.  <  
  59.  p style = "font-size: medium; color: #000000;" >  
  60.  Salary & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;  
  61. <  
  62. input id = "txtsalary"  
  63. type = "text" / > < /p>  
  64.  <  
  65.  p style = "font-size: medium; color: #000000;" >  
  66.  &  
  67.  nbsp; & nbsp; & nbsp; & nbsp; & nbsp;  
  68. City & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;  
  69. <  
  70. input id = "txtcity"  
  71. type = "text" / > < /p>  
  72.  <  
  73.  input id = "InsertRecord"  
  74. type = "button"  
  75. value = "Insert" / > & nbsp;  
  76. <  
  77. input id = "showall"  
  78. type = "button"  
  79. value = "Show All Record" / >  
  80.  <  
  81.  /div>  
  82.  <  
  83.  /body>  
  84.  <  
  85.  /html>  
InsertRecord.js
  1. var Insert_Record = (function() {  
  2.  function Insert_Record() {}  
  3.  Insert_Record.prototype.InsertRecord = function() {  
  4.   var txtid = (document.getElementById('txtid')).value;  
  5.   var txtname = (document.getElementById('txtname')).value;  
  6.   var txtsalary = (document.getElementById('txtsalary')).value;  
  7.   var txtcity = (document.getElementById('txtcity')).value;  
  8.   if (txtid.length != 0 || txtname.length != 0 || txtsalary.length != 0 || txtcity.length != 0) {  
  9.    var connection = new ActiveXObject("ADODB.Connection");  
  10.    var constr = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=***;Provider=SQLOLEDB";  
  11.    connection.Open(constr);  
  12.    var rs = new ActiveXObject("ADODB.Recordset");  
  13.    rs.Open("insert into Emp_Info values('" + txtid + "','" + txtname + "','" + txtsalary + "','" + txtcity + "')", connection);  
  14.    alert("Insert Record Successfuly");  
  15.    connection.close();  
  16.   } else {  
  17.    alert("Please Enter Employee \n Id \n Name \n Salary \n City ");  
  18.   }  
  19.  };  
  20.  Insert_Record.prototype.ShowAll = function() {  
  21.   var connection = new ActiveXObject("ADODB.Connection");  
  22.   var constr = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=***;Provider=SQLOLEDB";  
  23.   connection.Open(constr);  
  24.   var rs = new ActiveXObject("ADODB.Recordset");  
  25.   rs.Open("select * from Emp_Info ", connection);  
  26.   rs.MoveFirst();  
  27.   var span = document.createElement("span");  
  28.   span.style.color = "Blue";  
  29.   span.innerText = "ID " + "  Name " + "  Salary" + " City ";  
  30.   document.body.appendChild(span);  
  31.   while (!rs.eof) {  
  32.    var span = document.createElement("span");  
  33.    span.style.color = "green";  
  34.    span.innerText = "\n " + rs.fields(0) + " |  " + rs.fields(1) + " |  " + rs.fields(2) + " |  " + rs.fields(3);  
  35.    document.body.appendChild(span);  
  36.    rs.MoveNext();  
  37.   }  
  38.   rs.close();  
  39.   connection.close();  
  40.  };  
  41.  return Insert_Record;  
  42. })();  
  43. window.onload = function() {  
  44.  var bttnShow = document.getElementById("showall");  
  45.  var bttnInRecord = document.getElementById("InsertRecord");  
  46.  var obj = new Insert_Record();  
  47.  bttnShow.onclick = function() {  
  48.   obj.ShowAll();  
  49.  };  
  50.  bttnInRecord.onclick = function() {  
  51.   obj.InsertRecord();  
  52.  };  
  53. };  
  54. //@ sourceMappingURL=InsertRecord.js.map  
Output 1
 
Click on the "Show All Record" button.
 
click-on-show.jpg
 
Output 2
 
Now insert a record in the text boxes, then click on the "Insert" button.
 
  insert-record.jpg
 
Output 3
 
Now again click on the "Show All Record" button.
 
 Again-click-on-show.jpg
 
Output 4
 
If we click on the "Insert" button without entering any data then:
 
 error-msg.jpg
 
For more information, download the attached sample application.