Remove From My Forums

How to - Dynamically add a ListItem to RadioButtonList using javascript

Question
0

Sign in to vote

User-1792854043 posted

I have a radio button list defined as follows in the xxx.aspx file <asp:RadioButtonList id="rbCalculatedList" runat="server"/>

In javascript (my xxx.js file) I have calculated what the values of the ListItems will be based on answers provided at run time.

I now need to dynamically create those ListItems with their values so that it appears as

<asp:RadioButtonList id="rbCalculatedList" runat="server">

<asp:ListItem Value="first calculated value"></asp:ListItem>
<asp:ListItem Value="second calculated value"></asp:ListItem>
<asp:ListItem Value="third calculated value"></asp:ListItem>

</asp:RadioButtonList>

Once I get this to display correctly, I need to then be able to get the selected item in my xxx.aspx.cs file and use it.

I have tried every thing but cannot get it to work. This is vital - I am new to all of this and am sure there is a solution I just cannot find it. ANY help is appreciated.

Tuesday, September 4, 2018 1:34 PM

All replies

0

Sign in to vote
User475983607 posted

The common convention in ASP Web Forms is to create a data source in the code behind and bind the data source to the RadioButtonList.

If you are building a client side JavaScript application then you must render standard HTML not ASP server control syntax. The following syntax runs on the server and has no meaning on the client.

<asp:RadioButtonList id="rbCalculatedList" runat="server">
Tuesday, September 4, 2018 1:43 PM

User61956409 posted

Hi JH001,

Dynamically add a ListItem to RadioButtonList using javascript

If you'd like to dynamically generate the html that same as asp:RadioButtonList control render in browser using javascript, you can refer to the following code sample.

<body onload="CreateRadioButtonList()">
    <form id="form1" runat="server">
        <div>
            <%--<asp:RadioButtonList ID="rbCalculatedList1" runat="server">

                <asp:ListItem Value="first calculated value"></asp:ListItem>
                <asp:ListItem Value="second calculated value"></asp:ListItem>
                <asp:ListItem Value="third calculated value"></asp:ListItem>
            </asp:RadioButtonList>--%>
            <br />
            <div id="mycontainer">
            </div>
            <br />
            <asp:Label ID="lbl_checked_rdb_val" runat="server" Text=""></asp:Label>
            <asp:HiddenField ID="hf_checked_rdb_val" runat="server" Value="" />
        </div>
    </form>
</body>

JavaScript code:

<script>
    function CreateRadioButtonList() {

        var containerDiv = document.getElementById("mycontainer");

        var table_rdb_list = document.createElement("table");
        table_rdb_list.setAttribute("id", "rbCalculatedList");

        var tbody = document.createElement("tbody");

        var items = ["first calculated value", "second calculated value", "third calculated value"];

        for (var i = 0; i < 3; i++) {
            var tr = document.createElement("tr");

            var td = document.createElement("td");

            var rdb = document.createElement("input");
            rdb.setAttribute("type", "radio");
            rdb.setAttribute("id", "rbCalculatedList_" + i);
            rdb.setAttribute("name", "rbCalculatedList");
            rdb.setAttribute("value", items[i]);

            rdb.onchange = function () {
                GetCheckedVal();
            }

            var lbl = document.createElement("lable");
            lbl.setAttribute("for", "rbCalculatedList_" + i);

            var t = document.createTextNode(items[i]);
            lbl.appendChild(t);

            td.appendChild(rdb);
            td.appendChild(lbl);

            tr.appendChild(td);

            tbody.appendChild(tr);
        }

        table_rdb_list.appendChild(tbody);

        containerDiv.appendChild(table_rdb_list);
    }

    function GetCheckedVal() {
        document.getElementsByName("rbCalculatedList").forEach(function (element) {
            if (element.checked) {

                //alert(element.value);

                document.getElementById("<%= lbl_checked_rdb_val.ClientID %>").innerHTML = element.value;

                //store the checked value in a hidden field control, 
                //and then you can get the value from code behind
                document.getElementById("<%= hf_checked_rdb_val.ClientID %>").value = element.value;
            }
        })
    }
</script>

Test result:

With Regards,

FeI Han

Monday, September 17, 2018 9:51 AM

Asked by:

How to - Dynamically add a ListItem to RadioButtonList using javascript

Question

All replies