I've been tasked with extending the normal Search Options (created with Component Creator, if it matters) to be located on the left of the page, and include a long list of various checkboxes to filter the search - a common feature of large ecommerce sites. I've created a series of custom Joomla input fields that render the checkboxes just as expected, and the filtering itself actually works just fine.

The problem is that the Clear Search button doesn't clear the checked boxes. The custom form field is in the form's XML, and is included in $config['filter_fields'] of the model, and works as a filter just as expected.

So is there an additional entry somewhere that I need to address for Clearing to work? I can't see anything that is being posted that triggers anything, only a class on the button js-stools-btn-clear, that gets used in jquery.searchtools.js, and that's where my trail goes cold.

My gut tells me that javascript is clearing the val of the filter fields somewhere/somehow, and the core code isn't equipped to clear an array of checkboxes.

Any suggestions or ideas would be appreciated. :)

1 Answer 1


I've not done this before so this could be the wrong approach, but will give it a shot anyway.

Looking at the default clear button for filters, it contains the following onclick attribute:


What this does is empties the input field, then resets the form.

Seeing as you have checkboxes, you can also clear them, then reset the form, for example:


function resetCheckboxes(source) 
    checkboxes = document.getElementsByName("somename");

    for (var i=0, n=checkboxes.length; i<n; i++) 
        checkboxes[i].checked = source.checked;


<input type="checkbox" name="somename" />
<input type="checkbox" name="somename" />
<input type="checkbox" name="somename" />


onclick="resetCheckboxes('this'); document.getElementById('filter_search').value='';this.form.submit();"

This above is of course assuming your checkboxes are using the same name="", which in the case I've provided, is somename

Hope this helps

  • Interesting, my Clear button does not have that - must be a Component-Creator thing. All I've got is <button data-original-title="Clear" title="" class="btn hasTooltip js-stools-btn-clear" type="button">Clear</button>. I'll try your suggestion nonetheless, and see if it and the CC approach get along with each other.
    – GDP
    Commented Sep 18, 2015 at 16:16
  • Ahh, in which case the jquery.searchtools.js file, most like looks for the js-stools-btn-clear class and performs the magic in there. Would you be able to use add the contents of the JS file to PasteBin ?
    – Lodder
    Commented Sep 18, 2015 at 16:19
  • I wanted to avoid messing with that .js file, so I took your suggestion, and initially, it didn't work because the native searchtools javascript was being fired before my reset code. To get around that, I simply used a different class name on the clear button that the JS was tied to and, used my own form.submit() on that class name. Works perfectly now. You REALLY, really want those flowers, don't you.
    – GDP
    Commented Sep 18, 2015 at 17:24
  • More than anything haha. Glad you got it working on the end :)
    – Lodder
    Commented Sep 18, 2015 at 17:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.