locked
How to - Dynamically add a ListItem to RadioButtonList using javascript RRS feed

  • Question

  • 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

  • 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