Post
Ask Question

How to Insert Record in Database Using Textboxes 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. { 
  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.


Similar Articles