[RESOLVED]Alert doesn't fire on change event

The alert doesn’t fire when I click various options

<head runat="server">
    <title></title>
    <script type ="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#Field2Query").change(function () {
                var isChecked = $(‘#Field2Query’).is(‘:checked’);
                if (isChecked) { alert("Test"); }
            });
        });
   
  </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    <asp:RadioButtonList ID="Field2Query" runat="server"
        RepeatDirection="Horizontal" RepeatLayout="Flow">
        <asp:ListItem Selected="True" Text="Description" Value="wi.item_description" />
        <asp:ListItem Text="Stock Number" Value="wi.stock_number" />
        <asp:ListItem Text="Part Number" Value="wi.part_number" />
        <asp:ListItem Text="FIC" Value="wi.FIC" />
    </asp:RadioButtonList>
    </form>
</body>
</html>

I guess you are trying to check if any items are selected in Radiobuttonlist using the above code.if that is the case then you can use the below code to acheive that functionality.

<script type="text/javascript">
        $(document).ready(function () {
            $("#Field2Query").change(function () {
                //Get the length of items selected in radiobuttonlist
                var cnt = $("#Field2Query :radio:checked").length;
                //Check if any items are selected in radiobutton list
                if (cnt == 0) {
                    //Show the message
                    alert("Please select an items");
                }
                else {
                    //Show the message
                    alert("Your have selected an item");
                }
            });
        });
    </script>

Complete Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#Field2Query").change(function () {
                //Get the length of items selected in radiobuttonlist
                var cnt = $("#Field2Query :radio:checked").length;
                //Check if any items are selected in radiobutton list
                if (cnt == 0) {
                    //Show the message
                    alert("Please select an items");
                }
                else {
                    //Show the message
                    alert("Your have selected an item");
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:RadioButtonList ID="Field2Query" runat="server" RepeatDirection="Horizontal"
        RepeatLayout="Flow">
        <asp:ListItem Selected="True" Text="Description" Value="wi.item_description" />
        <asp:ListItem Text="Stock Number" Value="wi.stock_number" />
        <asp:ListItem Text="Part Number" Value="wi.part_number" />
        <asp:ListItem Text="FIC" Value="wi.FIC" />
    </asp:RadioButtonList>
    </form>
</body>
</html>

This is occurring because a RadioButtonList is going to generate a <table> element with the ID that you are looking for. What you’ll want to do is actually check for any checked elements that appear below your element instead :

$(function () {
    $("#<%= Field2Query.ClientID %> :radio").change(function () {
        // This will check if any of your radio elements under that area are checked
        var isChecked = $("#<%= Field2Query.ClientID %> :radio:checked").length > 0);
        if (isChecked) { alert("Test"); }
    });
});

Hi davelewicki,

Thanks for your post.

You could modify your code as below to resolve your problem.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../../Scripts/jquery-1.8.2.js"></script>
    <script>
        $(function () {
            $("#Field2Query").change(function () {
                var isChecked = $('#Field2Query :radio').is(':checked');

                if (isChecked) {
                    alert("Test");
                }
            })
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:RadioButtonList ID="Field2Query" runat="server"
                RepeatDirection="Horizontal" RepeatLayout="Flow">
                <asp:ListItem Selected="True" Text="Description" Value="wi.item_description" />
                <asp:ListItem Text="Stock Number" Value="wi.stock_number" />
                <asp:ListItem Text="Part Number" Value="wi.part_number" />
                <asp:ListItem Text="FIC" Value="wi.FIC" />
            </asp:RadioButtonList>
        </div>
    </form>
</body>
</html> 

Regarding this issue, please post back freely.

Best Regards,

Fei Han

Leave a Reply