x
1
2
3
4
5
6
7
8
9
10
<form class="flex flex-col gap" data-controller="form" action="/slow_action" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="Mas9vYPCPLJD0M4IBwB5SbwvOvxpU7lX6orlIitRN95vfWts7MX_b9dAgYrW8bphRoTqWk3-8fbnMSM-WLNgIQ" autocomplete="off" /> <div class="flex flex-col gap-half"> <label class="text-sm font-medium leading-none" for="content">Content</label> <textarea rows="10" class="input" data-action="keydown.ctrl+enter->form#submit keydown.meta+enter->form#submit" name="content" id="content"></textarea> </div> <div class="flex items-center"> <input type="submit" name="commit" value="Save changes" class="btn btn--primary" data-disable-with="Save changes" /> </div></form>1
2
3
4
5
6
7
8
9
10
<%= form_with url: main_app.slow_action_path, class: "flex flex-col gap", data: { controller: "form" } do |form| %> <div class="flex flex-col gap-half"> <%= form.label :content, class: "text-sm font-medium leading-none" %> <%= form.text_area :content, rows: 10, class: "input", data: { action: "keydown.ctrl+enter->form#submit keydown.meta+enter->form#submit" } %> </div> <div class="flex items-center"> <%= form.submit "Save changes", class: "btn btn--primary" %> </div><% end %>
CSS is not required or multiple files are needed, check the notes.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
import { Controller } from "@hotwired/stimulus"import debounce from "https://esm.sh/just-debounce-it@3.2.0?standalone"export default class extends Controller { static targets = [ "cancel", "submit" ] initialize() { this.debouncedSubmit = debounce(this.debouncedSubmit.bind(this), 300) } submit({ params: { submitter } }) { if (submitter) { this.element.requestSubmit(this.#find(submitter)) } else { this.element.requestSubmit() } } debouncedSubmit(event) { this.submit(event) } submitToTopTarget() { this.element.setAttribute("data-turbo-frame", "_top") this.submit() } disableSubmitWhenInvalid() { if (this.element.checkValidity()) { this.submitTarget.removeAttribute("disabled") } else { this.submitTarget.toggleAttribute("disabled", true) } } reset() { this.element.reset() } cancel() { this.cancelTarget?.click() } preventAttachment(event) { event.preventDefault() } #find(id) { return document.getElementById(id) || this.#notFound(id) } #notFound(id) { throw new Error(`Submitter with ID "${id}" not found`) }}No notes provided.