JavaScript  

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.

Membership not found