Using javascript to get the asp radio button list selected value is not an easy job like other asp.net objects. To get the selected value from asp radio button list you have to iterate through all the radio buttons in that set and then read the value for checked radio button. In my previous post i have discussed on DropdownList or ComboBox. So in this post i will try to give you a complete example on how we can read selected value or selected text from Asp RadioButtonList or from HTML input type="radio". So lets start. At first create a new aspx page. In this page i will add one Asp RadioButtonList & one HTML input type="radio" object. Also add two labels to display the Selected Value & Selected Text as well. Our targeted output should be:
The html code for the aspx page should be:
<body>
<form id="form1" runat="server">
<div>
<b>Asp Radio Button List:</b>
<hr />
<asp:RadioButtonList ID="Aspradiobuttonlist" runat="Server" RepeatDirection="vertical" onclick="GetRadioButtonSelectedValue();">
<asp:ListItem Text="Cosmetics" Value="1" Selected="True"></asp:ListItem>
<asp:ListItem Text="Perfume" Value="2"></asp:ListItem>
<asp:ListItem Text="Beauty Soap" Value="3"></asp:ListItem>
<asp:ListItem Text="Sunglasses" Value="4"></asp:ListItem>
</asp:RadioButtonList>
<br />
<asp:Label runat="server" ID="lblAspradiobuttonValue"></asp:Label>
<br/>
<br/>
<br/>
<b>HTML Radio Button List:</b>
<hr />
<input type="radio" name="Category" value="1" checked="checked" onclick="GetHTMLRadioButtonSelectedValue();">Cosmetics<br/>
<input type="radio" name="Category" value="2" onclick="GetHTMLRadioButtonSelectedValue();">Perfume<br/>
<input type="radio" name="Category" value="3" onclick="GetHTMLRadioButtonSelectedValue();">Beauty Soap<br/>
<input type="radio" name="Category" value="4" onclick="GetHTMLRadioButtonSelectedValue();">Sunglasses<br/>
<br />
<asp:Label runat="server" ID="lblHTMLradiobuttonValue"></asp:Label>
</div>
</form>
</body>
<form id="form1" runat="server">
<div>
<b>Asp Radio Button List:</b>
<hr />
<asp:RadioButtonList ID="Aspradiobuttonlist" runat="Server" RepeatDirection="vertical" onclick="GetRadioButtonSelectedValue();">
<asp:ListItem Text="Cosmetics" Value="1" Selected="True"></asp:ListItem>
<asp:ListItem Text="Perfume" Value="2"></asp:ListItem>
<asp:ListItem Text="Beauty Soap" Value="3"></asp:ListItem>
<asp:ListItem Text="Sunglasses" Value="4"></asp:ListItem>
</asp:RadioButtonList>
<br />
<asp:Label runat="server" ID="lblAspradiobuttonValue"></asp:Label>
<br/>
<br/>
<br/>
<b>HTML Radio Button List:</b>
<hr />
<input type="radio" name="Category" value="1" checked="checked" onclick="GetHTMLRadioButtonSelectedValue();">Cosmetics<br/>
<input type="radio" name="Category" value="2" onclick="GetHTMLRadioButtonSelectedValue();">Perfume<br/>
<input type="radio" name="Category" value="3" onclick="GetHTMLRadioButtonSelectedValue();">Beauty Soap<br/>
<input type="radio" name="Category" value="4" onclick="GetHTMLRadioButtonSelectedValue();">Sunglasses<br/>
<br />
<asp:Label runat="server" ID="lblHTMLradiobuttonValue"></asp:Label>
</div>
</form>
</body>
Ok now we have to add two javascript method for Asp RadioButtonList & HTML input type="radio" respectively.
Get Selected Value from Asp RadioButtonList:
<script type="text/javascript">
function GetRadioButtonSelectedValue()
{
var AspRadio = document.getElementsByName('Aspradiobuttonlist');
for (var i = 0; i < AspRadio.length; i++)
{
if (AspRadio[i].checked)
{
var lblAspradiobuttonValue = document.getElementById('<%= lblAspradiobuttonValue.ClientID %>');
lblAspradiobuttonValue.innerHTML='<b>Selected Value:</b> '+AspRadio[i].value+'<br/>';
lblAspradiobuttonValue.innerHTML+='<b>Selected Text:</b> '+AspRadio[i].parentNode.getElementsByTagName('label')[0].innerHTML;
}//end if
}// end for
}//end function
</script>
function GetRadioButtonSelectedValue()
{
var AspRadio = document.getElementsByName('Aspradiobuttonlist');
for (var i = 0; i < AspRadio.length; i++)
{
if (AspRadio[i].checked)
{
var lblAspradiobuttonValue = document.getElementById('<%= lblAspradiobuttonValue.ClientID %>');
lblAspradiobuttonValue.innerHTML='<b>Selected Value:</b> '+AspRadio[i].value+'<br/>';
lblAspradiobuttonValue.innerHTML+='<b>Selected Text:</b> '+AspRadio[i].parentNode.getElementsByTagName('label')[0].innerHTML;
}//end if
}// end for
}//end function
</script>
Get Selected Value from HTML Input Radio:
<script type="text/javascript">
function GetHTMLRadioButtonSelectedValue()
{
var HTMLRadio=document.form1.Category;
for (var i=0; i < HTMLRadio.length; i++)
{
if (HTMLRadio[i].checked)
{
var lblHTMLradiobuttonValue = document.getElementById('<%= lblHTMLradiobuttonValue.ClientID %>');
lblHTMLradiobuttonValue.innerHTML='<b>Selected Value:</b> '+HTMLRadio[i].value+'<br/>';
lblHTMLradiobuttonValue.innerHTML+='<b>Selected Text:</b> '+HTMLRadio[i].parentNode.getElementsByTagName('label')[i].innerHTML;
}// end if
}// end for
} // end function
</script>
function GetHTMLRadioButtonSelectedValue()
{
var HTMLRadio=document.form1.Category;
for (var i=0; i < HTMLRadio.length; i++)
{
if (HTMLRadio[i].checked)
{
var lblHTMLradiobuttonValue = document.getElementById('<%= lblHTMLradiobuttonValue.ClientID %>');
lblHTMLradiobuttonValue.innerHTML='<b>Selected Value:</b> '+HTMLRadio[i].value+'<br/>';
lblHTMLradiobuttonValue.innerHTML+='<b>Selected Text:</b> '+HTMLRadio[i].parentNode.getElementsByTagName('label')[i].innerHTML;
}// end if
}// end for
} // end function
</script>
Script tested for below browsers:
1. Internet Explorer
2. Mozilla Firefox
3. Opera
4. Google Chrome
So now you can read the Selected value or Selected Text from both Asp RadioButtonList & HTML Input Radio by using above javascript method or function.
Posts
0 comments:
Post a Comment