Submit On Cmd Enter :: Form :: Css Zero Showcase

<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="_vCtr0J0mmUathyteUc6seyAzZ6azTstzLUYy1BIZuX_2ueFiTJbZrHSCuwiZd0X-gPZyA5W2gDr8Pp72FHe_A" 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>

<%= 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 %>

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" ]
  initialize() {
    this.debouncedSubmit = debounce(this.submit.bind(this), 300)
  }
  submit({ params: { submitter } }) {
    if (submitter) {
      this.element.requestSubmit(this.#find(submitter))
    } else {
      this.element.requestSubmit()
    }
  }
  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 matching results.

No matching results.

Embed Code

Embed URL

Previews

No matching results.

Pages

No matching results.