Solved

Radiobuttonlist onclick event

Posted on 2006-11-14
11
1,751 Views
Last Modified: 2008-02-07
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.
0
Comment
Question by:Steven O'Neill
11 Comments
 
LVL 13

Expert Comment

by:jeebukarthikeyan
ID: 17937182
hi,
pass the radion button id

function display(rad)
{
  var divid1    =    document.getElementById('div1');
  var divid2    =    document.getElementById('div2');

  if(rad=0)
  {
    divid1.style.visibility="visible";
    divid2.style.visibility="hidden";
  }
  else
  {
    divid2.style.visibility="visible";
    divid1.style.visibility="hidden";
  }
 
}

b u d d h a
0
 
LVL 9

Accepted Solution

by:
noulouk earned 500 total points
ID: 17937192
Hi  u101440,

Put the SelectedValue of your Yes RadioButton to "Yes".
Then add this event:
protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        if (RadioButtonList1.SelectedValue == "Yes")
        {
            Panel1.Visible = true;
            Panel2.Visible = false;
           // Label1.Text="What you want";
        }
        else
        {
            Panel1.Visible = false;
            Panel2.Visible = true;
        }
    }

No matter if there are some datas inside the panels  : you don't have to clear this text because the panel is not shown.

Hope this helps.
Put a label inside one of your panels  and write what you want when you show the panel.
0
 
LVL 2

Author Comment

by:Steven O'Neill
ID: 17937244
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?
0
 
LVL 6

Expert Comment

by:badalpatel
ID: 17937266
use this javascript for radiobutton change

 function radiodatechanged()
            {  
               
                if(document.getElementById("Radiobutton1").checked == true)
                {
                             document.getElementById("textbox1").value =""; 'likewise clear all text boxes  in div1                      
                             document.getElementById("div1").visibility = 'hidden';  
                             document.getElementById("div2").visibility = 'visible';  
                }
                 if(document.getElementById("Radiobutton2").checked == true)
                {
                             document.getElementById("textbox2").value =""; 'likewise clear all text boxes  in div1                      
                             document.getElementById("div2").visibility = 'hidden';  
                             document.getElementById("div1").visibility = 'visible';  
                }
}

and in aspx.vb page, in page load event u have to write this two line to invoke javascript function

Radiobutton1.Attributes.Add("onclick", "radiodatechanged()")
Radiobutton2.Attributes.Add("onclick", "radiodatechanged()")
0
 
LVL 2

Author Comment

by:Steven O'Neill
ID: 17937305
The radiobutton is created using the Visual Web Developer tool and appears like this:

<asp:RadioButtonList ID="RadioButtonList3" runat="server" Width="116px" RepeatDirection="Horizontal">
    <asp:ListItem>Yes</asp:ListItem>
    <asp:ListItem>No</asp:ListItem>
</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
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 9

Expert Comment

by:noulouk
ID: 17937364
OK, you needed a js function.

RadioButtonList1.Items.FindByValue("Yes").Attributes.Add("onclick", "radiodatechanged()");
RadioButtonList1.Items.FindByValue("No").Attributes.Add("onclick", "radiodatechanged()");

Something like this.
0
 
LVL 9

Expert Comment

by:noulouk
ID: 17937366
Or RadioButtonList1.Items.FindByText("Yes").Attributes.Add("onclick", "radiodatechanged()");
0
 
LVL 2

Author Comment

by:Steven O'Neill
ID: 17937563
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">Yes</label></td><td><input id="RadioButtonList3_1" type="radio" name="RadioButtonList3" value="No" /><label for="RadioButtonList3_1">No</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.
0
 
LVL 2

Author Comment

by:Steven O'Neill
ID: 17937820
I have the following at the top of my page:

<script language=javascript>
 function radiodatechanged()
            {  
               
                if(document.getElementById("Radiobutton1").checked == true)
                {
//                             document.getElementById("textbox1").value =""; 'likewise clear all text boxes in div1                      
                             document.getElementById("div1").visibility = 'visible';  
                             document.getElementById("div2").visibility = 'hidden';  
                             document.getElementById("morepeople").visibility = 'visible';  
                }
                 if(document.getElementById("Radiobutton2").checked == true)
                {
//                             document.getElementById("textbox2").value =""; 'likewise clear all text boxes in div2                      
                             document.getElementById("div1").visibility = 'hidden';  
                             document.getElementById("div2").visibility = 'visible';  
                             document.getElementById("morepeople").visibility = 'visible';  
                }
}

    RadioButtonList3.Items.FindByValue("Yes").Attributes.Add("onclick", "radiodatechanged()");
    RadioButtonList3.Items.FindByValue("No").Attributes.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="Horizontal">
            <asp:ListItem>Yes</asp:ListItem>
            <asp:ListItem>No</asp:ListItem>
        </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">Yes</label></td><td><input id="RadioButtonList3_1" type="radio" name="RadioButtonList3" value="No" /><label for="RadioButtonList3_1">No</label></td>
            </tr>
      </table>

Any ideas to resolve this are grwaty appreciated.
0
 
LVL 2

Author Comment

by:Steven O'Neill
ID: 18128748
I didn't use the code exactly as laid out but I did use panls to deliver my solution eventually. Thanx guys.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

I recently went through the process of creating a Calendar Control of events with the basis of using a database to keep track of the dates that are selectable, one requirement was to have the selected date pop-up in a simple lightbox.  At first this…
ASP.Net to Oracle Connectivity Recently I had to develop an ASP.NET application connecting to an Oracle database.As I am doing it first time ,I had to solve several problems. This article will help to such developers  to develop an ASP.NET client…
Sending a Secure fax is easy with eFax Corporate (http://www.enterprise.efax.com). First, just open a new email message. In the To field, type your recipient's fax number @efaxsend.com. You can even send a secure international fax — just include t…
Internet Business Fax to Email Made Easy - With  eFax Corporate (http://www.enterprise.efax.com), you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, f…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now