使用JavaScript显示警告消息

Question

I am trying to show a warning message if the users select Yes from the radio button. My issue is that the warning message is only showing Yes but i would like to show Yes and No so the user can select either of them. When they select Yes then i am deleting some records but all that is being done in the code behind. What am i doing wrong here?

<div>

    <asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True" RepeatDirection="Horizontal"
        OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
        <asp:ListItem Value="0">Yes</asp:ListItem>
        <asp:ListItem Value="1" Selected="True">No</asp:ListItem>

    </asp:RadioButtonList>

</div>

here is the javascript

<script type="text/javascript">

    var selectlistId =   document.getElementsByName('<%= RadioButtonList1.ClientID %>');
    selectlist = document.getElementByid(selectlistId);

    selectlist.onchange = function () {
        if (selectlist.options[selectlist.selectedIndex].value == "YES") {
            if (confirm("Are you sure you want to delete?")) {
                __doPostBack(selectlistId, '');
            } else {
                // User selected NO, so change DropDownList back to 0.
                selectlist.selectedIndex = 0;
            }
        }
    };
</script>

Answer 1

postbacks work with .name, not id, try changing to

__doPostBack(selectlist.name, '');

and see if that helps

As for the warning message, you have to attach the event handler to the input elements inside the radio button list. The radio button list itself is a table of options. So off the top of my head, something like this should work

$('#<%=RadioButtonList1.ClientID%> input').click(function(){
    var $rb = $(this);
    if ($rb.val() == "YES"){
        ...
    }
});

EDIT: I added a code sample demonstrating a working confirm box NOT using jquery:

<asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal"
                     OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
    <asp:listitem value="0">Yes</asp:listitem>
    <asp:listitem value="1" selected="True">No</asp:listitem>

</asp:RadioButtonList>


<script>

    (function () {

        //without jquery
        var rbl = document.getElementById('<%=RadioButtonList1.ClientID%>');

        var chks = rbl.getElementsByTagName('input');

        for (var x = 0; x < chks.length; x++) {
            var chk = chks[x];

            chk.onclick = function () {
                var that = this;
                if (that.value == "0") {

                    //selected yes
                    if (confirm("Are you sure?")) {

                        //confirmed yes
                        __doPostBack(rbl.name, '');
                    }
                    else {
                        //confirmed no
                    }
                }
                else {
                    //selected no
                }
            }
        }



    })();

</script>

Answer 2

  <asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True" RepeatDirection="Horizontal" ClientID="static"
    OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
       <asp:ListItem Value="0">Yes</asp:ListItem>
       <asp:ListItem Value="1" Selected="True">No</asp:ListItem>

  </asp:RadioButtonList>

JS

$("#RadioButtonList1").change(function(){

   /// Do what you want

 });

Explanation : You might want to add static ID(ClientID="static") to the asp.net control and then attach an event to that ID.

Answer 3

The confirm dialog only shows yes or cancel. How about using a jquery dialog? This will allow you to change the text in the dialog box for your different options. API documentation is here .