Dynamically add and remove TextBoxes using jQuery

In this article I will explain how to dynamically add and remove TextBoxes dynamically using jQuery in ASP.Net using C# and VB.Net.

I will also explain how to fetch the values of the dynamically generated TextBoxes using jQuery 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 jQuery, an HTML DIV for holding the dynamic TextBoxes and an ASP.Net Button.

<br />

</div>

<br />

<asp:Button ID="btnPost" runat="server" Text="Post" OnClick="Post" />

</form>

Client Side Scripting

Below is the client side jQuery script to add and remove the dynamic TextBoxes.

Adding a dynamic TextBox

When the Add Button is clicked, it creates a dynamic HTML DIV and then gets the HTML string consisting of a dynamic TextBox and a Button by making a call to the GetDynamicTextBox function.

The HTML string is assigned to the DIV and then the DIV is appended as child element 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.

Removing a dynamic TextBox

The Remove Button is assigned a class attribute. Using the class attribute value as jQuery Selector, a click event handler is assigned to the Remove Button.

When the Remove Button is clicked, first its parent HTML DIV is determined and then the HTML DIV is removed from the container DIV.

Preserving the jQuery Dynamic TextBoxes across PostBack

Inside the jQuery document ready event handler, a JavaScript array is created from the JSON string received from the Server i.e. '<%=Values%>.

A loop is executed over this JavaScript Array and for each value a dynamic HTML DIV consists of a dynamic TextBox and a Button is created and appended to the container DIV.

$(function () {

var values = eval('<%=Values%>');

if (values != null) {

var html = "";

$(values).each(function () {

var div = $("<div />");

div.html(GetDynamicTextBox(this));

$("#TextBoxContainer").append(div);

});

}

$("#btnAdd").bind("click", function () {

var div = $("<div />");

div.html(GetDynamicTextBox(""));

$("#TextBoxContainer").append(div);

});

$("body").on("click", ".remove", function () {

$(this).closest("div").remove();

});

function GetDynamicTextBox(value) {

return '<input name = "DynamicTextBox" type="text" value = "' + value + '" /> ' +

'<input type="button" value="Remove" class="remove" />'

}

</script>

Namespaces

You will need to import the following namespace.

using System.Web.Script.Serialization;

VB.Net

Imports System.Web.Script.Serialization

Fetching the values of dynamic TextBoxes created using jQuery

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.

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";

}