Insert Record in Database Using Textboxes in JavaScript

Nitin Bhardwaj
12y
140.3k
0
1

100

Article

Insert_Record_in_JavaScript.rar

Note: This program will work only with Internet Explorer.

In this article I will explain how to insert records to a database using TextBox in JavaScript.

First I created a database EmpDetail. Then I created a table in this database.

Query Code

CREATE TABLE [dbo].[Emp_Info](

[Emp_Id] [int] NULL,

[Name] [varchar](50) NULL,

[Salary] [int] NULL,

[City] [varchar](50) NULL

) ON [PRIMARY]

Now insert some data into the Emp_Info table. Then use the following procedure.

Complete Program

Insert_Value.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

function InsertRecord()

{

var txtid = document.getElementById('txtid').value;

var txtname = document.getElementById('txtname').value;

var txtsalary = document.getElementById('txtsalary').value;

var txtcity = document.getElementById('txtcity').value;

if (txtid.length != 0 || txtname.length !=0 || txtsalary.length !=0|| txtcity.length !=0)

{

var connection = new ActiveXObject("ADODB.Connection");

var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=****;Provider=SQLOLEDB";

connection.Open(connectionstring);

var rs = new ActiveXObject("ADODB.Recordset");

rs.Open("insert into Emp_Info values('" + txtid + "','" + txtname + "','" + txtsalary + "','" + txtcity + "')", connection);

alert("Insert Record Successfuly");

txtid.value = " ";

connection.close();

}

else

{

alert("Please Enter Employee \n Id \n Name \n Salary \n City ");

}

function ShowAll()

{

var connection = new ActiveXObject("ADODB.Connection");

var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=****;Provider=SQLOLEDB";

connection.Open(connectionstring);

var rs = new ActiveXObject("ADODB.Recordset");

rs.Open("select * from Emp_Info ", connection);

rs.MoveFirst();

var span = document.createElement("span");

span.style.color = "Blue";

span.innerText = " ID " + " Name " + " Salary" + " City ";

document.body.appendChild(span);

while (!rs.eof)

{

var span = document.createElement("span");

span.style.color = "green";

span.innerText = "\n " + rs.fields(0) + " | " + rs.fields(1) + " | " + rs.fields(2) + " | " + rs.fields(3);

document.body.appendChild(span);

rs.MoveNext();

}

rs.close();

connection.close();

}

</script>

#main

{

height: 264px;

}

#ShowRecord

{

width: 67px;

z-index: 1;

left: 20px;

top: 257px;

position: absolute;

}

#showall

{

z-index: 1;

left: 114px;

top: 257px;

position: absolute;

}

</style>

</head>

<div id="show"

style="font-size: x-large; font-weight: bold; height: 298px; color: #009999;">

Insert Employee Record<p style="font-size: medium; color: #000000;">

Employee Id  

Name             

Salary            

City                

</body>

</html>

Output 1

Click on the "Show All Record" button.

Output 2

Insert records in the textboxes then click on the "Insert" button.

Output 3

After inserting a record, click on the "Show All Record" button. You will see the record inserted successfully.

Output 4

If you click on the Insert button without entering any value in the textboxes then it will show the error.

For more information, download the attached sample application.