# How to submit a form using enter key

**URL:** <https://discuss.emberjs.com/t/how-to-submit-a-form-using-enter-key/8602>\
**Category:** Ember Data\
**Created:** [August 18, 2015, 1:13pm UTC](https://discuss.emberjs.com/t/how-to-submit-a-form-using-enter-key/8602 "2015-08-18T13:13:02Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Rinchen](https://avatars.discourse-cdn.com/v4/letter/r/91b2a8/32.png) [@Rinchen](https://discuss.emberjs.com/u/Rinchen)\
**Post date:** [August 18, 2015, 1:13pm UTC](https://discuss.emberjs.com/t/how-to-submit-a-form-using-enter-key/8602/1 "2015-08-18T13:13:03Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kgish](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/kgish/32/13333_2.png) [@kgish](https://discuss.emberjs.com/u/kgish)\
**Post date:** [August 18, 2015, 2:00pm UTC](https://discuss.emberjs.com/t/how-to-submit-a-form-using-enter-key/8602/2 "2015-08-18T14:00:23Z")

</div>

In my template:

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

```

In my controller:

```auto
 actions: {
    ...
    doSomething: function() {
    }
    ...
    insertNewline: function() {
        Ember.$('#id_button').click();
    }
}    

```

---

<div class="post-metadata">

**Author:** ![Rinchen](https://avatars.discourse-cdn.com/v4/letter/r/91b2a8/32.png) [@Rinchen](https://discuss.emberjs.com/u/Rinchen)\
**Post date:** [August 18, 2015, 2:05pm UTC](https://discuss.emberjs.com/t/how-to-submit-a-form-using-enter-key/8602/3 "2015-08-18T14:05:44Z")

</div>

Awesome, it worked! Thank you so much.

---

<div class="post-metadata">

**Author:** ![Panman8201](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/panman8201/32/17727_2.png) [@Panman8201](https://discuss.emberjs.com/u/Panman8201)\
**Post date:** [August 18, 2015, 3:23pm UTC](https://discuss.emberjs.com/t/how-to-submit-a-form-using-enter-key/8602/4 "2015-08-18T15:23:34Z")

</div>

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

```auto
<form {{action "doSomething" on="submit"}}>
    {{input type="text" value=foobar}}
    <button type="submit">Save</button>
</form>

```

---

<div class="post-metadata">

**Author:** ![ranjitnyros](https://avatars.discourse-cdn.com/v4/letter/r/7feea3/32.png) [@ranjitnyros](https://discuss.emberjs.com/u/ranjitnyros)\
**Post date:** [May 25, 2017, 10:45am UTC](https://discuss.emberjs.com/t/how-to-submit-a-form-using-enter-key/8602/5 "2017-05-25T10:45:05Z")

</div>

Worked like a Charm!!! Thank you

---

<div class="post-metadata">

**Author:** ![sheriffderek](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/sheriffderek/32/10619_2.png) [@sheriffderek](https://discuss.emberjs.com/u/sheriffderek)\
**Post date:** [January 21, 2018, 11:45pm UTC](https://discuss.emberjs.com/t/how-to-submit-a-form-using-enter-key/8602/6 "2018-01-21T23:45:36Z")

</div>

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](https://stackoverflow.com/questions/26070981/inputs-on-ember-refresh-page-when-a-user-hits-enter-key) . — just curious if in the past 3 years you’ve thought further on this! ha!