locked
Radio Buttons not checkable RRS feed

  • Question

  • User1120190316 posted

    My webforms app includes a user control that uses a pair of radio buttons to enable a user to select either "Enter a new task", which causes a text box to display, or "Or select an existing task", which causes a listbox to display. I use jQuery to show and hide a textbox and listbox and this works with no problem.

    My problem is with the radio buttons themselves. rdoNew always remains checked and rdoExisting unchecked regardless of clicking on either of them, although the two radio buttons have the same GroupName, "NewOrExisting". I have tried including the lines of javascript that are commented out, and I tried removing the "checked" attributes from the markup. No improvement. My question, of course, is how can I get these radio buttons to behave normally?

    <%@ Control Language="VB" AutoEventWireup="false" CodeFile="Pop_Pretask.ascx.vb" Inherits="Pop_Pretask" %>
    <%@ Import Namespace="System.Web.Extensions" %>
    
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
    <%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
        Namespace="System.Web.UI" TagPrefix="ajx" %>
    
         <a href="#" style="display:none;visibility:hidden;" onclick="javascript:return false" id="hidlinkAddPretask" 
        runat="server">dummy</a>
    
        <cc1:ModalPopupExtender ID="mpePretask" runat="server"  PopupControlID="pnlPretask" TargetControlID="hidlinkAddPretask"
             CancelControlID="btnCancelPretask" PopupDragHandleControlID="lblDragHandlePretask"></cc1:ModalPopupExtender>
    
        <asp:Panel ID="pnlPretask" runat="server" CssClass="popupPanel" Width="40%">
     
            <asp:UpdatePanel ID="updPretask" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
               <ContentTemplate>
    
                       <asp:BulletedList ID="blAllPretasks" runat="server">
                        </asp:BulletedList>
     
                     <asp:HiddenField runat="server" ID="hidPostTaskID" Visible="true" />
                    <asp:HiddenField runat="server" ID="hidGoalID" Visible="true" />
                
                    <h2 runat="server" ID="lblDragHandlePretask" Width="100%">
                         Before <b>"<asp:Label ID="lblAddPretask" runat="server"></asp:Label>"</b> can be completed, I must:
                    </h2>
    
                   <asp:RadioButton ID="rdoNew" GroupName="NewOrExisting" runat="server" AutoPostBack="false"
                        Text="Enter a new task    " onclick="fnNewPretask();return false;" Checked="true"
                        Enabled="true" />
                   <asp:RadioButton ID="rdoExisting" GroupName="NewOrExisting" runat="server"  AutoPostBack="false"
                        Text="Or select an existing task." onclick="fnExistingPretask();return false;" 
                        Checked="false" Enabled="true" />
                   <asp:TextBox id="txtNewPretaskName" runat="server" width="100%" Visible="true"/>
                   <br />
                  <asp:ListBox ID="lboxPretask" runat="server" Width="100%" Height="200px"
                         AutoPostBack="false"
                         SelectionMode="Single"
                        Style="display:none"
                      >
                  </asp:ListBox>
    
               </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="btnAddAnotherPretask" EventName="Click" />
                </Triggers>
            </asp:UpdatePanel>
            
            <asp:UpdateProgress ID="UpdateProgress4" runat="server" DisplayAfter="0">
                <ProgressTemplate>
                    <img src="images/progress.gif" alt="" />&nbsp;Updating...
                </ProgressTemplate>
    
            </asp:UpdateProgress>
    
            <br />
            <asp:Label runat="server" ID="lblErrPretask" Font-Bold="True" ForeColor="Red" />
            
            <asp:Button ID="btnAddAnotherPretask" runat="server" Text="Save and Add Another" />
            <asp:Button ID="btnSavePretask" runat="server" Text="Save" />
            <asp:Button ID="btnCancelPretask" runat="server" Text="Cancel"   OnClientClick="return false;" />
    
        </asp:Panel>
    
        <script type="text/javascript">
    
            function fnNewPretask() {
                //$("#<%=rdoExisting.ClientID%>").attr('checked', false);
                //$("#<%=rdoNew.ClientID%>").attr('checked', true);
                $("#<%=txtNewPretaskName.ClientID %>").show();
                $("#<%=lboxPretask.ClientID %>").hide();
            }
    
            function fnExistingPretask() {
                //$("#<%=rdoNew.ClientID%>").attr('checked', false);
                //$("#<%=rdoExisting.ClientID%>").attr('checked', true);
                $("#<%=txtNewPretaskName.ClientID%>").hide();
                $("#<%=lboxPretask.ClientID %>").show();
            }
    
        </script>

    As the above code shows, the radio buttons are inside a Modal Popup Form which in turn contains an UpdatePanel (which is required so that the listbox can be populated at the server each time the popup is summoned). These complications may be causing the radio buttons to malfunction.

    Thanks in advance for any advice.

    Tuesday, June 16, 2020 2:07 AM

Answers

  • User288213138 posted

    Hi Sheldon,

    My problem is with the radio buttons themselves. rdoNew always remains checked and rdoExisting unchecked regardless of clicking on either of them, although the two radio buttons have the same GroupName, "NewOrExisting". I have tried including the lines of javascript that are commented out, and I tried removing the "checked" attributes from the markup. No improvement. My question, of course, is how can I get these radio buttons to behave normally?

     <asp:RadioButton ID="rdoNew" GroupName="NewOrExisting" runat="server" AutoPostBack="false"
                        Text="Enter a new task    " onclick="fnNewPretask();return false;" Checked="true"
                        Enabled="true" />
                   <asp:RadioButton ID="rdoExisting" GroupName="NewOrExisting" runat="server"  AutoPostBack="false"
                        Text="Or select an existing task." onclick="fnExistingPretask();return false;" 
                        Checked="false" Enabled="true" />

    I tested your code and found that the problem is caused by return false.

    why you want to add a return false after the method?

    The result:

    Best regards,

    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 16, 2020 6:58 AM

All replies

  • User288213138 posted

    Hi Sheldon,

    My problem is with the radio buttons themselves. rdoNew always remains checked and rdoExisting unchecked regardless of clicking on either of them, although the two radio buttons have the same GroupName, "NewOrExisting". I have tried including the lines of javascript that are commented out, and I tried removing the "checked" attributes from the markup. No improvement. My question, of course, is how can I get these radio buttons to behave normally?

     <asp:RadioButton ID="rdoNew" GroupName="NewOrExisting" runat="server" AutoPostBack="false"
                        Text="Enter a new task    " onclick="fnNewPretask();return false;" Checked="true"
                        Enabled="true" />
                   <asp:RadioButton ID="rdoExisting" GroupName="NewOrExisting" runat="server"  AutoPostBack="false"
                        Text="Or select an existing task." onclick="fnExistingPretask();return false;" 
                        Checked="false" Enabled="true" />

    I tested your code and found that the problem is caused by return false.

    why you want to add a return false after the method?

    The result:

    Best regards,

    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 16, 2020 6:58 AM
  • User1120190316 posted

    That was it, Sam.  I deleted those "return false"s, and now the radio buttons function correctly.  I was under the impression that unless I ended with "return false;", the form would post back to the server, which I did not want to happen on clicking the radio buttons.  Thank you very much for your help.

    Tuesday, June 16, 2020 7:24 AM
  • User288213138 posted

    Hi sheldon,

    That was it, Sam.  I deleted those "return false"s, and now the radio buttons function correctly.  I was under the impression that unless I ended with "return false;", the form would post back to the server, which I did not want to happen on clicking the radio buttons.

    You can put return false in the js method.

    Best regards,

    Sam

    Tuesday, June 16, 2020 9:05 AM