Dynamically add TextBoxes based on DropDownList value in jQuery

Last Reply 8 months ago By pandeyism

Posted 8 months ago

can somewhere share the code as how to add textboxes dynamically when user selects the number of textboxes to be added from the drop down list that number of textboxes should be displayed using JQUERY and also save the text entered in those textboxes in the database.

 

Need it urgently.

You are viewing reply posted by: pandeyism 8 months ago.
Posted 8 months ago

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