[Last Call] Learn how to a build a cloud-first strategyRegister Now


asp.net - clear search form without postback

Posted on 2012-08-16
Medium Priority
Last Modified: 2012-08-16
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:

        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

Rajar Ahmed earned 2000 total points
ID: 38301542
try this,
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" 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

ID: 38302426
It should be return true;

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Hello there! As a developer I have modified and refactored the unit tests which was written by fellow developers in the past. On the course, I have gone through various misconceptions and technical challenges when it comes to implementation. I would…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
Suggested Courses
Course of the Month17 days, 18 hours left to enroll

830 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