locked
Change legend dynamically RRS feed

  • Question

  • User-640323567 posted

    Hi,

    How to change legend dynamically(onchange of radio button) without fieldset id?

    for ex: 

    <fieldset aria-label="test1">

    <legend class="section-title">test1</legend>

    </fieldset>

    Thanks for any help!

    Thursday, September 5, 2019 7:57 PM

Answers

  • User665608656 posted

    Hi ASPbun,

    According to your description, if you want to change the content of legend by clicking on different radio buttons, you can use jquery to trigger radiobutton's change event, then change the text of the legend.

    For more details, you could refer to this example:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link href="../Content/bootstrap.min.css" rel="stylesheet" />
        <script src="../Scripts/jquery-3.0.0.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $('#RadioButtonList1 input').change(function () {
                    $(".section-title").text($(this).val());// here i use class selector , you can add id to legend and use id selector to change.
                });
    
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal">
                    <asp:ListItem>AAA</asp:ListItem>
                    <asp:ListItem>BBB</asp:ListItem>
                    <asp:ListItem>CCC</asp:ListItem>
                </asp:RadioButtonList>
                <fieldset aria-label="test1">
                    <legend class="section-title">test1</legend>
                </fieldset>
            </div>
        </form>
    </body>
    </html>
    

    Here is the result :

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 6, 2019 5:08 AM

All replies

  • User475983607 posted

    What do you want to change?  The class?  Content?  Are you looking for a selector?

    Thursday, September 5, 2019 8:21 PM
  • User-640323567 posted

    Sorry, the text of the legend.. from test to something else..

    Thursday, September 5, 2019 8:43 PM
  • User-474980206 posted

    why not add an id?

    anyway we need to know the structure of the webpage, where the radio button is in relation to the fieldset. 

    are you changing the aria-label also?

    Thursday, September 5, 2019 10:35 PM
  • User665608656 posted

    Hi ASPbun,

    According to your description, if you want to change the content of legend by clicking on different radio buttons, you can use jquery to trigger radiobutton's change event, then change the text of the legend.

    For more details, you could refer to this example:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link href="../Content/bootstrap.min.css" rel="stylesheet" />
        <script src="../Scripts/jquery-3.0.0.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $('#RadioButtonList1 input').change(function () {
                    $(".section-title").text($(this).val());// here i use class selector , you can add id to legend and use id selector to change.
                });
    
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal">
                    <asp:ListItem>AAA</asp:ListItem>
                    <asp:ListItem>BBB</asp:ListItem>
                    <asp:ListItem>CCC</asp:ListItem>
                </asp:RadioButtonList>
                <fieldset aria-label="test1">
                    <legend class="section-title">test1</legend>
                </fieldset>
            </div>
        </form>
    </body>
    </html>
    

    Here is the result :

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 6, 2019 5:08 AM