getting value of hiddenfield using javascript from listview

Question

Script:

$(document).ready(function() {
    //Change these values to style your modal popup
    var align = 'center';                               //Valid values; left, right, center
    var top = 100;                                          //Use an integer (in pixels)
    var width = 500;                                        //Use an integer (in pixels)
    var padding = 10;                                   //Use an integer (in pixels)
    var backgroundColor = '#FFFFFF';                        //Use any hex code
    var source = 'AttractionDetails.aspx?AttractionID=  **HOW_DO_I_GET_THE_VALUE_FROM_HIDDEN_FIELD** ';                                 //Refer to any page on your server, external pages are not valid e.g. http://www.google.co.uk
    var borderColor = '#333333';                            //Use any hex code
    var borderWeight = 4;                                   //Use an integer (in pixels)
    var borderRadius = 5;                                   //Use an integer (in pixels)
    var fadeOutTime = 300;                                  //Use any integer, 0 = no fade
    var disableColor = '#666666';                           //Use any hex code
    var disableOpacity = 40;                                //Valid range 0-100
    var loadingImage = 'lib/release-0.0.1/loading.gif';     //Use relative path from this page

    //This method initialises the modal popup
    $(".modal").click(function() {
        modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, source, loadingImage);
    });

    //This method hides the popup when the escape key is pressed
    $(document).keyup(function(e) {
        if (e.keyCode == 27) {
            closePopup(fadeOutTime);
        }
    });

});

LISTVIEW:

<ItemTemplate>
                        <td id="Td6" runat="server" style="background-color: #FFFFFF; color: #000000; width: 120px;">
                            <asp:Label ID="AttractionNameLabel" runat="server" Text='<%# Eval("AttractionName") %>' />
                            <br />
                            <a class="modal" href="javascript:void(0);"> Modal Pop Up </a>
                            <asp:HiddenField ID="HiddenField1" runat="server" Value='<%# Eval("AttractionID") %>' />

                        </td>
                    </ItemTemplate>

All i want is to get the HiddenField value of the item being clicked [on clicking on the hyperlink "Modal Pop Up" ] using javascript.

Thanks in advance.

If this is for production code and not playing around I would cut out the eval statements and wouldn't use a hidden field. — Snuffleupagus, May 21 '12 at 18:10

Adil · Accepted Answer · 2012-05-21T18:17:22.917

2

You can do it without using hidden field. Add data attribute and set it with AttractionID. Using hidden field for holding and passing value is not required by this method.

<a class="modal" href="javascript:void(0);" data-AttractionID='<%# Eval("AttractionID") %>'> Modal Pop Up </a>

Get the attractionID assigned to anchor tag

 $(".modal").click(function() {
        valueofAttractionID = $(this).data('AttractionID');
        modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, source, loadingImage);
    });

edited May 21 '12 at 18:17

answered May 21 '12 at 18:11

Adil

146,340
25
209
204

While Claudio's method certianly works, this is the prefered solution, since it doesn't require extra markup and doesn't rely on that markup never moving in the DOM tree... – ShaneBlake May 21 '12 at 18:14
@ShaneBlake: Might still break server-side code and existing post-back-based client-side code – skarmats May 21 '12 at 18:17
how do i get the value of `valueofAttractionID` here `var source = 'AttractionDetails.aspx?AttractionID= **HOW_DO_I_GET_THE_VALUE_FROM_HIDDEN_FIELD** '` – user1150440 May 21 '12 at 18:26
1

`var source = 'AttractionDetails.aspx?AttractionID=` this should be your variable declaration – ShaneBlake May 21 '12 at 18:40
We will not use hidden field with this method. The value you assigned to hidden field is assigned to anchor tag with data-AttractionID='<%# Eval("AttractionID") %>' – Adil May 21 '12 at 18:41
could you please explain me this `If this is for production code and not playing around I would cut out the eval statements and wouldn't use a hidden field.` – user1150440 May 21 '12 at 18:49
You should not use hidden field in production for this purpose. We can achieve without hidden field so what is need increase the processing (accessing hidden field on client and server) and page size (Extra bytes for hidden field) unnecessarily. – Adil May 22 '12 at 04:54

getting value of hiddenfield using javascript from listview

1 Answers1