Clear query term displaying in search bar when results page loads

Question

On a search results page, I have: 1) a global search bar in the site header 2) another search bar, specific to the page, that's part of a custom image search.

Issue: When I perform a search using #2, and the results page loads, BOTH search input fields are populated with my search term.

Desired functionality: a) both fields should be cleared when the results page loads OR, at the very least: b) a #2 search term shouldn't be populated in the #1 search field as well

There is some existing script tied to the site search, but I'd like to use a separate solution, ideally with jQuery, to clear the search fields. This way the user doesn't have to manually clear out text when performing a new search. Any ideas?

Answer 1

here is a working fiddle:
http://jsfiddle.net/acturbo/S3tqZ/

html:

<div id="search-bar">
    <form id="search-bar-form">
        <input id="search-bar-input"> value to find
        <a href="#" id="search-barbtn">Search</a>   
    </form>
</div>

<div id="search-bar-page">
    <form id="search-bar-page-form">
        <input id="search-bar-page-input"> value to find on page
        <a href="#" id="search-bar-page-btn">Search</a>
    </form>     
</div>

jquery:

$().ready(function() {

    $("#search-bar-page-btn").on("click", function(){
        $("#search-bar-input").val("");
        $("#search-bar-page-input").val("");
    });
});