How to Insert Record in Database Using Textboxes in TypeScript

Nitin Bhardwaj
12y
12.8k
0
0

100

Article

Insert_Record_in_TypeScript.rar

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>

<head>

<title>TypeScript</title>

#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>

 <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>

Name            

Salary            

City               

</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.

Output 2

Now insert a record in the textboxes, then click on the "Insert" button.

Output 3

Now again click on the "Show All Record" button.

Output 4

If we click on the "Insert" button without entering any data then:

For more information, download the attached sample application.