Dynamically create and add rows with TextBox and DropDownList using JavaScript or jQuery

zzz

SOLVED CLOSED ACTIVE ANSWERED
User: zzz
Posted: on Sep 08, 2015 04:46 AM
Forum: JavaScript
Answer: 1
Views: 11368

Hello I have combined the two articles here, http://www.aspforums.net/Threads/160920/Get-value-of-dynamically-created-DropDownList-on-Client-Side-using-jQuery-in-ASPNet/ http://www.aspforums.net/Threads/207154/Dynamically-add-Two-TextBoxes-on-Button-Click-using-JavaScript/ But when I click the remove of textbox it removes all dropdownlist. How can I solve it?

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnAdd").bind("click", function () {
                var div = $("<div />");
                div.html(AddDDL());
                div.html(GetDynamicTextBox(''));
                $("#TextBoxContainer").append(div);
            });

            $("#btnGet").bind("click", function () {
                var values = "";
                $("input[name=DynamicTextBox]").each(function () {
                    values += $(this).val() + "\n";
                });
                alert(values);
            });

            $("body").on("click", ".remove", function () {
                $(this).closest("div").remove();
                var ddlId = $('[id*=hfDDLId]').val();
                $('[id$=ddl' + parseInt(ddlId) + ']').remove();
                $('[id*=hfDDLId]').val(parseInt($('[id*=hfDDLId]').val()) - 1);
                var previousDropDownId = $('[id*=hfDropDownIds]').val();
                if (previousDropDownId != '') {
                    var Ids = previousDropDownId.split(',');
                    Ids = $.grep(Ids, function (Id) {
                        return Id != parseInt(ddlId);
                    });
                    var resultIds = Ids.join(',');
                    $('[id*=hfDropDownIds]').val(resultIds);
                }
            });
        });

        function AddDDL() {
            var Id = parseInt($('[id*=hfDDLId]').val()) + 1;
            var ddlId = "ddl" + (Id);
            //var optionList = [1, 2, 3, 4, 5];
            //$('[id*=div1]').append(getDropDownList(ddlId, ddlId, optionList));
            $("#TextBoxContainer").append(getDropDownList(ddlId, ddlId));
            $('[id*=hfDDLId]').val(Id);

            var previousDropDownId = $('[id*=hfDropDownIds]').val();
            if (previousDropDownId != '') {
                $('[id*=hfDropDownIds]').val(previousDropDownId + ',' + Id);
            } else {
                $('[id*=hfDropDownIds]').val(Id);
            }
            return false;
        }

        function getDropDownList(name, id) {
            var combo = $("<select></select>").attr("id", id).attr("name", name).attr("runat", "server").attr("class", "class").attr("required", "required");
            //$.each(optionList, function (i, el) {
            combo.append("<option value=" + "" + ">" + "Select Category" + "</option>");
            combo.append("<option value=" + "1" + ">" + "1" + "</option>");
            combo.append("<option value=" + "2" + ">" + "2" + "</option>");
            combo.append("<option value=" + "3" + ">" + "3" + "</option>");

            //});
            return combo;
        }
        function GetDynamicTextBox(value) {
            return '<input name = "DynamicTextBox" type="text" value = "' + value + '" required/>&nbsp'
            + '<input name = "DynamicTextBox" type="text" value="' + value + '" required/>&nbsp'
            + '<input type="button" value="Remove" class="remove" />'
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="btnAdd" type="button" value="Add" />
        <br />
        <br />
        <div id="TextBoxContainer">
            <!--Textboxes will be added here -->
        </div>
        <br />
         <input type="hidden" id="hfSelectedValue" runat="server" />
    <input type="hidden" id="hfDropDownIds" value="" runat="server" />
        <input id="btnGet" type="button" value="Get Values" />
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </div>
    </form>
</body>
</html>

Shashika...

0 3

Reply
ANSWER
User: Shashikant
Replied: on Sep 09, 2015 03:31 AM
Report

Please refer below code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#btnAdd").bind("click", function () {
                    var div = $("<div />");
                    div.html(AddDDL());
                    div.html(GetDynamicTextBox(''));
                    $("#TextBoxContainer").append(div);
                });

                $("#btnGet").bind("click", function () {
                    var values = "";
                    $("input[name=DynamicTextBox]").each(function () {
                        values += $(this).val() + "\n";
                    });
                    alert(values);
                });

                $("body").on("click", ".remove", function () {
                    var index = $(this).closest("div").index();
                    index = parseInt(index / 2) + 1;
                    $(this).closest("div").remove();
                    var ddlId = index;
                    $('[id$=ddl' + parseInt(ddlId) + ']').remove();
                    var i = 1;
                    var Ids = [];
                    $('[id*=ddl]').each(function () {
                        $(this).attr("id", "ddl" + i);
                        Ids.push(i);
                        i++;
                    });
                    $('[id*=hfDDLId]').val(parseInt($('[id*=hfDDLId]').val()) - 1);
                    var resultIds = Ids.join(',');
                    $('[id*=hfDropDownIds]').val(resultIds);
                });
            });

            function AddDDL() {
                var Id = parseInt($('[id*=hfDDLId]').val()) + 1;
                var ddlId = "ddl" + (Id);
                //var optionList = [1, 2, 3, 4, 5];
                //$('[id*=div1]').append(getDropDownList(ddlId, ddlId, optionList));
                $("#TextBoxContainer").append(getDropDownList(ddlId, ddlId));
                $('[id*=hfDDLId]').val(Id);

                var previousDropDownId = $('[id*=hfDropDownIds]').val();
                if (previousDropDownId != '') {
                    $('[id*=hfDropDownIds]').val(previousDropDownId + ',' + Id);
                } else {
                    $('[id*=hfDropDownIds]').val(Id);
                }
                return false;
            }

            function getDropDownList(name, id) {
                var combo = $("<select></select>").attr("id", id).attr("name", name).attr("runat", "server").attr("class", "class").attr("required", "required");
                //$.each(optionList, function (i, el) {
                combo.append("<option value=" + "" + ">" + "Select Category" + "</option>");
                combo.append("<option value=" + "1" + ">" + "1" + "</option>");
                combo.append("<option value=" + "2" + ">" + "2" + "</option>");
                combo.append("<option value=" + "3" + ">" + "3" + "</option>");

                //});
                return combo;
            }
            function GetDynamicTextBox(value) {
                return '<input name = "DynamicTextBox" type="text" value = "' + value + '" required/>&nbsp'
            + '<input name = "DynamicTextBox" type="text" value="' + value + '" required/>&nbsp'
            + '<input type="button" value="Remove" class="remove" />'
            }
        </script>
        <input id="btnAdd" type="button" value="Add" />
        <br />
        <br />
        <div id="TextBoxContainer">
            <!--Textboxes will be added here -->
        </div>
        <br />
        <input type="hidden" id="hfSelectedValue" runat="server" />
        <input type="hidden" id="hfDropDownIds" value="" runat="server" />
        <input id="btnGet" type="button" value="Get Values" />
        <input type="hidden" id="hfDDLId" value="0" />
    </div>
    </form>
</body>
</html>

Demo

I hope this will help you out.

Dynamically create and add rows with TextBox and DropDownList using JavaScript or jQuery

Company

Explore

Follow us

Contact Us