var panelID = "panel_" + $("input").val();
You're problem is the selector; look at it for a second to see why it
won't work (think about what exactly it's selecting). If you want the
value of the button that was clicked, just reference it with 'this',
as in
var panelID = "panel_" + this.value;
or you could use its ID:
var panelID = "panel_" + this.id;
You could wrap it like this:
var panelID = "panel_" + $(this).val(); //or $(this).attr('id')
but it's overkill.
On Oct 29, 3:56 pm, AlChuck <alan.oeh...@alanoehler.com> wrote:
> Hello, I'm new to using jQuery. I was motivated by wanting to put some
> panels on an ASP.NET website which would display additional info if a
> link or button was clicked. I found a simple tutorial and mimicked
> that and it works fine, but uses the specific ID of the hyperlink to
> trigger the action. My page needs a list of items, and if you click on
> one, extra information appears right below the item. So what I want to
> do is capture clicks on any link, read the ID, and then use the ID to
> identify the ID of the related asp:Panel element.
>
> Here's the starting point:
>
> <script type="text/javascript">
> $(function() {
> $("#myButtonID").click(function(evt) {
> evt.preventDefault();
> $('#myPanelID').toggle('fast');
> });
> });
> </script>
>
> If you click on the button rendered thusly:
>
> <input id="myButtonID" type="button" value="Hide/Show" />
>
> The panel with id="myPanelID" is toggled (the CSS defines it so that
> display is set to "none" by default.
>
> But I want a list of these panels and buttons on my page, so I want
> the code to be able to do this for any of the buttons I click.
>
> It also works if instead of the button with the specific ID
> "myButtonID" I change
>
> $("#myButtonID").click(function(evt)
>
> to
>
> $("input").click(function(evt)
>
> My impression is that this will cause the code to trigger if any input
> element on the page is clicked, which is the first step to what I want
> to do. My notion is that I can then get the value of the clicked
> button and use that value to identify which panel to animate.
>
> One of the FAQs on the jQuery site says I can get the value of the
> button thusly:
>
> var mybuttonval = $("input").val();
>
> Then I could use a simple naming convention and use that value to
> identify the Panel I want to animate. For example, if my button had
> the value "ACME_widget-mach1" I could set the Panel I want to show
> text in to "panel_ACME_Widget-mach1"
>
> So I rewrote my code as follows:
>
> <script type="text/javascript">
>
> $(function() {
> $("input").click(function(evt) {
> var panelID = "panel_" + $("input").val();
> evt.preventDefault();
> $(panelID).toggle('fast');
> });
> });
> </script>
>
> It appeared to work just like I hoped... until I put in a second
> button/panel pair, with button ID= ACME_widget-mach2 and panel ID=
> panel_ACME_widget-mach1. What happens is, regardless of which button I
> click, only the first panel, the one with ID=panel_ACME_widget-mach1
> is toggled.
>
> It's as if when any button is clicked, the value I am getting is the
> value of the first button in the collection. I put in an alert box
> right after declaring the variable to test this:
>
> alert(panelID);
>
> and sure enough, the value that displays is the value assigned to the
> first of these buttons on the page.
>
> So what am I doing wrong here? How can I get the value of the button
> that is actually clicked?
>
> Thanks!
>
> Alan
