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.

Answer 1

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);
    });