Question

I have a form on a page that can filter a results table and appends the filter on the url as a query string e.g. /Search?Name=john&Title=mr&Location=

As you can see location was blank because nothing was passed for that query. So basically when the form submits it sends all queries and those that have values filter the results.

What I want to do is allow a user to clear a single query so for example say they decided to no longer filter by john but they would still want their other queries to remain so I can’t just clear the whole query string.

Any ideas on how I could do this?

Each filter looks something like:

<td><input name="Name" type="text" /> <a class="clear">Clear</a></td>

So I thought about something along the lines of:

$('table.filter td').each(function (i) {

            $(this).children('a.clear').click(function (e) {

                e.preventDefault();

                // CLEAR ONLY THIS FILTER FROM THE QUERY STRING

                // SUBMIT THE FORM AGAIN WITH THE ORIGINAL QUERY STRING MINUS THE REMOVED FILTER VALUE
                });
});

Answer 1

Try this:

jQuery('a.clear').each( function() {


    jQuery(this).click( function(event) {

        event.preventDefault();
        jQuery(this).closest('td').children('input').val('');
            jQuery('#theform').submit(); //for resubmitting the form

    });


});