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
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
class Insert_Record
{
InsertRecord()
{
var txtid = (<HTMLTextAreaElement>document.getElementById('txtid')).value;
var txtname = (<HTMLTextAreaElement>document.getElementById('txtname')).value;
var txtsalary = (<HTMLTextAreaElement>document.getElementById('txtsalary')).value;
var txtcity = (<HTMLTextAreaElement>document.getElementById('txtcity')).value;
if (txtid.length != 0 || txtname.length != 0 || txtsalary.length != 0 || txtcity.length != 0)
{
var connection = new ActiveXObject("ADODB.Connection");
var constr = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=****;Provider=SQLOLEDB";
connection.Open(constr);
var rs = new ActiveXObject("ADODB.Recordset");
rs.Open("insert into Emp_Info values('" + txtid + "','" + txtname + "','" + txtsalary + "','" + txtcity + "')", connection);
alert("Insert Record Successfuly");
connection.close();
}
else
{
alert("Please Enter Employee \n Id \n Name \n Salary \n City ");
}
}
ShowAll()
{
var connection = new ActiveXObject("ADODB.Connection");
var constr = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=****;Provider=SQLOLEDB";
connection.Open(constr);
var rs = new ActiveXObject("ADODB.Recordset");
rs.Open("select * from Emp_Info ", connection);
rs.MoveFirst();
var span = document.createElement("span");
span.style.color = "Blue";
span.innerText = "ID " + " Name " + " Salary" + " City ";
document.body.appendChild(span);
while (!rs.eof) {
var span = document.createElement("span");
span.style.color = "green";
span.innerText = "\n " + rs.fields(0) + " | " + rs.fields(1) + " | " + rs.fields(2) + " | " + rs.fields(3);
document.body.appendChild(span);
rs.MoveNext();
}
rs.close();
connection.close();
}
}
window.onload = () =>
{
var bttnShow = document.getElementById("showall");
var bttnInRecord = document.getElementById("InsertRecord");
var obj = new Insert_Record();
bttnShow.onclick = function ()
{
obj.ShowAll();
}
bttnInRecord.onclick = function ()
{
obj.InsertRecord();
}
};
Insert_Record.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>TypeScript</title>
<link rel="stylesheet" href="app.css" type="text/css" />
<script src="InsertRecord.js"></script>
<style type="text/css">
#main
{
height: 264px;
}
#ShowRecord
{
width: 67px;
z-index: 1;
left: 20px;
top: 257px;
position: absolute;
}
#showall
{
z-index: 1;
left: 114px;
top: 257px;
position: absolute;
}
</style>
</head>
<body style="height: 315px">
<div id="show"
style="font-size: x-large; font-weight: bold; height: 256px; color: #009999;">
Insert Employee Record in TypeScript<p style="font-size: medium; color: #000000;">
Employee Id <input id="txtid" type="text" /></p>
<p style="font-size: medium; color: #000000;">
Name
<input id="txtname" type="text" /></p>
<p style="font-size: medium; color: #000000;">
Salary
<input id="txtsalary" type="text" /></p>
<p style="font-size: medium; color: #000000;">
City
<input id="txtcity" type="text" /></p>
<input id="InsertRecord" type="button" value="Insert" />
<input id="showall" type="button" value="Show All Record" />
</div>
</body>
</html>
InsertRecord.js
var Insert_Record = (function () {
function Insert_Record() { }
Insert_Record.prototype.InsertRecord = function () {
var txtid = (document.getElementById('txtid')).value;
var txtname = (document.getElementById('txtname')).value;
var txtsalary = (document.getElementById('txtsalary')).value;
var txtcity = (document.getElementById('txtcity')).value;
if(txtid.length != 0 || txtname.length != 0 || txtsalary.length != 0 || txtcity.length != 0) {
var connection = new ActiveXObject("ADODB.Connection");
var constr = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=***;Provider=SQLOLEDB";
connection.Open(constr);
var rs = new ActiveXObject("ADODB.Recordset");
rs.Open("insert into Emp_Info values('" + txtid + "','" + txtname + "','" + txtsalary + "','" + txtcity + "')", connection);
alert("Insert Record Successfuly");
connection.close();
} else {
alert("Please Enter Employee \n Id \n Name \n Salary \n City ");
}
};
Insert_Record.prototype.ShowAll = function () {
var connection = new ActiveXObject("ADODB.Connection");
var constr = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=***;Provider=SQLOLEDB";
connection.Open(constr);
var rs = new ActiveXObject("ADODB.Recordset");
rs.Open("select * from Emp_Info ", connection);
rs.MoveFirst();
var span = document.createElement("span");
span.style.color = "Blue";
span.innerText = "ID " + " Name " + " Salary" + " City ";
document.body.appendChild(span);
while(!rs.eof) {
var span = document.createElement("span");
span.style.color = "green";
span.innerText = "\n " + rs.fields(0) + " | " + rs.fields(1) + " | " + rs.fields(2) + " | " + rs.fields(3);
document.body.appendChild(span);
rs.MoveNext();
}
rs.close();
connection.close();
};
return Insert_Record;
})();
window.onload = function () {
var bttnShow = document.getElementById("showall");
var bttnInRecord = document.getElementById("InsertRecord");
var obj = new Insert_Record();
bttnShow.onclick = function () {
obj.ShowAll();
};
bttnInRecord.onclick = function () {
obj.InsertRecord();
};
};
//@ 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 textboxes, 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.