Reset form button

1

Hello everyone, I made filters for my site. And I’m stuck on creating a button to reset all filters using a stimulus. This is my reset_form_button_controller.js file:

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="reset-form-button"
export default class extends Controller {
  connect() {

  }

  clear() {
    document.getElementById("filters_created_from").value = '';
  }
}

And this is my simple_form:

= simple_form_for :payment_filters, url: payments_path,
  method: :get,
  data: { turbo_frame: 'content', turbo_action: :advance, controller: 'reset-form-button' },
  html: { class: 'filters'} do |f|

   = f.input :created_from, as: :date, html5: true, input_html:{ value:filters_params(:created_from) }
   = f.input :created_to, as: :date, html5: true,  input_html:{ value: filters_params(:created_to) }
   
  = f.submit t('buttons.submit'), class: 'form-submit'
  = f.submit t('buttons.reset'), class: 'reset-button', data: { action: "reset-form-button#clear" }

What am I doing wrong?

2

It looks like maybe you misspelled created_from as crated_from?

As an aside, if you wrap your code samples in triple-ticks, it will format better. ex:

```
My code sample
```
3

Also, one note is that you can use the concept of targets to have Stimulus make the element available automatically inside the Controller. For example, if you have something like:

<input data-reset-form-button-target="created-from" />

And, inside your controller you have:

export default class extends Controller {
    static targets = [ "createdFrom" ];
}

… then you can access this.createdFromTarget directly in your clear() method without having to query the DOM.

4

No, I made this typo when I created the question.
I also tried writing in the controller:

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="reset-form-button"
export default class extends Controller {
  connect() {

  }

  clear() {
    this.element.reset();
  }

But it didn’t give any result

5

If you console.log() inside the connect() method, are you getting any output?

6

Would a standar reset button work?

7

show what yo’ve got for

connect() {
    console.log(this.element)
}

Maybe your controller is not connected to the form but to some div container.

8

I did as you wrote, but nothing is displayed in the console.

9

I did as you wrote, but nothing is displayed in the console

10

so controller is not connected, can you show your html than ?