locked
Setting RadioButtonList selected button RRS feed

  • Question

  • User1120190316 posted

    I am working on a function that sets the selected radio button in a RadioButtonList, as well as several other controls.  Prior to selecting the radio button, the function executes another function that sets all the controls within the panel to default values.  In the case of radio buttons, it sets all of them to false.  The problem is that once all the radio buttons are set to false, my code is unable to set any of them to true.  The code runs without error, but the radio buttons remain with nothing selected.

    Here is the asp.net for the RadioButtonList:

                        <asp:Panel ID="pnlRecurPeriod" runat="server" Width="100%">
    
                            <h3><asp:Label runat="server" ID="lblRecurHeading" /></h3>
                            <asp:RadioButtonList runat="server" OnClick="javascript:RecurPeriodSelected();" Width="100%" AutoPostBack="false" 
                                    ID="rdlRecurPeriod">
                                <asp:ListItem Value="Y">Yearly (once a year, EX: birthdays, holidays)</asp:ListItem>
                                <asp:ListItem Value="M">Monthly (every __ months, EX: rent, quarterly stockholders meetings)</asp:ListItem>
                                <asp:ListItem Value="W">Weekly (every __ weeks, EX: meetings, therapy sessions, card games)</asp:ListItem>
                                <asp:ListItem Value="D">Daily (every __ days, EX: daily chores, medicines)</asp:ListItem>
                            </asp:RadioButtonList>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="rdlRecurPeriod"
                                ErrorMessage="You must select Yearly, Monthly, Weekly or Daily"
                                SetFocusOnError="True" Width="307px"></asp:RequiredFieldValidator>
                            <br />
                        </asp:Panel>
    
        function clearPanel(ThisDivID) {
    
            var DivID = '#' + ThisDivID;
    
            // Set all textboxes to zero-length string
            $(DivID).find("input[type=text]").val('');
    
            // Set all textareas to zero-length string
            $(DivID).find('input[type=text], textarea').val('');
    
            // Set all checkboxes to unchecked
            $(DivID).find('input[type=checkbox]').each(function () {
                this.checked = false;
            });
    
            //Set all radio buttons to unchecked
            $(DivID).find("input[type=radio]").prop('checked', false);
    
            // Set selectedIndex of each dropdown list to -1
            $(DivID).find("select").prop("selectedIndex", -1);
    
            // Set hidden fields to zero-length string
            $(DivID).find("input[type=hidden]").val("");
        }
    

    I use this function to clear data from several forms in this app, and it has run without problems where there are no radio buttons.  Once the line         $(DivID).find("input[type=radio]").prop('checked', false); executes, subsequent efforts to set the 'checked' property of radio buttons are ignored.
    Here is the function that selects the radio button:

            function GetRecur(node) {
    //Clear pnlRecurPeriod clearPanel('<%=pnlRecurPeriod.ClientID%>');

    . . . // Get the Recur Period var RecPeriod = node.Attributes['RecurPeriod']; //alert('RecPeriod = ' + RecPeriod); var rdl = $("[id*=rdlRecurPeriod] input[value=" + RecPeriod + "]"); // Select RecPeriod in radio button list rdlRecurPeriod alert('RecPeriod = ' + RecPeriod); rdl.attr("checked", true); // Display panel pnlRecurPeriod $('#<%=pnlRecurPeriod.ClientID%>').show(); }

    So, I believe the problem is with that highlighted line of code in clearPanel(), but I don't know how to fix it.  Can somebody set me straight here?  Many thanks in advance.

    Monday, May 3, 2021 7:36 AM

Answers

  • User1535942433 posted

    Hi Sheldon Penner,

    About the problem that you can't select a radio button after unchecked all radio, you could use prop() instead of attr().

    Just like this:

    <script type="text/javascript">
            function rdlSelect(RecPeriod) {
                alert('Entering rdlSelect');
                $('#<%=pnlRecurPeriod.ClientID%>').find("input[type=radio]").prop('checked', false);
                // Select RecPeriod in radio button list rdlRecurPeriod
                var rdl = $("[id*=rdlRecurPeriod] input[value=" + RecPeriod + "]");
                rdl.prop("checked", true);
                // Display panel pnlRecurPeriodk
                $('#<%=pnlRecurPeriod.ClientID%>').show();
                alert('Ran rdlSelect without crashing');
                return false;
            }
        </script>

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, May 6, 2021 8:36 AM

All replies

  • User1535942433 posted

    Hi Sheldon Penner,

    According to your codes,I can't reproduce your problems because you don't post your full codes to us.

    However,I think it's wrong of this line in your codes:

    rdl.attr("checked", true);

    Attr():

    1. .attr( attributeName )
    2. .attr( attributeName, value )

    The attr() method will return checked or undefined. You could use like this:

    .attr("checked","checked");

    More details,you could refer to below article:

    https://api.jquery.com/attr/ 

    Best regards,

    Yijing Sun

    Tuesday, May 4, 2021 3:01 AM
  • User1120190316 posted

    Thank you for your response, Yij Sun.  I'm afraid I did not include code that made my problem clear.

    I have reproduced the problem in a much smaller file which I include in its entirety:

    <%@ Page Language="VB"%>
    <!DOCTYPE html>
    
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>This Is Only A Test</title>
    
        <script src="Scripts/jquery-3.2.1.js" type="text/javascript"></script>
    
    </head>
    
    <body>
        <script src="Scripts/Testing.js"></script>
    
    
        <form runat="server">
    <!-- SELECT RECUR PERIOD -->
    <asp:Panel ID="pnlRecurPeriod" runat="server" Width="100%">
    
    
    
    <asp:RadioButtonList runat="server" Width="100%" AutoPostBack="false" 
            ID="rdlRecurPeriod">
        <asp:ListItem Value="Y">Yearly</asp:ListItem>
        <asp:ListItem Value="M">Monthly</asp:ListItem>
        <asp:ListItem Value="W">Weekly</asp:ListItem>
        <asp:ListItem Value="D">Daily</asp:ListItem>
    </asp:RadioButtonList>
    
        <br /><br />
    
    <asp:Button ID="btnFunction" OnClientClick="rdlSelect('Y')" Text="Click Me" runat="server"/>
    
    </asp:Panel>
    
        </form>
    
    
        <script type="text/javascript">
    
            function rdlSelect(RecPeriod) {
    
                alert('Entering rdlSelect');
    
    $('#<%=pnlRecurPeriod.ClientID%>').find("input[type=radio]").prop('checked', false);
    
                // Select RecPeriod in radio button list rdlRecurPeriod
                var rdl = $("[id*=rdlRecurPeriod] input[value=" + RecPeriod + "]");
                rdl.attr("checked", true);
    
                // Display panel pnlRecurPeriod
                $('#<%=pnlRecurPeriod.ClientID%>').show();
    
                alert('Ran rdlSelect without crashing');
    
                return false;
    
    
    
            }
    
        </script>
    
    </body>
    
    </html>
    

    If you run the file and click the button, it will run the rdlSelect function.  After displaying a message to indicate that the function is running, the next line of code unselects all radio buttons in the panel pnlRecurPeriod.  The followng two lines are supposed to select the radio button whose value matches RecPeriod, which I have set to "Y".  This fails.

    Interestingly,  if I comment out the line that unselects all radio buttons and manually select a radio button other than "Yearly", I find that the function fails on the first attempt, succeeds on the second, and thereafter fails on odd numbered attempts and succeeds on even numbered attempts.  

    My program needs to select any radio button and to clear all selections when necessary.  Any thoughts on how to accomplish this would be appreciated.

    Tuesday, May 4, 2021 7:45 AM
  • User1535942433 posted

    Hi Sheldon Penner,

    About the problem that you can't select a radio button after unchecked all radio, you could use prop() instead of attr().

    Just like this:

    <script type="text/javascript">
            function rdlSelect(RecPeriod) {
                alert('Entering rdlSelect');
                $('#<%=pnlRecurPeriod.ClientID%>').find("input[type=radio]").prop('checked', false);
                // Select RecPeriod in radio button list rdlRecurPeriod
                var rdl = $("[id*=rdlRecurPeriod] input[value=" + RecPeriod + "]");
                rdl.prop("checked", true);
                // Display panel pnlRecurPeriodk
                $('#<%=pnlRecurPeriod.ClientID%>').show();
                alert('Ran rdlSelect without crashing');
                return false;
            }
        </script>

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, May 6, 2021 8:36 AM
  • User1120190316 posted

    That was it!  Thank you very much.

    Thursday, May 6, 2021 9:31 AM