Solved

Retrieve Value from Radiobuttons within a Datalist

Posted on 2010-08-26
19
527 Views
Last Modified: 2012-08-13
Hi,

The usual problem here would be how to select just one radiobutton in a datalist, this I have solved with Javascript and a bit of code, but my problem is how to change a label or show a panel after a radiobutton is selected rather than postback, a good example can be found here - http://carteblanchegreetings.com/shop/me-to-you/tatty-teddy-blue-plush-pencil-case.html - in there gift wrapping bit.

Any help would be appreciatted.

Kind Regards
Karl
0
Comment
Question by:karlblackburn
  • 9
  • 9
19 Comments
 
LVL 14

Expert Comment

by:raja_ind82
ID: 33529413
0
 

Author Comment

by:karlblackburn
ID: 33529464
The below posts are good in some ways, but is there anyway to do it without a postback or button i.e. it detects the radiobutton and updates the labels, shows the panel
0
 
LVL 5

Accepted Solution

by:
Akin Delu earned 500 total points
ID: 33529471
inside your radiobutton tag add the javascript onclick event to it
the call this simple javascript function

function CallMe()
{
     x = document.getElementById("<%= PanelID.ClientID%>");
     x.style.display="";
     x = document.getElementById("<%= LabelID.ClientID%>");
     x.innerHTML="New Content Goes Here";
}
0
 
LVL 5

Expert Comment

by:Akin Delu
ID: 33529482
addition to my previous post.
Your panel tag should have the style="display:none" in it
note don't set it the Visible = "false" leave it as "true"
0
 

Author Comment

by:karlblackburn
ID: 33529563
Hi,

This looks great, excuse my naiveness

function CallMe()
{
     x = document.getElementById("<%= PanelID.ClientID%>"); - Do I have to edit the <% %> to my names or is this being called dynamically

     x.style.display="";
     x = document.getElementById("<%= LabelID.ClientID%>");
     x.innerHTML="New Content Goes Here";
}

and would you have an example of a onClick Command to fire this?

Many Thanks
0
 
LVL 5

Expert Comment

by:Akin Delu
ID: 33529606
x = document.getElementById("<%= PanelID.ClientID%>");
PanelID -- should be the id of your asp panel control, if for instance the panel id is panel1 the code will look like this
x = document.getElementById("<%= panel1.ClientID%>");
0
 

Author Comment

by:karlblackburn
ID: 33529670
Cheers, the code I have implemented is below

function CallMe()
{
    x = document.getElementById("<%= PanelTest.ClientID%>");
     x.style.display="";
     x = document.getElementById("<%= Label1.ClientID%>");
     x.innerHTML = "New Content Goes Here";
}
</script>
_________________________________________________

<asp:Panel ID="PanelTest" runat="server" BackColor="Black" Font-Underline="True" Width="100%" Height="200px" CssClass="panelhide"></asp:Panel>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
_________________________________________________

<asp:RadioButton ID="rdbEE" Runat="server" Text="" GroupName="EE" onClick="CallMe"></asp:RadioButton>
_________________________________________________

with css to hide the DIV in the ouset, it isnt doing anything currently, but I think this is due to the onClick Event... Any ideas?

Apologies for being slightly thick on this one.
0
 
LVL 5

Expert Comment

by:Akin Delu
ID: 33529749
put the javascript after the closing html tag.
0
 

Author Comment

by:karlblackburn
ID: 33530007
To do this I have to put it in the master pafe and this errors with

BC30451: 'PanelTest' is not declared. It may be inaccessible due to its protection level.
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 5

Expert Comment

by:Akin Delu
ID: 33530225
no no no, put it inside the page where the control is create.
i never knew you when using a Master Page.
I guess you are making use of Web User Control
0
 

Author Comment

by:karlblackburn
ID: 33530808
I have done a test using Javascript Alert, it seems because the radiobutton is inside a datalist the onClick Event won't fire. If I put it outside it fires fine.

0
 
LVL 5

Expert Comment

by:Akin Delu
ID: 33531465
try put parenthesis "()" in the method call

<asp:RadioButton ID="rdbEE" Runat="server" Text="" GroupName="EE" onclick="CallMe()"></asp:RadioButton>
that could be the problem.
0
 

Author Comment

by:karlblackburn
ID: 33540571
I have done this, no javascript calls from inside the datalist seem to work, but anything outside works fine.
0
 
LVL 5

Expert Comment

by:Akin Delu
ID: 33541154
hmmmmm, strange post the html code generate by the browser.
0
 

Author Comment

by:karlblackburn
ID: 33541701
I shall just clean it up, but the radiobutton html looks like this - <input id="ctl00_MainContent_DataList10_ctl01_rdbEE" type="radio" name="ctl00$MainContent$DataList10$ctl01$EE" value="rdbEE" onclick="javascript:checkOne(&#39;ctl00_MainContent_DataList10_ctl01_rdbEE&#39;);" /> - with the onClick very different
0
 
LVL 5

Expert Comment

by:Akin Delu
ID: 33542327
from this, it seems you were trying to pass the radiobutton as a parameter to the function "checkOne",
hope your code is like this

<asp:RadioButton ID="rdbEE" Runat="server" Text="" GroupName="EE" onclick="javascript:checkOne(this)"></asp:RadioButton>
if not change it to that, then try again.
0
 

Author Comment

by:karlblackburn
ID: 33542798
I think I have made progress as such, when i get ' out the line below

        If e.Item.ItemType = ListItemType.AlternatingItem OrElse e.Item.ItemType = ListItemType.Item Then
            Dim rdbEE As RadioButton
            rdbEE = CType(e.Item.FindControl("rdbEE"), RadioButton)

            'rdbEE.Attributes.Add("onClick", "javascript:checkOne('" & e.Item.ClientID & "_rdbEE')")

        End If

in the javascript code and add onClick="CallMe()" to the Radio Button it fires the javascript, BUT then it allows you to click all the radiobuttons??
0
 

Author Comment

by:karlblackburn
ID: 33542835
This solved the problem, it now fires aswell

            rdbEE.Attributes.Add("onClick", "javascript:checkOne('" & e.Item.ClientID & "_rdbEE');CallMe()")
0
 
LVL 5

Expert Comment

by:Akin Delu
ID: 33542874
wooo, nice its good you solved it, thanks for sharing

happy coding
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

This article is the result of a quest to better understand Task Scheduler 2.0 and all the newer objects available in vbscript in this version over  the limited options we had scripting in Task Scheduler 1.0.  As I started my journey of knowledge I f…
Deploying a Microsoft Access application in a Citrix environment is not difficult but takes a few steps. However, Citrix system people are often of little help, as they typically know next to nothing about Access. The script provided here will take …
This demo shows you how to set up the containerized NetScaler CPX with NetScaler Management and Analytics System in a non-routable Mesos/Marathon environment for use with Micro-Services applications.
This video demonstrates how to create an example email signature rule for a department in a company using CodeTwo Exchange Rules. The signature will be inserted beneath users' latest emails in conversations and will be displayed in users' Sent Items…

757 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

21 Experts available now in Live!

Get 1:1 Help Now