Tuesday, July 30, 2013

JQuery Radiobutton Validation

Jquery Radiobutton Validation:
<asp:RadioButton Text="Male" value="M" ID="rbM" runat="server" GroupName="g"/>

<asp:RadioButton Text="Female" value="F" ID="rbF" runat="server" GroupName="g" />

<asp:Button Text="Submit" runat="server" ID="btn" />

JQUERY
$(document).ready(function () {

   $("#<%=btn.ClientID%>").click(function () {

if ($("input[id='rbM']").is(":checked") == false &&        $("input[id='rbF']").is(":checked") == false){
alert("Please select an option!");
}
           
});

});

Getting Text and Value
$(document).ready(function () {

            $("#<%=btn.ClientID%>").click(function () {

                if ($("input[id='rbM']").is(":checked") == true) {

                    alert("Text: " + $("input[id='rbM']").next().text());
                    alert("Value: " + $("input[id='rbM']").val());

                }
                else if ($("input[id='rbF']").is(":checked") == true) {

                    alert("Text: " + $("input[id='rbF']").next().text());
                    alert("Value: " + $("input[id='rbF']").val());

                }
                else {
                    alert("Please select an option!");
                }
            });

        });
       


JQuery validation for asp.net radiobuttonlist
 RadiobuttonList:
<asp:RadioButtonList runat="server" ID="Intent">
        <asp:ListItem Value="Confirm">Yes!</asp:ListItem>
        <asp:ListItem Value="Postpone">Not now</asp:ListItem>
        <asp:ListItem Value="Decline">Never!</asp:ListItem>
    </asp:RadioButtonList>


 JQuery:
$(document).ready(function () {

            $("#<%=btn.ClientID%>").click(function () {

                var $rbvalue = $("input[name='<%=Intent.UniqueID%>']:radio:checked");

                if ($rbvalue.length > 0) {

                    alert("Text: " + $rbvalue.next().text());
                    alert("Value: " + $rbvalue.val());
                }
                else {
                    alert("Please select an option!");
                }

            });
        });

Another way:
 JQuery:
$(document).ready(function () {
            var ischecked = false;
            $("#<%=btn.ClientID%>").click(function () {

                $("input[name='<%=Intent.UniqueID%>']").each(function () {
                    if (this.checked) {
                        ischecked = true;
                    }

                });

                if (ischecked) {
                    var $rbvalue = $("input[name='<%=Intent.UniqueID%>']:radio:checked");
                    alert("Text: " + $rbvalue.next().text());
                    alert("Value: " + $rbvalue.val());


                }
                else {
                    alert("Please select an Option!");
                }


            });

        });


Radiobutton onclick:
$('input:radio').click(function () {
            //        alert($('input:radio:checked + label').text());
            alert("Value: " + $(this).val());
            alert("Text: " + $(this).next().text());

        });