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

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: 264 px;
}
#
ShowRecord
{
width: 67 px;
z - index: 1;
left: 20 px;
top: 257 px;
position: absolute;
}
#
showall
{
z - index: 1;
left: 114 px;
top: 257 px;
position: absolute;
}
<
/style>
<
/head>
<
body style = "height: 315px" >
&
nbsp; < 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;" >
&
nbsp; & nbsp; & nbsp; & nbsp;
Employee Id & nbsp; & nbsp; & nbsp; < input id = "txtid"
type = "text" / > < /p>
<
p style = "font-size: medium; color: #000000;" >
Name & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
<
input id = "txtname"
type = "text" / > < /p>
<
p style = "font-size: medium; color: #000000;" >
Salary & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
<
input id = "txtsalary"
type = "text" / > < /p>
<
p style = "font-size: medium; color: #000000;" >
&
nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
City & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
<
input id = "txtcity"
type = "text" / > < /p>
<
input id = "InsertRecord"
type = "button"
value = "Insert" / > & nbsp;
<
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