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.