Access rendered dom objects after form submission

1

I feel like I’m missing something very obvious.

I started to use Turbo for form submissions. I want to use StimulusJS to improve the the UX to give users some feedback that the submission succeeded.

So here is the button

image

when I click on it and the form submission with Turbo is initiated, it turns into a spinning animation (I add a class on it “is-loading”).

So far so good, I managed to get this done with mapping of Turbo events and a stimulus action, like turbo:submit-start->form#submitStart

However, when a request completes and a request response is rendered, I want to change the button to a green color, wait for 2 seconds and change it back to the normal default state.

I’ve setup a mapping turbo:submit-end->form#submitEnd between the turbo event and a stimulus action called submitEnd. However, I don’t know how to access the DOM elements of the just rendered form.

A function like this gives me the formElement in the state before the submission, not after it has been already ended.

submitEnd(event) {
  console.log(event.detail.formSubmission.formElement)
}

Which means, I can’t access it and change the button.

What am I missing?

Thank you all for you help!