Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 585
  • Last Modified:

Retrieve Value from Radiobuttons within a Datalist

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
karlblackburn
Asked:
karlblackburn
  • 9
  • 9
1 Solution
 
karlblackburnAuthor Commented:
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
 
Akin DeluI’m a software engineer, tech enthusiast and UI/UX lover. Commented:
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Akin DeluI’m a software engineer, tech enthusiast and UI/UX lover. Commented:
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
 
karlblackburnAuthor Commented:
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
 
Akin DeluI’m a software engineer, tech enthusiast and UI/UX lover. Commented:
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
 
karlblackburnAuthor Commented:
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
 
Akin DeluI’m a software engineer, tech enthusiast and UI/UX lover. Commented:
put the javascript after the closing html tag.
0
 
karlblackburnAuthor Commented:
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
 
Akin DeluI’m a software engineer, tech enthusiast and UI/UX lover. Commented:
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
 
karlblackburnAuthor Commented:
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
 
Akin DeluI’m a software engineer, tech enthusiast and UI/UX lover. Commented:
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
 
karlblackburnAuthor Commented:
I have done this, no javascript calls from inside the datalist seem to work, but anything outside works fine.
0
 
Akin DeluI’m a software engineer, tech enthusiast and UI/UX lover. Commented:
hmmmmm, strange post the html code generate by the browser.
0
 
karlblackburnAuthor Commented:
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
 
Akin DeluI’m a software engineer, tech enthusiast and UI/UX lover. Commented:
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
 
karlblackburnAuthor Commented:
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
 
karlblackburnAuthor Commented:
This solved the problem, it now fires aswell

            rdbEE.Attributes.Add("onClick", "javascript:checkOne('" & e.Item.ClientID & "_rdbEE');CallMe()")
0
 
Akin DeluI’m a software engineer, tech enthusiast and UI/UX lover. Commented:
wooo, nice its good you solved it, thanks for sharing

happy coding
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 9
  • 9
Tackle projects and never again get stuck behind a technical roadblock.
Join Now