How do I display a client side confirmation popup Asp.Net RadioButton click?-CodePudding

I have a standard Asp.Net page which contains an asp:RadioButton I would like to intercept the radio button click event and display a (jquery?) warning popup dialog.

If the user select "Yes/OK", the button gets selected. If the user selects "No/Cancel", the selection in the radiogroup doesn't change.

I would like to do this on the client side, preferably using jquery. How do I do this?

Here is a sample code snippet:

<div>
  <asp:RadioButton ID="rbtn1" runat="server" GroupName="Group1" Text="Button1" OnClick="ConfirmClick()"/>
  <asp:RadioButton ID="rbtnN2" runat="server" GroupName="Group1" Text="Button2" OnClick="ConfirmClick()" />
</div>

 <script language="javascript" type="text/javascript">
  function ConfirmClick() {
     // Warn user - OK -Selects button; Cancel ignores button click
  }
</script>

CodePudding user response：

something like this should work:

        <div>
            <asp:RadioButton ID="rbtn1" runat="server" GroupName="Group1" Text="Yes"
                OnClick="ConfirmClick(this)"  ClientIDMode="Static"/>

            <asp:RadioButton ID="rbtnN2" runat="server" GroupName="Group1" Text="No" 
                OnClick="ConfirmClick(this)" ClientIDMode="Static" />
        </div>

        <script language="javascript" type="text/javascript">
            function ConfirmClick(btn) {
                // Warn user - OK -Selects button; Cancel ignores button click
                b1 = $('#rbtn1')
                b2 = $('#rbtnN2')
                if (btn.id == "rbtnN2") {
                    b = confirm('Do you really want this 2nd selection')
                    if (b) {
                        b2.prop("checked", true)
                    }
                    else {
                        b1.prop("checked",true)
                    }
                }
            }
        </script>

I tend to like/use a RadioButton list, but as such, it will quite much spit out what you have.

It is possible in place of using a built-in confirm (), you could pop up a jquery.UI dialog, but above is a start.