Disable radio button after selection but still enable postback

kruegerste
kruegerste used Ask the Experts™
on
Hello,

My issue is that I have a RadioButtonList control that displays a number of radio buttons. There is an onSelectedChange click event attached to them.  I also added a javascript function call before change event which disables them before posting back so user can't multi select.  

The issue is that when I disable the selected button, the postback does not happen.  I'm assuming that cause I disabled the button that triggered the changeEvent postback, it can't see it anymore so the process stops.  

Does anybody know how I can prevent the user from clicking the same radio button multiple times and still trigger an OnSelectedChange click event?  Even if the radio button is already selected, you can click on them continually, triggering a postback for each click.  I have successfully disabled the radio buttons that weren't selected successfully.

Below is a code sample of the rendered html for one of the radio buttons, not sure if it is of any help or not.

Thanks.
<input id="ctl00_mainContent_ctlCartDetail_repCartList_ctl01_ctlWarrantyDetails_lstWarranty_0" type="radio" name="ctl00$mainContent$ctlCartDetail$repCartList$ctl01$ctlWarrantyDetails$lstWarranty" value="W2100,7630,15995,7835" 
onclick="disableWarrantyButtons(this);setTimeout('__doPostBack(\'ctl00$mainContent$ctlCartDetail$repCartList$ctl01$ctlWarrantyDetails$lstWarranty$0\',\'\')', 0)" />

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
On my RadioButtonList control I just setup as a test, it doesn't post back unless you've actually changed the index of the radioButtonList - I can't click the same one over and over.

It's the javascript I think that's causing your button to post back each time.  Try doing it this way instead... something like:

    Protected Sub rblStatus_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles rblStatus.SelectedIndexChanged
        Response.Write(rblStatus.SelectedItem.Text.ToString())
        rblStatus.Enabled = False
    End Sub

It still lets you get the value of the rbl - (as shown in the response.write), but it prevents them from selecting anymore.

Author

Commented:
arhame - I guess I forgot to mention that this list is using asp.net ajax, they are inside an updatePanel.  So why the server side is processing, the page just sits there and I can click that radio button a dozen times which (since asynchronous), calls a dozen postabacks.  

The disabling has to be done client side before I postback to process the Click.  Below is my javascript method which disables them. I can disable all of them except the selected one and everything works fine. As soon as I disable the selected radio button, it just sits there, no postback.
function disableWarrantyButtons(radioControl) {
            var radioControlId, warrantyControlId, warrantyControlList, controlName
            var listControl = null
 
            radioControlId = radioControl.id;
            warrantyControlId = radioControlId.substring(0, radioControlId.length - 2);
            
            //get warranty list table rows
            warrantyControlList = document.getElementById(warrantyControlId).rows;
            
            //loop through each row, grabbing the radio button control
            for (var i = 0; i < warrantyControlList.length; i++) {
                controlName = warrantyControlId + '_' + i;
                listControl = document.getElementById(controlName);
 
                if (listControl.checked != true) {
                    listControl.disabled = true;
                } 
            }
        }

Open in new window

Commented:
by default if the radio buttons are in the same group user can't multi select.
so no extra JavaScript is needed for it.

to disable post backs change the property autoPostbak , and add a button to execute the post back when the user click it.

Regards.

Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
pepepaco - "by default if the radio buttons are in the same group user can't multi select."

this is true that you can't select multiple buttons at one time but you can keep clicking the exact same one that is already clicked.  And when you have a radio button group wrapped with an updatepanel that has a onSelectedIndexChanged click event attached, you can keep clicking the same button which will trigger multiple asynchronous postbacks to server.

In addition, before I disabled the other buttons that weren't selected, you could go back and forth, selecting different ones which would also cause multiple postbacks.  Try it, it works this way, trust me.

So, I have the other buttons disabled on click with js but I can't disable the button already selected cause it won't postback then.  The main issue is that since this is using ajax the user is not redirected to another page, it just sits there while processing so the user can keep clicking until the partial page update re-renders itself.  

I don't want to disable the whole page with some progress bar.  Any ideas out there, this can't be an uncommon issue, pretty basic setup.  

In our case, we use this for adding warranties to products and we have handled it on the backend that multiple warranties won't actually be added to the order if one already exists, but it is still making multiple trips back to the server, could be frustrating to customer.

Please help.

Top Expert 2013

Commented:
Since you are using asp.net AJAX you might want to look into PageRequestManager class ...
Check these:
http://www.dotnetcurry.com/ShowArticle.aspx?ID=227
http://www.asp.net/AJAX/Documentation/Live/tutorials/ExclusiveAsyncPostback.aspx

Author

Commented:
guru_sami - thanks for the suggestions. A little too complex though of a solution for this issue, which seems pretty basic.  I would rather first prevent them from submitting multiple postbacks rather than create something to try to handle or cancel them.  Trying to be proactive in this solution rather than reactive.  

Top Expert 2013
Commented:
Yes the second solution is a bit complicated...here is a sample try this and see if thats working...
code adapted from the first link I provided....you can try

 <script type="text/javascript">
             // Get the instance of PageRequestManager.
             var prm = Sys.WebForms.PageRequestManager.getInstance();
             // Add initializeRequest and endRequest
             prm.add_initializeRequest(prm_InitializeRequest);
             prm.add_endRequest(prm_EndRequest);
             
             // Called when async postback begins
             function prm_InitializeRequest(sender, args) {
                  // Disable listitem that caused a postback
                 //$get(args._postBackElement.id).disabled = true;
                 var rbl = document.getElementById('<%=RadioButtonList1.ClientID %>');
                 rbl.disabled = true;
             }
              // Called when async postback ends
             function prm_EndRequest(sender, args) {
                  // Enable listitem that caused a postback
             //    $get(sender._postBackSettings.sourceElement.id).disabled = false;
             }
         </script>

        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>        
            <asp:RadioButtonList AutoPostBack="true" ID="RadioButtonList1" runat="server"
                onselectedindexchanged="RadioButtonList1_SelectedIndexChanged">
                <asp:ListItem>yes</asp:ListItem>
                <asp:ListItem>no</asp:ListItem>
                <asp:ListItem>I don't know</asp:ListItem>
            </asp:RadioButtonList>  
             <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>        
        </ContentTemplate>
        </asp:UpdatePanel>

-----
protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
        Label1.Text = RadioButtonList1.SelectedValue.ToString();
    }

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial