How to Insert Record in Database Using Textboxes in TypeScript

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

&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

 

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.