Introduction: In this article i am going to explain How to validate items in asp.net RadioButtonList control using jQuery.
In previous articles i explained the Example to validate asp.net CheckBoxList using jQuery and Validate DropDownList using jQuery and Best example to implement stylish jQuery form validations and jQuery to enlarge thumbnail image in slider on mouse over and Show jQuery tooltip message on mouse over and Show image preview before uploading through fileupload control using jQuery .
Description: In this example i have added static items in the RadioButtonList control. You can also Bind/Fill/Load RadioButtonList with the dynamic data i.e. data from the Sql server database with the help of my article "How to Bind RadioButtonList from Sql server"
Implementation: Let's create an asp.net example website to see it in action.
You can also read my article "How to enable JavaScript in asp.net using C#,VB.Net" to get the detailed knowledge
Now over to you:
Description: In this example i have added static items in the RadioButtonList control. You can also Bind/Fill/Load RadioButtonList with the dynamic data i.e. data from the Sql server database with the help of my article "How to Bind RadioButtonList from Sql server"
Implementation: Let's create an asp.net example website to see it in action.
- In the <HEAD> tag of the design page(.aspx) write the following
<title>Validate Asp.Net RadioButtonList using jQuery</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script type="text/javascript"
language="javascript">
$(document).ready(function () {
$('#btnSubmit').click(function
() {
if ($('#rblReligion
:radio:checked').length > 0) {
return true;
}
else {
alert('Please select your religion')
return false;
}
})
})
</script>
<noscript> <h3 style="color: #FF3300;">
Javascript is not currently enabled in your browser.<br /> You must <a href="http://support.google.com/bin/answer.py?hl=en&answer=23852" target="_blank">enable Javascript </a> to run this web page correctly.
</h3></noscript>
- In the <BODY> tag of the design page (default.aspx) place a RadioButtonList control, Label and a Button control. Add some items in the RadioButtonList control as:
<fieldset style="width:300px;">
<legend>Validate asp.net RadioButtonList using jQuery</legend>
<table>
<tr>
<td>Select
Religion: </td>
<td>
<asp:RadioButtonList ID="rblReligion" runat="server" RepeatColumns="2" RepeatDirection="Horizontal">
<asp:ListItem Text="Hindu"
Value="1"></asp:ListItem>
<asp:ListItem Text="Sikh" Value="2"></asp:ListItem>
<asp:ListItem Text="Muslim"
Value="2"></asp:ListItem>
<asp:ListItem Text="Others"
Value="3"></asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
<tr>
<td> </td>
<td>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="lblStatus" runat="server" Text="" ForeColor="Green"></asp:Label>
</td>
</tr>
</table>
</fieldset>
Asp.Net C# Code example to validate RadioButtonList using jQuery
- In the code behind file (default.aspx.cs) write the following code on Button’s click event as:
protected void btnSubmit_Click(object sender, EventArgs e)
{
lblStatus.Text
= "You have selected " +
rblReligion.SelectedItem.Text + "
Religion";
}
}
Asp.Net VB Code example to validate RadioButtonList using jQuery
- Design the form same as above in the Asp.net C#. section but replace the line <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" /> with the <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
- In the code behind file (default.aspx.vb) write the following code on Button’s click event as:
Protected Sub btnSubmit_Click(sender As Object, e As EventArgs) Handles btnSubmit.Click
lblStatus.Text = "You
have selected " & rblReligion.SelectedItem.Text & " Religion"
End Sub
End Sub
Note: Have you notice one thing that I have used <noscript> tag in the <Head> section. This is useful in the case if the JavaScript is disabled on the browser running the website. <noscript> tag executes only if the javaScript is disabled in the browser. jQuery can work only if JavaScript is enabled. So this is the way to detect whether JavaScript is disables or enabled and if disabled then showing appropriate message to enable it from the browser’s setting.
You can also read my article "How to enable JavaScript in asp.net using C#,VB.Net" to get the detailed knowledge
- Now run the application and click on submit button without selecting any religion, it will show the alert message “Please select your religion”. If you select any religion then it will show the selected religion in the label control.
Now over to you:
"If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates."
If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..