Subscribe
Please visit my new Web Site https://coderstechzone.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>
<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.
7 comments:
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.
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
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.
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.
Please do this in master-content page scenario, where it does not work.
how will i save the selected value to an sql database
To read Radio button value in server side please follow the below code sample:
rdbList.SelectedValue
I WOULD BE DELIGHTED TO HEAR FROM YOU