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. {
  3. InsertRecord()
  4. {
  5. var txtid = ( < HTMLTextAreaElement > document.getElementById('txtid')).value;
  6. var txtname = ( < HTMLTextAreaElement > document.getElementById('txtname')).value;
  7. var txtsalary = ( < HTMLTextAreaElement > document.getElementById('txtsalary')).value;
  8. var txtcity = ( < HTMLTextAreaElement > document.getElementById('txtcity')).value;
  9. if (txtid.length != 0 || txtname.length != 0 || txtsalary.length != 0 || txtcity.length != 0)
  10. {
  11. var connection = new ActiveXObject("ADODB.Connection");
  12. var constr = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=****;Provider=SQLOLEDB";
  13. connection.Open(constr);
  14. var rs = new ActiveXObject("ADODB.Recordset");
  15. rs.Open("insert into Emp_Info values('" + txtid + "','" + txtname + "','" + txtsalary + "','" + txtcity + "')", connection);
  16. alert("Insert Record Successfuly");
  17. connection.close();
  18. } else
  19. {
  20. alert("Please Enter Employee \n Id \n Name \n Salary \n City ");
  21. }
  22. }
  23. ShowAll()
  24. {
  25. var connection = new ActiveXObject("ADODB.Connection");
  26. var constr = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=****;Provider=SQLOLEDB";
  27. connection.Open(constr);
  28. var rs = new ActiveXObject("ADODB.Recordset");
  29. rs.Open("select * from Emp_Info ", connection);
  30. rs.MoveFirst();
  31. var span = document.createElement("span");
  32. span.style.color = "Blue";
  33. span.innerText = "ID " + " Name " + " Salary" + " City ";
  34. document.body.appendChild(span);
  35. while (!rs.eof) {
  36. var span = document.createElement("span");
  37. span.style.color = "green";
  38. span.innerText = "\n " + rs.fields(0) + " | " + rs.fields(1) + " | " + rs.fields(2) + " | " + rs.fields(3);
  39. document.body.appendChild(span);
  40. rs.MoveNext();
  41. }
  42. rs.close();
  43. connection.close();
  44. }
  45. }
  46. window.onload = () =>
  47. {
  48. var bttnShow = document.getElementById("showall");
  49. var bttnInRecord = document.getElementById("InsertRecord");
  50. var obj = new Insert_Record();
  51. bttnShow.onclick = function()
  52. {
  53. obj.ShowAll();
  54. }
  55. bttnInRecord.onclick = function()
  56. {
  57. obj.InsertRecord();
  58. }
  59. };
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. #
  24. ShowRecord
  25. {
  26. width: 67 px;
  27. z - index: 1;
  28. left: 20 px;
  29. top: 257 px;
  30. position: absolute;
  31. }
  32. #
  33. showall
  34. {
  35. z - index: 1;
  36. left: 114 px;
  37. top: 257 px;
  38. position: absolute;
  39. }
  40. <
  41. /style>
  42. <
  43. /head>
  44. <
  45. body style = "height: 315px" >
  46. &
  47. nbsp; < div id = "show"
  48. style = "font-size: x-large; font-weight: bold; height: 256px; color: #009999;" >
  49. Insert Employee Record in TypeScript < p style = "font-size: medium; color: #000000;" >
  50. &
  51. nbsp; & nbsp; & nbsp; & nbsp;
  52. Employee Id & nbsp; & nbsp; & nbsp; < input id = "txtid"
  53. type = "text" / > < /p>
  54. <
  55. p style = "font-size: medium; color: #000000;" >
  56. Name & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
  57. <
  58. input id = "txtname"
  59. type = "text" / > < /p>
  60. <
  61. p style = "font-size: medium; color: #000000;" >
  62. Salary & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
  63. <
  64. input id = "txtsalary"
  65. type = "text" / > < /p>
  66. <
  67. p style = "font-size: medium; color: #000000;" >
  68. &
  69. nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
  70. City & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
  71. <
  72. input id = "txtcity"
  73. type = "text" / > < /p>
  74. <
  75. input id = "InsertRecord"
  76. type = "button"
  77. value = "Insert" / > & nbsp;
  78. <
  79. input id = "showall"
  80. type = "button"
  81. value = "Show All Record" / >
  82. <
  83. /div>
  84. <
  85. /body>
  86. <
  87. /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.