Saturday, August 8, 2009

How to read asp radio button list selected value




Please visit my new Web Site WWW.Codedisplay.com



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:




If you are looking for Jquery solution then CLICK HERE.
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>


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>

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>

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.

7 comments:

Anonymous said...

I cannot get his to work in a usercontrol, not sure why but we are using master pages so the javascript cannot go in the head tags because it will throw errors when the user control is not present ( we dynamically load controls ). So when I place it in the user control it doesnt work.

rana said...

I have written another solution using simple javascript & jquery both. Check this out:

http://ranacseruet.blogspot.com/2009/02/get-selected-radio-buttons-value-from.html

win_wizardy said...

hi, when i try this code inside the ContentPlaceHolder page coz i'm using a master template for my website, there's nothing happened, why is that? is there is any other way to do it?.

the code work perfectly with the simple aspx page but give me a problem when i use it inside the ContentPlaceHolder. please point me to the right way. thanks.

Shawpnendu said...

Yes brother every problem has solution.

For serverside issue read the below article:
http://shawpnendu.blogspot.com/2010/02/access-aspnet-master-page-controls-from.html

For javascript read below one:
http://shawpnendu.blogspot.com/2010/02/javascript-to-read-master-page-and.html

Thanks for your query.

Success is 99% Failure.... said...

Please do this in master-content page scenario, where it does not work.

Anonymous said...

how will i save the selected value to an sql database

Shawpnendu said...

To read Radio button value in server side please follow the below code sample:
rdbList.SelectedValue

Want to say something?
I WOULD BE DELIGHTED TO HEAR FROM YOU

Want To Search More?
Google Search on Internet
Subscribe RSS Subscribe RSS
Article Categories
  • Asp.net
  • Gridview
  • Javascript
  • AJAX
  • Sql server
  • XML
  • CSS
  • Free Web Site Templates
  • Free Desktop Wallpapers
  • TopOfBlogs
     
    Free ASP.NET articles,C#.NET,VB.NET tutorials and Examples,Ajax,SQL Server,Javascript,Jquery,XML,GridView Articles and code examples -- by Shawpnendu Bikash