Post
Ask Question

Insert Record in Database Using Textboxes in JavaScript

Introduction

 
In this article, I will explain how to insert records to a database using TextBox in JavaScript.
 
Note: This program will work only with Internet Explorer.
 
First I created a database EmpDetail. Then I created a table in this database. 
 
Query Code
  1. CREATE TABLE [dbo].[Emp_Info](  
  2.       [Emp_Id] [int] NULL,  
  3.       [Name] [varchar](50) NULL,  
  4.       [Salary] [int] NULL,  
  5.       [City] [varchar](50) NULL  
  6. ) ON [PRIMARY] 
Now insert some data into the Emp_Info table. Then use the following procedure.
 
Complete Program
 
Insert_Value.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.         function InsertRecord()  
  7.         {  
  8.             var txtid = document.getElementById('txtid').value;  
  9.             var txtname = document.getElementById('txtname').value;  
  10.             var txtsalary = document.getElementById('txtsalary').value;  
  11.             var txtcity = document.getElementById('txtcity').value;  
  12.             if (txtid.length != 0 || txtname.length !=0 || txtsalary.length !=0|| txtcity.length !=0)  
  13.             {  
  14.                 var connection = new ActiveXObject("ADODB.Connection");  
  15.                 var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=****;Provider=SQLOLEDB";  
  16.                 connection.Open(connectionstring);  
  17.                 var rs = new ActiveXObject("ADODB.Recordset");  
  18.                 rs.Open("insert into Emp_Info values('" + txtid + "','" + txtname + "','" + txtsalary + "','" + txtcity + "')", connection);  
  19.                 alert("Insert Record Successfuly");  
  20.                 txtid.value = " ";  
  21.                 connection.close();  
  22.             }  
  23.             else  
  24.             {              
  25.                 alert("Please Enter Employee \n Id \n Name \n Salary \n City ");  
  26.             }  
  27.         }  
  28.         function ShowAll()  
  29.         {  
  30.                 var connection = new ActiveXObject("ADODB.Connection");  
  31.                 var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=****;Provider=SQLOLEDB";  
  32.                 connection.Open(connectionstring);  
  33.                 var rs = new ActiveXObject("ADODB.Recordset");  
  34.                 rs.Open("select * from Emp_Info ", connection);  
  35.                 rs.MoveFirst();  
  36.                 var span = document.createElement("span");  
  37.                 span.style.color = "Blue";  
  38.                 span.innerText = "  ID " + "  Name " + "  Salary" + " City ";  
  39.                 document.body.appendChild(span);  
  40.                 while (!rs.eof)  
  41.                 {  
  42.                     var span = document.createElement("span");  
  43.                     span.style.color = "green";  
  44.                     span.innerText = "\n " + rs.fields(0) + " |  " + rs.fields(1) + " |  " + rs.fields(2) + " |  " + rs.fields(3);  
  45.                     document.body.appendChild(span);  
  46.                     rs.MoveNext();  
  47.                 }  
  48.                 rs.close();  
  49.                 connection.close();  
  50.             }   
  51.     </script>  
  52.     <style type="text/css">  
  53.         #main  
  54.         {  
  55.             height: 264px;  
  56.         }  
  57.         #ShowRecord  
  58.         {  
  59.             width: 67px;  
  60.             z-index: 1;  
  61.             left: 20px;  
  62.             top: 257px;  
  63.             position: absolute;  
  64.         }  
  65.         #showall  
  66.         {  
  67.             z-index: 1;  
  68.             left: 114px;  
  69.             top: 257px;  
  70.             position: absolute;  
  71.         }  
  72.     </style>  
  73. </head>  
  74. <body style="height: 431px">  
  75.     <div id="show"  
  76.         style="font-size: x-large; font-weight: bold; height: 298px; color: #009999;">  
  77.        Insert Employee Record<p style="font-size: medium; color: #000000;">  
  78.      Employee Id    
  79.     <input id="txtid" type="text" /></p>  
  80.         <p style="font-size: medium; color: #000000;">  
  81.             Name               
  82.             <input id="txtname" type="text" /></p>  
  83.         <p style="font-size: medium; color: #000000;">  
  84.             Salary              
  85.             <input id="txtsalary" type="text" /></p>  
  86.         <p style="font-size: medium; color: #000000;">  
  87.             City                  
  88.             <input id="txtcity" type="text" /></p>  
  89.     <input id="ShowRecord" type="button" value="Insert" onclick="InsertRecord()" />   
  90.     <input id="showall" type="button" value="Show All Record" onclick="ShowAll()" /></div>  
  91.     </body>  
  92. </html> 
Output 1
 
Click on the "Show All Record" button.
 
click-on-show.jpg
 
Output 2
 
Insert records in the textboxes then click on the "Insert" button.
 
insert-record.jpg
 
Output 3
 
After inserting a record, click on the "Show All Record" button. You will see the record inserted successfully.
 
insert-record.jpg
 
Output 4
 
If you click on the Insert button without entering any value in the textboxes then it will show the error.
 
error.jpg
 
For more information, download the attached sample application.


Similar Articles