Manually render Clear form button in layout

Question

I followed instructions here and I render some fields in my front end view, like this:

echo $this->filterForm->renderField('search', 'filter'); 

Now I wonder how to manually add a clear button.

If I render the joomla.searchtools.default, the clear button that it shows, works:

echo JLayoutHelper::render('joomla.searchtools.default', array('view' => $this));

I tried with adding this to my layout:

    <div class="btn-wrapper">
      <button type="button" class="btn hasTooltip js-stools-btn-clear" title="<?php echo JHtml::_('tooltipText', 'JSEARCH_FILTER_CLEAR'); ?>">
        <?php echo JText::_('JSEARCH_FILTER_CLEAR');?>
      </button>
    </div>

The button shows but does nothing. How could I render a Clear form button in mylayout?

EDIT putting the question clearer: why this reset code does not clean the form?

<input type = "reset" value = "Reset"> 

but the "Clear" buton of JLayoutHelper::render('joomla.searchtools.default',...) does?

Answer 1

When you send a form inside a tipical component, Joomla store your data filters in the user state. After that, the component usually redirects you to a view that displays the same form, with the filters set like before. So, for the input box the value will be set, and for the selects an option will be selected. In this state, if you push the reset button:

<input type = "reset" value = "Reset"> 

it will leave things as they are.

So, for reset the filters I added a button, and a little Javascript:

Button:

<button  id="filter_clear" class="btn waves-effect waves-light red"  type="Button"> Reset </button>

JavaScript:

jQuery('#filter_clear').click(filter_clear);

// Reset button
function filter_clear() 
{
    jQuery('#filter_search').attr('value','');
    jQuery('#filter_profession').attr('value','');
    jQuery('#filter_specialty').empty().append('<option value>All</option>');
}