Show Whether a Textbox Value Exists in Database Using JavaScript

Introduction

 
In this article, I explain how to show whether a TextBox value exists in the database using JavaScript.
 
Note: This program will work only with Internet Explorer.
 
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] [intNULL,  
  3.       [name] [varchar](50) NULL,  
  4.       [salary] [intNULL  
  5. ON [PRIMARY
Now insert some data into the "EmpSalary_Info" table. Then use the following procedure.
 
Complete Program
 
Show_Data.htm
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title></title>  
  5.     <script type="text/javascript" >  
  6.   
  7.         function ShowDB()  
  8.         {        
  9.                 var txtid = document.getElementById('txtid').value;  
  10.                 if (txtid.length != 0)  
  11.                 {  
  12.                     var connection = new ActiveXObject("ADODB.Connection");  
  13.                     var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=password@123;Provider=SQLOLEDB";  
  14.                     connection.Open(connectionstring);  
  15.                     var rs = new ActiveXObject("ADODB.Recordset");  
  16.                     rs.Open("select * from EmpSalary_Info where EmpId=" + txtid, connection);  
  17.                     rs.MoveFirst();  
  18.                     var span = document.createElement("span");  
  19.                     span.style.color = "Blue";  
  20.                     span.innerText = "  ID " + "  Name " + "   Salary";  
  21.                     document.body.appendChild(span);  
  22.                     while (!rs.eof)  
  23.   
  24.                     {  
  25.                         var span = document.createElement("span");  
  26.                         span.style.color = "Red";  
  27.                         span.innerText = "\n " + rs.fields(0) + " |  " + rs.fields(1) + " |  " + rs.fields(2);  
  28.                         document.body.appendChild(span);  
  29.                         rs.MoveNext();  
  30.                         alert("Employee exit in Database");  
  31.                     }  
  32.                     rs.close();  
  33.                     connection.close();  
  34.                 }  
  35.                 else  
  36.                 {  
  37.                     alert("Please Enter Employee Id In TextBox");  
  38.                 }  
  39.         }  
  40.   
  41.     </script>  
  42.     <style type="text/css">  
  43.         #main  
  44.         {  
  45.             height: 264px;  
  46.         }  
  47.     </style>  
  48. </head>  
  49. <body>  
  50.     <div id="show" style="font-size: x-large; font-weight: bold; height: 142px; color: #993333;">  
  51.         Employee Details<p style="font-size: medium; color: #000000;">  
  52.     Enter Employee Id   
  53.     <input id="txtid" type="text" /></p>    
  54. <p>  
  55.                  
  56.     <input id="ShowRecord" type="button" value="Show" onclick="ShowDB()" style="font-weight: bold" /> </p>  
  57.   
  58.     </div>  
  59.     </body>  
  60. </html>  
Output 1
 
First-image.jpg
 
Enter an employee id and then click on the "Show" button.
 
second-image.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.