How to submit a form using enter key

Ember Data
1

At the moment, only button click will execute an action. I want to be able to hit enter and submit the form the same way as clicking.

1 Like
2

In my template:

{{input value=name type="text" id="name" insert-newline="insertNewline"}}
...
<button type="button" id="id_button" {{action 'doSomething'}}>Submit</button>

In my controller:

 actions: {
    ...
    doSomething: function() {
    }
    ...
    insertNewline: function() {
        Ember.$('#id_button').click();
    }
}
1 Like
3

Awesome, it worked! Thank you so much.

4

IMO, the proper way is to wrap your inputs with a <form> tag and put the action there.

<form {{action "doSomething" on="submit"}}>
    {{input type="text" value=foobar}}
    <button type="submit">Save</button>
</form>
11 Likes
5

Worked like a Charm!!! Thank you

1 Like
6

I have a situation where I’ve broken up form elements (fieldsets) into components - so that I have an optional ‘multi-step’ checkout form alongside a traditional one-page checkout form. Because of how those things are routed based on screen-size or query param, they live in different routes /checkout/(standard) and then /checkout/multi-step/step-name. Given the newer option to use the router in components, I went for that in the confirmation step. When I went to sure up the HTML - I noticed that I didn’t have a form element wrapping the multi-step so I added it. After that / enter (as should be expected) - triggered a form post / which refreshed the whole page : / . — so, while I love the action on the form / I’m not using it in this case - basically - just to keep the levels from getting too deep… and instead had to add an onsubmit return false - which feels kinda lame. ember.js - Inputs on Ember refresh page when a user hits Enter key - Stack Overflow . — just curious if in the past 3 years you’ve thought further on this! ha!

1 Like