In this article I will explain you how to add and remove textboxes dynamically by making use of client side scripts like JavaScript, how to fetch the values of the dynamically generated textboxes server side and also how to retain them after PostBack.

HTML Markup
Below is the HTML markup of the ASP.Net page where we will build the dynamic textbox functionality using JavaScript. I have placed a simply HTML button to add the textboxes on whose click I am calling AddTextBox()JavaScript function which I will explain later. Also I have html DIV control which will act as a container to hold the dynamic textboxes. Finally there’s an ASP.Net Button control which I used to show how to fetch the values of the dynamic textboxes generated using JavaScript server side and also retain the dynamic textboxes after PostBack.
<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 that will create the textboxes, add them to the container DIV and also remove the dynamically added 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 a HTML string containing a HTML textbox and button which will be used to append to the container DIV.
AddTextBox function
This function as the name suggests creates a DIV element with a textbox and a button (to remove the textbox) and appends it to the Container DIV. While generating the dynamic textboxes I am assigning equal name attribute DynamicTextBox to all textboxes so that I can easily fetch them server side.
RemoveTextBox function
This function simply removes the dynamically added textbox on click of the remove button.
RecreateDynamicTextboxes function
 
This function plays an important role in recreating the dynamic textboxes that were created using JavaScript. First it converts the JSON string from server side i.e. '<%=Values%>' to JavaScript Array so that we can recreate the textboxes with values. The Values variable is a simple protected string variable declared server side to return the values of the dynamic textboxes back to the JavaScript in JSON format.

Server Side Scripting
Namespaces
You will need to import the following namespace in order to use the JSON Serialization
C#
using System.Web.Script.Serialization;

VB.Net
Imports System.Web.Script.Serialization
 
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);
}
 
VB.Net
Protected Values As String
Protected Sub Post(ByVal sender As Object, ByVal e As EventArgs)
    Dim textboxValues() As String = Request.Form.GetValues("DynamicTextBox")
    Dim serializer As New JavaScriptSerializer()
    Me.Values = serializer.Serialize(textboxValues)
End Sub

Above I am serializing the contents of Request.Form to JSON string and then assigning it so that the dynamic textboxes are recreated after PostBack

Screenshots
The below screenshot describes how the dynamically textboxes are generated client side via JavaScript.
Add and Remove dynamic Textboxes Client side using JavaScript

The below screenshot describes how the values of the dynamic textboxes are fetched server side after PostBack.
Add dynamic Textboxes using JavaScript

The above code has been tested in the following browsers

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.


Downloads  
You can download the complete source code in VB.Net and C# using the download link provided below
DynamicTextBoxesusingJavaScript.zip