asp.net - clear search form without postback

Hello Experts,

.net 4.0, asp.net, 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:

       <script>
        function ClearSearch() {

            //document.getElementById("txtSearch").value = "";
            $('#<%=txtSearch.ClientID %>').attr('value', ''); 
        }
        </script>
        <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" />                
        </td>

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

    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;
        gvResults.DataBind();
    }

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.
j420exe1Asked:
Who is Participating?
 
Rajar AhmedConnect With a Mentor ConsultantCommented:
try this,
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script>
function ClearSearch() {
            //document.getElementById("txtSearch").value = "";
            $('#<%=txtSearch.ClientID %>').val(''); 
            return false;
        }
</script>
<asp:Button ID="btnClear" runat="server" height="26px" Text="Clear"
                onclientclick="return ClearSearch();" /> 

Open in new window

0
 
Obadiah ChristopherCommented:
It should be return true;
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.