In this article I will explain how
to validate RadioButtonList using JQuery. We can also validate RadioButtonList
using server side code in asp.net but Jquery is client side scripting so it is fast.
In this article I have also checked that javascript is enable or not in your
browser. If not, then it will ask you to enable javascript in your browser.
In
this example i have added static items in the RadioButtonList control. You can also Bind RadioButtonList with the dynamic data i.e. data from the Sql server database using server side code.
Source Code:
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 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:350px;">
<legend><strong>Validate
asp.net RadioButtonList using jQuery</strong></legend>
<table>
<tr>
<td> </td>
<td>
</td>
</tr>
<tr>
<td>Select
Country: </td>
<td>
<asp:RadioButtonList ID="rblCountry" runat="server" RepeatColumns="2" RepeatDirection="Horizontal">
<asp:ListItem Text="India"
Value="1"></asp:ListItem>
<asp:ListItem Text="USA" Value="2"></asp:ListItem>
<asp:ListItem Text="UK" 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"
BackColor="Maroon"
Font-Bold="True"
ForeColor="White"/>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="lblStatus" runat="server" ForeColor="#993333"></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
<noscript>
tag in the <Head> section 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 it will show appropriate message to enable it from the browser’s
setting.
Now run the application. If no value
will be selected on submit button then it will show the alert message “Please select yourCountry”. If item is selected, then it will show the selected Country in
the label control.
0 comments:
Post a Comment