# Cmd+Enter to Submit Forms | SupeRails #212

- URL: https://superails.com/posts/command-enter-to-submit-forms-superails-212
- Published: 2024-11-11
- Duration: 06:13
- Access: free
- Topics: stimulusjs

We will explore 3 different ways of solving the same problem with StimulusJS.

I think solving the same problem with different approaches is a great way to learn.

0:00 (BAD) Targets and Event listeners
3:40 (BETTER) data-action in view, keyboard logic in stimulus
5:05 (BEST) Stimulus keyboard events

Stimulus keyboard event docs: https://stimulus.hotwired.dev/reference/actions#keyboardevent-filter
Blogpost: https://blog.corsego.com/stimulus-cmd-enter-to-submit
Source code: https://github.com/corsego/212-stimulus-keyboard-submit/commit/98126bb58effc79439d235d02cc8f9f2028dda48

## Chapters

- 0:00 (BAD) Targets and Event listeners
- 3:40 (BETTER) data-action in view, keyboard logic in stimulus
- 5:05 (BEST) Stimulus keyboard events

## Transcript

Once upon the time I was browsing a forum thread and, uh, I noticed a suggestion. So customer suggested Jeremy to add the feature of submitting a form by clicking command enter. And actually this is a popular feature in many applications on the modern web. So you would be filling in a form, type in something, and by clicking, uh, command enter, you'll submit this form. So I have implemented this behavior on S rails and let's learn to implement this behavior together in New Rails application. And we're going to do it in three different phase from the first phase to the best way. And I'm going to talk about which, uh, why each phase is better. So here I have basic, uh, new rails application. I've got a scaffold of posts and I've got this body field. And currently to submit this field, I can only, uh, manually click on this great post button. Now, I'm going to add a stimulus controller that is going to listen to click and, uh, command control. If you are on, um, windows Commander Control, enter, and if it was clicked, we're going to submit this form. So here is our form. Uh, we have the form defined. We've got the text field and the submit button. Let's create a stimulus controller to submit this form. So I would say rather generate stimulus form. Here it is. Now they're going to have, uh, two targets, the, uh, input target and the submit target. And then within then the input target, uh, command intervals, uh, clicked. They're going to click on the submit target. Okay, so let's have, uh, a look. I'm gonna create two targets. So static, uh, targets input and uh, submit. And I'm going to add an event listener to the input target. So this is going to be the input target. So this dot input target at event listener input. Uh, and the, it's going to trigger the submit the action. This submit bind. And they're going to listen not to input, but to key down. So when a key is being pressed, key down, and let's create a submit action. So, uh, it commands if event is enter, uh, click on the submit target, but they're going to do it not just when the key is enter, they're going to do it. Then the key is command or control plus enter. So, um, they're going to say, uh, uh, let press, uh, control equals, uh, control key or meta key to handle, uh, both types of keyboards. And we will say if, uh, press control and event key equals enter, prevent default, uh, and submit the form. Now let's apply this, uh, in our HML form. So here I will say, uh, data controller form. And here I will say data, uh, data, uh, form target input. And on the other one, data form target, uh, submit. So when we're listening to vendor in this input, we type control enter, we click on the submit, uh, target. Let's see if it works. I will, uh, okay, it looks made typo. I should remove the scoma. Okay, let's start typing. I click on command the enter and the phone was submitted. So it works. Uh, it's okay, but uh, we can do it in a better way. We don't need to actually have all these, uh, event listeners and these targets. Uh, let's remove, uh, these, and instead we are going to just have a data action inside this text error. So data action and action is going to be key down. And on, key down, we are going to, uh, trigger the, submit the action of the form controller. So form submit, so then a key is being pressed. We trigger this form, submit. We can also remove this other form target. Let's see. So go to edit the post, click control, enter and have this and define the, this submit target. Click yes, because now we don't have the submit target. We just want to submit the form. So this dot element do request submit. Now this element is this element on which the form controller is defined. So the form controller is defined on the, the form. So it is going to submit this form on which the form element is defined. So this element request submit, Let's try again. And you see it worked. It's, uh, much better, but we can, uh, clean it up even more. We can, uh, leverage, uh, steam loss keyboard events and, uh, improve this data action to work as key down control plus enter. And for the other keyboard layout, key down plus meta plus enter. And we can clean, uh, everything out of this submit, uh, uh, action. So you see inside the stimulus, the only thing we have is the submit action and the all the logic is inside this, uh, data action. So let's, uh, try once again clicking on command enter and the form has been submitted. And you see our JavaScript is very clean and, uh, everything is defined. Uh, all the logic on our HTML that is much easier to edit in this specific place. So here are three different approaches. Thanks for watching and see you in the next one.