Post
Ask Question

Update Record in Database Using Textbox in JavaScript

Introduction

 
In this article, I will explain how to update a record in a database using a TextBox in JavaScript.
 
Note: This program will work only with Internet Explorer.
 
First I created a database EmpDetail. 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.
 
Complete Program
 
Update_Record.html
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2.    
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <title></title>  
  6.     <script type="text/javascript">  
  7.         function ShowAll()  
  8.         {  
  9.             var connection = new ActiveXObject("ADODB.Connection");  
  10.             var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=password@123;Provider=SQLOLEDB";  
  11.             connection.Open(connectionstring);  
  12.             var rs = new ActiveXObject("ADODB.Recordset");  
  13.             rs.Open("select * from EmpSalary_Info ", connection);  
  14.             rs.MoveFirst();  
  15.             var span = document.createElement("span");  
  16.             span.style.color = "Blue";  
  17.             span.innerText = "  ID " + "  Name " + "   Salary";  
  18.             document.body.appendChild(span);  
  19.             while (!rs.eof) {  
  20.                 var span = document.createElement("span");  
  21.                 span.style.color = "green";  
  22.                 span.innerText = "\n " + rs.fields(0) + " |  " + rs.fields(1) + " |  " + rs.fields(2);  
  23.                 document.body.appendChild(span);  
  24.                 rs.MoveNext();  
  25.             }  
  26.             rs.close();  
  27.             connection.close();  
  28.         }  
  29.    
  30.         function UpdateRecord()  
  31.         {    
  32.             var txtid = document.getElementById('txtid').value;  
  33.             var txtname = document.getElementById('txtname').value;  
  34.             if (txtid.length != 0 && txtname.length!=0) {  
  35.                 var connection = new ActiveXObject("ADODB.Connection");  
  36.                 var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=password@123;Provider=SQLOLEDB";  
  37.                 connection.Open(connectionstring);  
  38.                 var rs = new ActiveXObject("ADODB.Recordset");  
  39.                 rs.Open("update EmpSalary_Info set EmpName = '" + txtname + "' where EmpId=" + txtid,connection);  
  40.                 alert("Update Record Successfuly");  
  41.                 txtid.value = " ";  
  42.                 connection.close();  
  43.             }  
  44.             else  
  45.             {  
  46.                 alert("Please textbox's value");  
  47.             }  
  48.    
  49.         }  
  50.     </script>  
  51.     <style type="text/css">  
  52.         #txtname  
  53.         {  
  54.             z-index: 1;  
  55.             left: 230px;  
  56.             top: 94px;  
  57.             position: absolute;  
  58.         }  
  59.         #txtid  
  60.         {  
  61.             z-index: 1;  
  62.             left: 230px;  
  63.             top: 54px;  
  64.             position: absolute;  
  65.         }  
  66.     </style>  
  67. </head>  
  68. <body style="height: 89px">  
  69.     <div id="show"  
  70.         style="font-size: x-large; font-weight: bold; height: 185px; color: #009999;">  
  71.        Update Employee Record<p style="font-size: medium; color: #000000;">  
  72.     Enter Employee ID                 
  73.         
  74.     <input id="txtid" type="text" /></p>  
  75.         <p style="font-size: medium; color: #000000;">  
  76.             Update Employee Name              
  77.                  
  78.                </p>  
  79.         <input id="txtname" type="text" /><p>  
  80.      <input id="ShowRecord" type="button" value="Update" onclick="UpdateRecord()"  
  81.         style="font-weight: bold" />   
  82.     <input id="showall" type="button" value="Show All Record" onclick="ShowAll()"  
  83.         style="font-weight: bold" /></p>  
  84.     </div>  
  85.     </body>  
  86. </html> 
Output 1
 
First-image.jpg
 
Click on the "Show All Record" button.
 
click-on-show-button.jpg
 
Output 2
 
Enter an employee id in the TextBox that you want to update in the database and then enter the new employee name in the TextBox. Then click on the "Update" button.
 
click-on-update-button.jpg
 
Output 3
 
After updating the record, click on the "Show All Record" button. You will see a record updated successfully.
 
again-click-on-show-button.jpg
 
Output 4
 
If you will click on the Update button without entering a value into the TextBox then it will show the error:
 
error-msg.jpg
 
For more information, download the attached sample application.


Similar Articles