In this article I will explain with an example, how to add and remove
TextBoxes dynamically using
JavaScript in ASP.Net with C# and VB.Net.
HTML Markup
The HTML Markup consists of following elements and controls:
Elements
Button – For adding dynamic
TextBoxes using
JavaScript.
The
Button has been assigned with a
JavaScript onclick event handler.
div – For displaying the dynamic TextBoxes.
Controls
Button – For submitting the Form.
The Button has been assigned with an OnClick event handler.
<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" />
Namespaces
You will need to import the following namespace.
C#
using System.Web.Script.Serialization;
VB.Net
Imports System.Web.Script.Serialization
Server Side operation
Fetching the values of dynamic TextBoxes created using JavaScript
In the Code-Behind, first a protected String array property (Values) is created.
Note: This property will be used to recreate the dynamic TextBoxes after PostBack on Client Side using the
RecreateDynamicTextboxes JavaScript function (discussed later).
When the Post Button is clicked, dynamic TextBox values are fetched from the Request.Form collection into a String array.
Then, the String array is serialized using the Serialize method of the JavaScriptSerializer class and assigned to the Values property.
Displaying the values of dynamic TextBoxes created using JavaScript
A FOR EACH loop is executed over the String array and value of each dynamic TextBox is concatenated into a String variable.
Finally, the
RegisterClientScriptBlock method is used to display the values of the dynamic TextBoxes using
JavaScript Alert Message Box.
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
Creating dynamic TextBox using JavaScript
GetDynamicTextBox
Inside the
GetDynamicTextBox JavaScript function, it returns an HTML string of
TextBox and
Button which will be used to append to the container HTML DIV.
AddTextBox
Inside the
AddTextBox JavaScript function, it creates an HTML DIV element with a
TextBox and a
Button (to remove the
TextBox) and then appends it to the Container HTML 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
Inside the
RemoveTextBox JavaScript function, it simply removes the dynamically added
TextBox associated with the
Button that was clicked.
RecreateDynamicTextboxes
Inside the
JavaScript window.onload function, the
RecreateDynamicTextboxes function is called.
Inside the
RecreateDynamicTextboxes JavaScript function, the property
Value is converted into a
JSON array.
Then, a check is performed if the value is NOT NULL. Then, the FOR loop is executed where the GetDynamicTextBox function is executed and the TextBox is added to the container of 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>
Screenshot
![Create dynamic TextBox using JavaScript in ASP.Net]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
