Post
Ask Question

Show Whether a Textbox Value Exists in Database Using TypeScript

Show Whether a Textbox Value Exists in Database Using TypeScript 

 
Note: This program will work only with Internet Explorer.
 
In this article, I explain how to show whether a TextBox value exists in the database using TypeScript.
 
First, I created a database "EmpSalary_Info". Then I created a table in this database. 
 
Query Code
  1. CREATE TABLE [dbo].[EmpSalary_Info](  
  2.       [id] [int] NULL,  
  3.       [name] [varchar](50) NULL,  
  4.       [salary] [int] NULL  
  5. ) ON [PRIMARY]  
Now insert some data into the "EmpSalary_Info" table. Then use the following procedure.
 
Step 1
Open Visual Studio 2012 and click "File" -> "New" -> "Project...". A window is opened. In this window, click "HTML Application for TypeScript" under Visual C#.
 
Give the name of your application as "Exit_value" and then click "Ok".
 
Step 2
After this session the project has been created; a new window is opened on the right side. This window is called the Solution Explorer. The Solution Explorer contains the ts file, js file and CSS files and the aspx page.
 
 solution-explorer.jpg
 

Complete Program

 
ExitValue.ts
  1. class Exit_Value  
  2. {  
  3.  ShowDB()  
  4.  {  
  5.   var txtid = ( < HTMLTextAreaElement > document.getElementById('txtid')).value;  
  6.   if (txtid.length != 0)  
  7.   { 
  8.    var connection = new ActiveXObject("ADODB.Connection");  
  9.    var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=password@123;Provider=SQLOLEDB";  
  10.    connection.Open(connectionstring);  
  11.    var rs = new ActiveXObject("ADODB.Recordset");  
  12.    rs.Open("select * from EmpSalary_Info where EmpId=" + txtid, connection);  
  13.    rs.MoveFirst();  
  14.    var span = document.createElement("span");  
  15.    span.style.color = "Blue";  
  16.    span.innerText = "  ID " + "  Name " + "   Salary";  
  17.    document.body.appendChild(span);  
  18.    while (!rs.eof) {  
  19.     var span = document.createElement("span");  
  20.     span.style.color = "Red";  
  21.     span.innerText = "\n " + rs.fields(0) + " |  " + rs.fields(1) + " |  " + rs.fields(2);  
  22.     document.body.appendChild(span);  
  23.     rs.MoveNext();  
  24.     alert("Employee exit in Database");  
  25.    }  
  26.    rs.close();  
  27.    connection.close();  
  28.   } else {  
  29.    alert("Please Enter Employee Id In TextBox");  
  30.   }  
  31.  }  
  32. }  
  33. window.onload = () =>  
  34.  {  
  35.   var showbttn = document.getElementById("ShowRecord");  
  36.   showbttn.onclick = function()  
  37.   {  
  38.    var obj = new Exit_Value();  
  39.    obj.ShowDB();  
  40.   }  
  41.  };  
Default.html
  1. <!DOCTYPE html>  
  2. <html lang="en"  
  3.     xmlns="http://www.w3.org/1999/xhtml">  
  4.     <head>  
  5.         <meta charset="utf-8" />  
  6.         <title>TypeScript HTML App</title>  
  7.         <link rel="stylesheet" href="app.css" type="text/css" />  
  8.         <script src="ExitValue.js"></script>  
  9.         <style type="text/css"> 
  10.         #main  
  11.         {  
  12.             height: 264px;  
  13.         }  
  14.     </style>  
  15.     </head>  
  16.     <body>  
  17.         <div id="show" style="font-size: x-large; font-weight: bold; height: 142px; color: #993333;">  
  18.         Employee Details in TypeScript  
  19.             <p style="font-size: medium; color: #000000;">  
  20.     Enter Employee Id   
  21.                 <input id="txtid" type="text" />  
  22.             </p>  
  23.             <p>  
  24.                 <input id="ShowRecord" type="button" value="Check value" style="font-weight: bold" />   
  25.             </p>  
  26.         </div>  
  27.     </body>  
  28. </html>  
ExitValue.js
  1. var Exit_Value = (function() {  
  2.  function Exit_Value() {}  
  3.  Exit_Value.prototype.ShowDB = function() {  
  4.   var txtid = (document.getElementById('txtid')).value;  
  5.   if (txtid.length != 0) {  
  6.    var connection = new ActiveXObject("ADODB.Connection");  
  7.    var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=password@123;Provider=SQLOLEDB";  
  8.    connection.Open(connectionstring);  
  9.    var rs = new ActiveXObject("ADODB.Recordset");  
  10.    rs.Open("select * from EmpSalary_Info where EmpId=" + txtid, connection);  
  11.    rs.MoveFirst();  
  12.    var span = document.createElement("span");  
  13.    span.style.color = "Blue";  
  14.    span.innerText = "  ID " + "  Name " + "   Salary";  
  15.    document.body.appendChild(span);  
  16.    while (!rs.eof) {  
  17.     var span = document.createElement("span");  
  18.     span.style.color = "Red";  
  19.     span.innerText = "\n " + rs.fields(0) + " |  " + rs.fields(1) + " |  " + rs.fields(2);  
  20.     document.body.appendChild(span);  
  21.     rs.MoveNext();  
  22.     alert("Employee exit in Database");  
  23.    }  
  24.    rs.close();  
  25.    connection.close();  
  26.   } else {  
  27.    alert("Please Enter Employee Id In TextBox");  
  28.   }  
  29.  };  
  30.  return Exit_Value;  
  31. })();  
  32. window.onload = function() {  
  33.  var showbttn = document.getElementById("ShowRecord");  
  34.  showbttn.onclick = function() {  
  35.   var obj = new Exit_Value();  
  36.   obj.ShowDB();  
  37.  };  
  38. };  
  39. //@ sourceMappingURL=ExitValue.js.map  
Output 1
 
 enter-value.jpg
 
Enter an employee id and then click on the "Show" button.
 
 show-result.jpg
 
Output 2
We are not entering a value into the TextBox and we click on the "Show" button.
 
error-msg.jpg
 
For more information, download the attached sample application.


Similar Articles