Adding and Removing javascript elements using javascript in asp.net
In this article we are going to focus on Adding and Removing javascript elements using javascript in asp.net and then using these values in our webform. Using the Request.Form.GetValues method we can retrieve the values from these controls as shown below.
In this article we are going to focus on Adding and Removing javascript elements using javascript in asp.net and then using these values in our webform.
Step 1: Create three buttons Add, Remove and Save. Add button will be used to add dynamically created textbox element using javascript to be added to the webpage. Remove button will be used to remove the dynamically created textbox from the page. Save button will be used to save the values of the dynamically created textbox to the database.
<body>
<form id="form1" runat="server">
<div>
<div>
<asp:Button runat="server" ID="Button1" Text="Add" OnClientClick="return AddButton();" />
<asp:Button runat="server" ID="btnAdd" Text="Remove" OnClientClick="return RemoveButton();" />
<asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" />
</div>
<div id="divData">
<p id="pFirstName">First Name: </p>
<p id="pLastName">Last Name: </p>
</div>
</div>
</form>
</body>
Step 2: On click of add button, we will call the javascript function "AddButton" to create two textboxes using document.CreateElement method and append these two textboxes to the pFirstName and pLastName paragraph elements respectively. you can append it any where in the DOM as you like. We dont want to postback the form to server so we will return false from the javascript function.
function AddButton() {
var textbox1 = document.createElement("input");
textbox1.type = "text";
textbox1.id = "textbox1";
document.getElementById("pFirstName").appendChild(textbox1);
var textbox2 = document.createElement("input");
textbox2.type = "text";
textbox2.id = "textbox2";
textbox1.name = "textbox1";
textbox2.name = "textbox2";
document.getElementById("pLastName").appendChild(textbox2);
return false;
}
Step 3: Now when the user clicks on remove button, we are calling the javascript RemoveButton method. In this method we are getting the reference to the textbox1,textbox2,form elements using the document.getElementById method and then removing the textbox elements from the form using removeChild method of the form.
function RemoveButton() {
var form = document.getElementById("form1");
var textbox1 = document.getElementById("textbox1");
if (textbox1 != undefined)
form.removeChild(textbox1);
var textbox2 = document.getElementById("textbox2");
if (textbox2 != undefined)
form.removeChild(textbox2);
return false;
}
Step 4: Now we will write the server side code to save the data in the database. When the user clicks on the btnSave button. Here we will capture the data entered in the textbo1 and textbo2.
In this scenario, Request.Form.GetValues method returns the value in the control passed as the key to the method. In order to retrieve the value we are going to use first index of the array returned from this method : txtFirstName[0].
protected void btnSave_Click(object sender, EventArgs e)
{
string[] txtFirstName = Request.Form.GetValues("textbox1");
string[] txtLastName = Request.Form.GetValues("textbox2");
string value1 = txtFirstName[0];
string value2 = txtLastName[0];
//Write code to store value1, value2 in database
}
Below is the complete code for this article:
Below code shall be in Default2.aspx page:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function AddButton() {
var textbox1 = document.createElement("input");
textbox1.type = "text";
textbox1.id = "textbox1";
document.getElementById("pFirstName").appendChild(textbox1);
var textbox2 = document.createElement("input");
textbox2.type = "text";
textbox2.id = "textbox2";
textbox1.name = "textbox1";
textbox2.name = "textbox2";
document.getElementById("pLastName").appendChild(textbox2);
return false;
}
function RemoveButton() {
var form = document.getElementById("form1");
var textbox1 = document.getElementById("textbox1");
if (textbox1 != undefined)
form.removeChild(textbox1);
var textbox2 = document.getElementById("textbox2");
if (textbox2 != undefined)
form.removeChild(textbox2);
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div>
<asp:Button runat="server" ID="Button1" Text="Add" OnClientClick="return AddButton();" />
<asp:Button runat="server" ID="btnAdd" Text="Remove" OnClientClick="return RemoveButton();" />
<asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" />
</div>
<div id="divData">
<p id="pFirstName">First Name: </p>
<p id="pLastName">Last Name: </p>
</div>
</div>
</form>
</body>
</html>
Default2.aspx.cs file code:
protected void btnSave_Click(object sender, EventArgs e)
{
string[] txtFirstName = Request.Form.GetValues("textbox1");
string[] txtLastName = Request.Form.GetValues("textbox2");
string value1 = txtFirstName[0];
string value2 = txtLastName[0];
//Write code to store value1, value2 in database
}
Follow