I'm working with the following form
<%=
form_for(
model,
html: {
:'data-controller' => 'enable-submit-button-if-fields-changed'
}
) do |form|
%>
<%= form.text_field(:title, :'data-action' => 'input->enable-submit-button-if-fields-changed#enableSubmit') %>
<%= form.text_area(:description, :'data-action' => 'input->enable-submit-button-if-fields-changed#enableSubmit') %>
<%= form.file_field(:picture, :'data-action' => 'input->enable-submit-button-if-fields-changed#enableSubmit') %>
<%= form.check_box(:delete_image, :'data-action' => 'input->enable-submit-button-if-fields-changed#enableSubmit') %>
<%#= other input fields... %>
<% end %>
and here is a Stimulus JS controller related to it
import { Controller } from "@hotwired/stimulus"
// Connects to data-controller="enable-submit-button-if-fields-changed"
export default class extends Controller {
connect() {
this.element.querySelector('input[type=submit]').disabled = true;
}
enableSubmit() {
this.element.querySelector('input[type=submit]').disabled = false;
}
}
The purpose of these components is to activate the submit button when any input field changes.
In the form code above, I specified
:'data-action' => 'input->enable-submit-button-if-fields-changed#enableSubmit':'data-controller' => 'enable-submit-button-if-fields-changed':'data-action' for each field?