Steven O'Neill
asked on
Radiobuttonlist onclick event
I'm pretty new to .net development but I'm looking to add an onclick event to a radiobuttonlist that will allow me to show hidden divs within a form. So I'm look for:
o Yes o No
If Yes is selected then display hidden div 1/hide hidden div 2 and if No is selected the display hidden div 2/hide hidden div 1. I'd also like the ability to clear any completed info within the hidden divs. Again if a user chooses Yes then all content that may have been completed in hidden div 2 should be cleared and subsequently, if they choose No (they may change their mind) then it should clear eveything within hidden div 1.
Hope this makes sense
Thanx for any advice.
o Yes o No
If Yes is selected then display hidden div 1/hide hidden div 2 and if No is selected the display hidden div 2/hide hidden div 1. I'd also like the ability to clear any completed info within the hidden divs. Again if a user chooses Yes then all content that may have been completed in hidden div 2 should be cleared and subsequently, if they choose No (they may change their mind) then it should clear eveything within hidden div 1.
Hope this makes sense
Thanx for any advice.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
noulouk
Thanx for this. Where on my page should I have your event? Should I add this at the tope of the page within the script to runat server? I've done that but there are a host of errors within the display screen (I'm using Visual Web Developer 2005). Can you perhaps give a complete page for me to see and disect?
Thanx for this. Where on my page should I have your event? Should I add this at the tope of the page within the script to runat server? I've done that but there are a host of errors within the display screen (I'm using Visual Web Developer 2005). Can you perhaps give a complete page for me to see and disect?
use this javascript for radiobutton change
function radiodatechanged()
{
if(document.getElementById ("Radiobut ton1").che cked == true)
{
document.getElementById("t extbox1"). value =""; 'likewise clear all text boxes in div1
document.getElementById("d iv1").visi bility = 'hidden';
document.getElementById("d iv2").visi bility = 'visible';
}
if(document.getElementById ("Radiobut ton2").che cked == true)
{
document.getElementById("t extbox2"). value =""; 'likewise clear all text boxes in div1
document.getElementById("d iv2").visi bility = 'hidden';
document.getElementById("d iv1").visi bility = 'visible';
}
}
and in aspx.vb page, in page load event u have to write this two line to invoke javascript function
Radiobutton1.Attributes.Ad d("onclick ", "radiodatechanged()")
Radiobutton2.Attributes.Ad d("onclick ", "radiodatechanged()")
function radiodatechanged()
{
if(document.getElementById
{
document.getElementById("t
document.getElementById("d
document.getElementById("d
}
if(document.getElementById
{
document.getElementById("t
document.getElementById("d
document.getElementById("d
}
}
and in aspx.vb page, in page load event u have to write this two line to invoke javascript function
Radiobutton1.Attributes.Ad
Radiobutton2.Attributes.Ad
ASKER
The radiobutton is created using the Visual Web Developer tool and appears like this:
<asp:RadioButtonList ID="RadioButtonList3" runat="server" Width="116px" RepeatDirection="Horizonta l">
<asp:ListItem>Yes</asp:Lis tItem>
<asp:ListItem>No</asp:List Item>
</asp:RadioButtonList>
How do I go about adding the ids to the listitem? I can see how to add values, etc but not an id.
Sorry for sounding so dumb but it's a bit different to normal ASP.
Thanx
<asp:RadioButtonList ID="RadioButtonList3" runat="server" Width="116px" RepeatDirection="Horizonta
<asp:ListItem>Yes</asp:Lis
<asp:ListItem>No</asp:List
</asp:RadioButtonList>
How do I go about adding the ids to the listitem? I can see how to add values, etc but not an id.
Sorry for sounding so dumb but it's a bit different to normal ASP.
Thanx
OK, you needed a js function.
RadioButtonList1.Items.Fin dByValue(" Yes").Attr ibutes.Add ("onclick" , "radiodatechanged()");
RadioButtonList1.Items.Fin dByValue(" No").Attri butes.Add( "onclick", "radiodatechanged()");
Something like this.
RadioButtonList1.Items.Fin
RadioButtonList1.Items.Fin
Something like this.
Or RadioButtonList1.Items.Fin dByText("Y es").Attri butes.Add( "onclick", "radiodatechanged()");
ASKER
When I look at the html of my code I see this:
<table id="RadioButtonList3" border="0" style="width:116px;">
<tr>
<td><input id="RadioButtonList3_0" type="radio" name="RadioButtonList3" value="Yes" /><label for="RadioButtonList3_0">Y es</label> </td><td>< input id="RadioButtonList3_1" type="radio" name="RadioButtonList3" value="No" /><label for="RadioButtonList3_1">N o</label>< /td>
</tr>
</table>
So I'm really confused by this...does using this method automatically wrap everything in table tags?
I'm also receiving JS errors on my page as I assume it cannot find the RadioButtonList3 as the error states it's undefined (at the location I place the second last piece of code supplied by noulouk.
<table id="RadioButtonList3" border="0" style="width:116px;">
<tr>
<td><input id="RadioButtonList3_0" type="radio" name="RadioButtonList3" value="Yes" /><label for="RadioButtonList3_0">Y
</tr>
</table>
So I'm really confused by this...does using this method automatically wrap everything in table tags?
I'm also receiving JS errors on my page as I assume it cannot find the RadioButtonList3 as the error states it's undefined (at the location I place the second last piece of code supplied by noulouk.
ASKER
I have the following at the top of my page:
<script language=javascript>
function radiodatechanged()
{
if(document.getElementById ("Radiobut ton1").che cked == true)
{
// document.getElementById("t extbox1"). value =""; 'likewise clear all text boxes in div1
document.getElementById("d iv1").visi bility = 'visible';
document.getElementById("d iv2").visi bility = 'hidden';
document.getElementById("m orepeople" ).visibili ty = 'visible';
}
if(document.getElementById ("Radiobut ton2").che cked == true)
{
// document.getElementById("t extbox2"). value =""; 'likewise clear all text boxes in div2
document.getElementById("d iv1").visi bility = 'hidden';
document.getElementById("d iv2").visi bility = 'visible';
document.getElementById("m orepeople" ).visibili ty = 'visible';
}
}
RadioButtonList3.Items.Fin dByValue(" Yes").Attr ibutes.Add ("onclick" , "radiodatechanged()");
RadioButtonList3.Items.Fin dByValue(" No").Attri butes.Add( "onclick", "radiodatechanged()");
</script>
Within the form I have:
<div style="display: block; visibility: visible; padding-bottom: 10px;">
<strong>Are you in business?</strong>
<asp:RadioButtonList ID="RadioButtonList3" runat="server" Width="116px" RepeatDirection="Horizonta l">
<asp:ListItem>Yes</asp:Lis tItem>
<asp:ListItem>No</asp:List Item>
</asp:RadioButtonList>
</div>
but the HTML displayed is:
<table id="RadioButtonList3" border="0" style="width:116px;">
<tr>
<td><input id="RadioButtonList3_0" type="radio" name="RadioButtonList3" value="Yes" /><label for="RadioButtonList3_0">Y es</label> </td><td>< input id="RadioButtonList3_1" type="radio" name="RadioButtonList3" value="No" /><label for="RadioButtonList3_1">N o</label>< /td>
</tr>
</table>
Any ideas to resolve this are grwaty appreciated.
<script language=javascript>
function radiodatechanged()
{
if(document.getElementById
{
// document.getElementById("t
document.getElementById("d
document.getElementById("d
document.getElementById("m
}
if(document.getElementById
{
// document.getElementById("t
document.getElementById("d
document.getElementById("d
document.getElementById("m
}
}
RadioButtonList3.Items.Fin
RadioButtonList3.Items.Fin
</script>
Within the form I have:
<div style="display: block; visibility: visible; padding-bottom: 10px;">
<strong>Are you in business?</strong>
<asp:RadioButtonList ID="RadioButtonList3" runat="server" Width="116px" RepeatDirection="Horizonta
<asp:ListItem>Yes</asp:Lis
<asp:ListItem>No</asp:List
</asp:RadioButtonList>
</div>
but the HTML displayed is:
<table id="RadioButtonList3" border="0" style="width:116px;">
<tr>
<td><input id="RadioButtonList3_0" type="radio" name="RadioButtonList3" value="Yes" /><label for="RadioButtonList3_0">Y
</tr>
</table>
Any ideas to resolve this are grwaty appreciated.
ASKER
I didn't use the code exactly as laid out but I did use panls to deliver my solution eventually. Thanx guys.
pass the radion button id
function display(rad)
{
var divid1 = document.getElementById('d
var divid2 = document.getElementById('d
if(rad=0)
{
divid1.style.visibility="v
divid2.style.visibility="h
}
else
{
divid2.style.visibility="v
divid1.style.visibility="h
}
}
b u d d h a