Solved - clear search form without postback

Posted on 2012-08-16
Last Modified: 2012-08-16
Hello Experts,

.net 4.0,, c#, jquery

I have a search form that filters data in a gridview.  I currently have a clear button that when clicked clears the form (text boxes) and reloads the gridview.  The onclick of the clear button occurs in a postback.  I want to do this without a postback.  I am guessing I will have to use jquery to handle this.  

Here is what I am working with now:

        function ClearSearch() {

            //document.getElementById("txtSearch").value = "";
            $('#<%=txtSearch.ClientID %>').attr('value', ''); 
        <td align="right">
            <asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
            <asp:Button ID="btnSearch" runat="server" height="26px" Text="Search" 
                onclick="btnSearch_Click" />
            <asp:Button ID="btnClear" runat="server" height="26px" Text="Clear"
                onclick="btnClear_Click" />                

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <asp:AsyncPostBackTrigger ControlID="btnFilter" />
        <asp:AsyncPostBackTrigger ControlID="btnSearch" />
        <asp:AsyncPostBackTrigger ControlID="btnClear" /> //<-- doesn't clear txtSearch
        <asp:GridView ID="gvResults" runat="server" 

    protected void btnClear_Click(object sender, EventArgs e)
        //clear search textbox and reset grid based on filter
        //clear only works on postback
        txtSearch.Text = string.Empty;
        gvResults.PageIndex = 0;

Open in new window

So, when the user clicks the clear button, I would like the Search text box (txtSearch) to be cleared and the gridview to be reloaded (gvResults.databind()).

Any help much appreciated.  Thanks in advance.
Question by:j420exe1
    LVL 18

    Accepted Solution

    try this,
     <script src="//" type="text/javascript"></script>
    function ClearSearch() {
                //document.getElementById("txtSearch").value = "";
                $('#<%=txtSearch.ClientID %>').val(''); 
                return false;
    <asp:Button ID="btnClear" runat="server" height="26px" Text="Clear"
                    onclientclick="return ClearSearch();" /> 

    Open in new window

    LVL 20

    Expert Comment

    It should be return true;

    Featured Post

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Join & Write a Comment

    Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
    International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
    The viewer will learn how to dynamically set the form action using jQuery.
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    728 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now