RadiobuttonList:
<asp:RadioButtonList ID="RadioButtonList1" runat="server" >
<asp:ListItem Text = "One" Value = "1"></asp:ListItem>
<asp:ListItem Text = "Two" Value = "2"></asp:ListItem>
<asp:ListItem Text = "Three" Value = "3"></asp:ListItem>
</asp:RadioButtonList>
JavaScript function:
<script type = "text/javascript">
function Validate()
{
var RB1
= document.getElementById("<%=RadioButtonList1.ClientID%>");
var radio
= RB1.getElementsByTagName("input");
var isChecked=false;
for (var i=0;i<radio.length;i++)
{
if (radio[i].checked)
{
isChecked=true;
break;
}
}
if(!isChecked)
{
alert("Please
select an item");
}
return isChecked;
}
</script>
Getting
SelectedText and SelectedValue
HTML Code
<asp:RadioButtonList
ID="rblHobbies" runat="server"
RepeatDirection="Horizontal"
RepeatColumns="4">
<asp:ListItem Text="Collecting"
Value=""></asp:ListItem>
<asp:ListItem Text="Dancing"
Value=""></asp:ListItem>
<asp:ListItem Text="Games"
Value=""></asp:ListItem>
<asp:ListItem Text="Gardening"
Value=""></asp:ListItem>
<asp:ListItem Text="Reading"
Value=""></asp:ListItem>
<asp:ListItem Text="Sports"
Value=""></asp:ListItem>
<asp:ListItem Text="Technology"
Value=""></asp:ListItem>
<asp:ListItem Text="Writing"
Value=""></asp:ListItem>
</asp:RadioButtonList>
<br />
<asp:Button
Text="Submit" ID="btnHobbies" runat="server"
OnClientClick="return ValidateRBL()" />
<br />
<span
id="spn"></span>
Javascript function
function ValidateRBL() {
var rbl = document.getElementById("<%=rblHobbies.ClientID
%>");
var input =
rbl.getElementsByTagName("input");
var text =
rbl.getElementsByTagName("label");
var message = "";
for (var i = 0; i
< input.length; i++) {
if
(input[i].checked) {
message = text[i].innerHTML;
document.getElementById("spn").innerHTML = "Your Hobby is:
" + message;
return false;
}
}
if (message == "") {
alert("Please
select your hobby!");
}
return false;
}
Note: To get the value,
we can use: message = input[i].value;
Javascript function: We can also use
nextSibling property:
function ValidateRBL() {
var rbl = document.getElementById("<%=rblHobbies.ClientID
%>");
var input =
rbl.getElementsByTagName("input");
var message = "";
for (var i = 0; i <
input.length; i++) {
if (input[i].checked) {
message =
input[i].nextSibling.innerHTML;
document.getElementById("spn").innerHTML
= "Your Hobby is: " + message;
return false;
}
}
if (message == "") {
alert("Please select your
hobby!");
}
return false;
}
Rendering of RadioButtonList
<table
id="MainContent_rblHobbies">
<tbody>
<tr>
<td>
<input id="MainContent_rblHobbies_0" type="radio"
name="ctl00$MainContent$rblHobbies"
value=""><label for="MainContent_rblHobbies_0">Collecting</label>
</td>
<td>
<input id="MainContent_rblHobbies_1" type="radio"
name="ctl00$MainContent$rblHobbies"
value=""><label for="MainContent_rblHobbies_1">Dancing</label>
</td>
<td>
<input id="MainContent_rblHobbies_2" type="radio"
name="ctl00$MainContent$rblHobbies"
value=""><label
for="MainContent_rblHobbies_2">Games</label>
</td>
<td>
<input id="MainContent_rblHobbies_3" type="radio"
name="ctl00$MainContent$rblHobbies"
value=""><label
for="MainContent_rblHobbies_3">Gardening</label>
</td>
</tr>
<tr>
<td>
<input id="MainContent_rblHobbies_4" type="radio"
name="ctl00$MainContent$rblHobbies"
value=""><label
for="MainContent_rblHobbies_4">Reading</label>
</td>
<td>
<input id="MainContent_rblHobbies_5" type="radio"
name="ctl00$MainContent$rblHobbies"
value=""><label
for="MainContent_rblHobbies_5">Sports</label>
</td>
<td>
<input id="MainContent_rblHobbies_6" type="radio"
name="ctl00$MainContent$rblHobbies"
value=""><label
for="MainContent_rblHobbies_6">Technology</label>
</td>
<td>
<input id="MainContent_rblHobbies_7"
type="radio" name="ctl00$MainContent$rblHobbies"
value=""><label
for="MainContent_rblHobbies_7">Writing</label>
</td>
</tr>
</tbody>
</table>
Note: By default, asp.net will render the radiobuttonlist in the form of
table.
You can change the render mode of radiobuttonlist by ‘Repeat Layout’
property.
It has 4 options:
1. Table
2. Flow
3. OrderedList
4. UnorderedList
Flow Rendering of radiobuttonlist
<span
id="MainContent_rblHobbies">
<input
id="MainContent_rblHobbies_0" type="radio"
name="ctl00$MainContent$rblHobbies" value="">
<label
for="MainContent_rblHobbies_0">Collecting</label>
<input
id="MainContent_rblHobbies_1" type="radio"
name="ctl00$MainContent$rblHobbies" value="">
<label
for="MainContent_rblHobbies_1">Dancing</label>
<input
id="MainContent_rblHobbies_2" type="radio"
name="ctl00$MainContent$rblHobbies" value="">
<label
for="MainContent_rblHobbies_2">Games</label>
<input
id="MainContent_rblHobbies_3" type="radio"
name="ctl00$MainContent$rblHobbies" value="">
<label
for="MainContent_rblHobbies_3">Gardening</label><br>
<input id="MainContent_rblHobbies_4"
type="radio" name="ctl00$MainContent$rblHobbies"
value="">
<label
for="MainContent_rblHobbies_4">Reading</label>
<input
id="MainContent_rblHobbies_5" type="radio"
name="ctl00$MainContent$rblHobbies" value="">
<label
for="MainContent_rblHobbies_5">Sports</label>
<input
id="MainContent_rblHobbies_6" type="radio"
name="ctl00$MainContent$rblHobbies" value="">
<label
for="MainContent_rblHobbies_6">Technology</label>
<input
id="MainContent_rblHobbies_7" type="radio"
name="ctl00$MainContent$rblHobbies" value="">
<label
for="MainContent_rblHobbies_7">Writing</label><br>
</span>
Note: The UnorderedList and OrderedList layouts only support
vertical layout. The UnorderedList and OrderedList layouts do
not support multi-column layouts.
Orderlist Rendering of
radiobuttonlist
<ol
id="MainContent_rblHobbies">
<li>
<input id="MainContent_rblHobbies_0" type="radio"
name="ctl00$MainContent$rblHobbies" value="">
<label
for="MainContent_rblHobbies_0">Collecting</label></li>
<li>
<input id="MainContent_rblHobbies_1" type="radio"
name="ctl00$MainContent$rblHobbies" value="">
<label
for="MainContent_rblHobbies_1">Dancing</label></li>
<li>
<input id="MainContent_rblHobbies_2" type="radio"
name="ctl00$MainContent$rblHobbies" value="">
<label
for="MainContent_rblHobbies_2">Games</label></li>
<li>
<input id="MainContent_rblHobbies_3" type="radio"
name="ctl00$MainContent$rblHobbies" value="">
<label
for="MainContent_rblHobbies_3">Gardening</label></li>
<li>
<input id="MainContent_rblHobbies_4" type="radio"
name="ctl00$MainContent$rblHobbies" value="">
<label
for="MainContent_rblHobbies_4">Reading</label></li>
<li>
<input id="MainContent_rblHobbies_5" type="radio"
name="ctl00$MainContent$rblHobbies" value="">
<label
for="MainContent_rblHobbies_5">Sports</label></li>
<li>
<input id="MainContent_rblHobbies_6" type="radio"
name="ctl00$MainContent$rblHobbies" value="">
<label
for="MainContent_rblHobbies_6">Technology</label></li>
<li>
<input id="MainContent_rblHobbies_7" type="radio"
name="ctl00$MainContent$rblHobbies" value="">
<label
for="MainContent_rblHobbies_7">Writing</label></li>
</ol>
UnOrderlist Rendering of
radiobuttonlist
<ul
id="MainContent_rblHobbies">
<li>
<input id="MainContent_rblHobbies_0" type="radio"
name="ctl00$MainContent$rblHobbies" value="">
<label
for="MainContent_rblHobbies_0">Collecting</label></li>
<li>
<input id="MainContent_rblHobbies_1" type="radio"
name="ctl00$MainContent$rblHobbies" value="">
<label
for="MainContent_rblHobbies_1">Dancing</label></li>
<li>
<input id="MainContent_rblHobbies_2" type="radio"
name="ctl00$MainContent$rblHobbies" value="">
<label
for="MainContent_rblHobbies_2">Games</label></li>
<li>
<input id="MainContent_rblHobbies_3" type="radio"
name="ctl00$MainContent$rblHobbies" value="">
<label
for="MainContent_rblHobbies_3">Gardening</label></li>
<li>
<input id="MainContent_rblHobbies_4" type="radio"
name="ctl00$MainContent$rblHobbies" value="">
<label
for="MainContent_rblHobbies_4">Reading</label></li>
<li>
<input id="MainContent_rblHobbies_5" type="radio"
name="ctl00$MainContent$rblHobbies" value="">
<label
for="MainContent_rblHobbies_5">Sports</label></li>
<li>
<input id="MainContent_rblHobbies_6" type="radio"
name="ctl00$MainContent$rblHobbies" value="">
<label
for="MainContent_rblHobbies_6">Technology</label></li>
<li>
<input id="MainContent_rblHobbies_7" type="radio"
name="ctl00$MainContent$rblHobbies" value="">
<label
for="MainContent_rblHobbies_7">Writing</label></li>
</ul>
No comments:
Post a Comment