In this article I will explain explain how to dynamically add and remove TextBoxes dynamically using JavaScript in ASP.Net using C# and VB.Net.
I will also explain how to fetch the values of the dynamically generated TextBoxes using JavaScript on Server Side and also retain the dynamic TextBoxes across PostBack.
HTML Markup
The HTML Markup consists of an HTML Button to add dynamic TextBoxes using JavaScript, an HTML DIV for holding the dynamic TextBoxes and an ASP.Net Button.
<form id="form1" runat="server">
<input id="btnAdd" type="button" value="add" onclick="AddTextBox()" />
<br />
<br />
<div id="TextBoxContainer">
<!--Textboxes will be added here -->
</div>
<br />
<asp:Button ID="btnPost" runat="server" Text="Post" OnClick="Post" />
</form>
Client Side Scripting
Below is the client side JavaScript to add and remove the dynamic TextBoxes.
<script type="text/javascript">
function GetDynamicTextBox(value){
return '<input name = "DynamicTextBox" type="text" value = "' + value + '" />' +
'<input type="button" value="Remove" onclick = "RemoveTextBox(this)" />'
}
function AddTextBox() {
var div = document.createElement('DIV');
div.innerHTML = GetDynamicTextBox("");
document.getElementById("TextBoxContainer").appendChild(div);
}
function RemoveTextBox(div) {
document.getElementById("TextBoxContainer").removeChild(div.parentNode);
}
function RecreateDynamicTextboxes() {
var values = eval('<%=Values%>');
if (values != null) {
var html = "";
for (var i = 0; i < values.length; i++) {
html += "<div>" + GetDynamicTextBox(values[i]) + "</div>";
}
document.getElementById("TextBoxContainer").innerHTML = html;
}
}
window.onload = RecreateDynamicTextboxes;
</script>
GetDynamicTextBox function
This function returns an HTML string of an HTML TextBox and button which will be used to append to the container DIV.
AddTextBox function
This function creates an HTML DIV element with a TextBox and a Button (to remove the TextBox) and then appends it to the Container DIV.
Note: While creating the dynamic TextBoxes I am assigning a constant name attribute DynamicTextBox to all TextBoxes. The values of the dynamic TextBoxes will be fetched using its name attribute.
RemoveTextBox function
This function simply removes the dynamically added TextBox associated with the Button that was clicked.
RecreateDynamicTextboxes function
This function is called on the JavaScript window onload event which is triggered after the page is loaded in the browser.
It first converts the JSON string from server side i.e. '<%=Values%>' to JavaScript Array and then recreates the dynamic TextBoxes by looping through the values preset in the JavaScript array.
Namespaces
You will need to import the following namespace.
C#
using System.Web.Script.Serialization;
VB.Net
Imports System.Web.Script.Serialization
Fetching the values of dynamic TextBoxes created using JavaScript
When the Post Button is clicked, first the values of the TextBoxes are fetched from the Request.Form collection using the name attribute value of the dynamic TextBoxes.
The fetched values are serialized to a JSON string and assigned to the Values protected variable, this JSON string will be used on Client Side for recreating the dynamic TextBoxes after PostBack.
Finally a loop is executed and values of the TextBoxes are displayed using JavaScript alert.
C#
protected string Values;
protected void Post(object sender, EventArgs e)
{
string[] textboxValues = Request.Form.GetValues("DynamicTextBox");
JavaScriptSerializer serializer = new JavaScriptSerializer();
this.Values = serializer.Serialize(textboxValues);
string message = "";
foreach (string textboxValue in textboxValues)
{
message += textboxValue + "\\n";
}
ClientScript.RegisterClientScriptBlock(this.GetType(), "alert", "alert('" + message + "');", true);
}
VB.Net
Protected Values As String
Protected Sub Post(sender As Object, e As EventArgs)
Dim textboxValues As String() = Request.Form.GetValues("DynamicTextBox")
Dim serializer As New JavaScriptSerializer()
Me.Values = serializer.Serialize(textboxValues)
Dim message As String = ""
For Each textboxValue As String In textboxValues
message += textboxValue & "\n"
Next
ClientScript.RegisterClientScriptBlock(Me.GetType(), "alert", "alert('" & message & "');", True)
End Sub
Screenshots
![Dynamically add and remove TextBoxes using JavaScript]()
Demo
Downloads
