asp hiddenfield get empty value from javascript parameter

Question

I am trying to pass value selected parameter in dropdown-menu to hidden-field . I have traced the code to see hidden-field value and it always get empty value.

Also i traced JavaScript code using browser debugger, no errors occurred. whats wrong?

JavaScript

$(document).ready(function (e) {
    $('.search-panel .dropdown-menu').find('a').click(function (e) {
        e.preventDefault();
        var param = $(this).attr("href").replace("#", "");
        var concept = $(this).text();
        $('.search-panel span#search_concept').text(concept);
        $('[id$=hdnSearchParam]').val(param);
    });
});

Code-behind

protected void btnsearch1_Click(object sender, EventArgs e)
{
    grid.DataSource = U.Search(hdnSearchParam.Value, txtsearch.Text);
    grid.DataBind();
}

Markup

<div>
    <div class="col-xs-8">
        <div class="input-group">
            <div class="input-group-btn search-panel">
                <button type="button" class="btn btn-default dropdown-toggle" 
                    data-toggle="dropdown">
                    <span id="search_concept">Filter by</span> <span class="caret"></span>
                </button>

                <ul class="dropdown-menu" role="menu">
                    <li><a href="#UserName">UserName</a></li>
                    <li><a href="#its_equal">It's equal</a></li>
                    <li><a href="#greather_than">Greather than ></a></li>
                    <li><a href="#less_than">Less than < </a></li>
                    <li class="divider"></li>
                    <li><a href="#all">Anything</a></li>
                </ul>
            </div>
            <input type="hidden" name="search_param" value="all" id="search_param" />
            <asp:TextBox ID="txtsearch" runat="server" 
                class="form-control" 
                name="x" 
                placeholder="Search term...">
            </asp:TextBox>
            <span class="input-group-btn">
                <asp:LinkButton ID="btnsearch" runat="server" 
                    CssClass="btn btn-primary"
                    OnClick="btnsearch1_Click">
                    <span class="glyphicon glyphicon-search"></span>
                </asp:LinkButton>
            </span>
        </div>
    </div>
</div>
<asp:HiddenField ID="hdnSearchParam" runat="server" />

Answer 1

You cannot access an ASP.NET control from jQuery/Javascript without making an update to your code. ASP.NET changes the id of the control at run time. You have two options:

1. Use the ClientID to get the actual id of the control

    var hiddenField = $("#<%= hdnSearchParam.ClientID %>");

2. Set ClientIDMode to static and your jQuery will work as is. (Assuming you're using .NET 4.0 or above)

    <asp:HiddenField ID="hdnSearchParam" runat="server" ClientIDMode="Static" />

More about ClientIDMode