Resetting form after Turbo Streams submission

What’s the “right” way to make a form reset after a Turbo Streams-handled submission? I suppose I could write some JavaScript to achieve that, but this issue seems common enough for there to be a better way. Thanks!

You could replace the form entirely when sending a stream response. Maybe something like

<%= turbo_stream.replace "form" do %>
   your form here
<% end %>

Or, if you’re using Stimulus, you can use this controller, copied from the video demo on the hotwired.dev website.

export class extends Controller {
   reset() {
    this.element.reset()
   }
}
<form data-controller="reset-form" data-action="turbo:submit-end->reset-form#reset">

</form>
4 Likes