Dynamically add TextBoxes based on DropDownList value in jQuery

Hi himani895,

Please refer below sample.

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        var values = eval('<%=Values%>');
        if (values != null) {
            var html = "";
            $(values).each(function () {
                var div = $("<div />");
                div.html('<input name = "DynamicTextBox" type="text" value = "' + this + '" />');
                $("#divDynamic").append(div);
            });
        }
        $('[id*=ddlNumber]').change(function () {
            $("#divDynamic").empty();
            for (var i = 0; i < $(this).val(); i++) {
                var textbox = $(document.createElement('div')).attr("id", 'divTxt' + i);
                textbox.after().html('<input name = "DynamicTextBox" type="text" />');
                textbox.appendTo("#divDynamic");
            }
        });
    });
</script>
<div>
    <asp:DropDownList ID="ddlNumber" runat="server">
        <asp:ListItem Text="1" Value="1"></asp:ListItem>
        <asp:ListItem Text="2" Value="2"></asp:ListItem>
        <asp:ListItem Text="3" Value="3"></asp:ListItem>
        <asp:ListItem Text="4" Value="4"></asp:ListItem>
    </asp:DropDownList>
    <br />
    <div id="divDynamic">
    </div>
    <br />
    <asp:Button ID="btnSave" runat="server" Text="Save" OnClick="Save" />
</div>

Namespaces

C#

using System.Web.Script.Serialization;
using System.Data.SqlClient;
using System.Configuration;

VB.Net

Imports System.Web.Script.Serialization
Imports System.Data.SqlClient

Code

C#

protected string Values;
protected void Save(object sender, EventArgs e)
{
    string[] textboxValues = Request.Form.GetValues("DynamicTextBox");
    JavaScriptSerializer serializer = new JavaScriptSerializer();
    this.Values = serializer.Serialize(textboxValues);
    foreach (string textboxValue in textboxValues)
    {
        using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["conSting"].ConnectionString))
        {
            using (SqlCommand cmd = new SqlCommand("INSERT INTO Customers (@CustomerId) VALUES(@CustomerId)", con))
            {
                con.Open();
                cmd.Parameters.AddWithValue("@CustomerId", textboxValue);
                cmd.ExecuteNonQuery();
                con.Close();
            }
        }
    }
}

VB.Net

Protected Values As String
Protected Sub Save(ByVal sender As Object, ByVal e As EventArgs)
    Dim textboxValues As String() = Request.Form.GetValues("DynamicTextBox")
    Dim serializer As JavaScriptSerializer = New JavaScriptSerializer()
    Me.Values = serializer.Serialize(textboxValues)
    For Each textboxValue As String In textboxValues
        Using con As SqlConnection = New SqlConnection(ConfigurationManager.ConnectionStrings("conSting").ConnectionString)
            Using cmd As SqlCommand = New SqlCommand("INSERT INTO Customers (@CustomerId) VALUES(@CustomerId)", con)
                con.Open()
                cmd.Parameters.AddWithValue("@CustomerId", textboxValue)
                cmd.ExecuteNonQuery()
                con.Close()
            End Using
        End Using
    Next
End Sub

Screenshot