In this article I will explain with an example, how to add and remove
TextBoxes dynamically using
JavaScript in
ASP.Net using 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 holding 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
FOREACH loop is executed over the String array and value of each dynamic
TextBox is concatenated in 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
Buttonutton which will be used to append to the container
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
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 event handler, the
RecreateDynamicTextboxes 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 executed.
Finally, the
JavaScript is called after the page is loaded in the browser.
<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
