10

TL;DR Question

Why can I not use 2 of the same input fields in a form, and the enter button submit the form

More detailed question

Straight to the point. I'm trying to use the enter button to submit a form when an input element is focussed, which should then emit an event.

As you can see, if I have more than 1 input of the same type (for example, 2 input="text" inputs, when i press the enter button when focuses on an input, it fails to emit the submit event.

In the second app example directly below it, I have the exact same form, with the exact same vuejs instantiation, but with only one input field, and when you press enter when focuses on that element it correctly emits the submit event.

I've tried to google what might be going on here, but struggling to find much of any use apart from "prevent form being submitted on enter".

I've tried adding an ID attribute, a name attribute etc to the element, and it still doesn't work as expected.

I'm not beginner at vuejs, but not an advanced JS user either, so "simple" answers would be appreciated :D

If more information is needed, please let met know and I'll provide as much as I can

Phil Cross
  • 9,017
  • 12
  • 50
  • 84
  • 2
    Check [this question](https://stackoverflow.com/questions/477691/submitting-a-form-by-pressing-enter-without-a-submit-button). Adding `` should work – ljubadr Feb 05 '19 at 20:45
  • @ljubadr thats incredible. it works! If you put it as an answer, I'll accept it. Initially i was doubtful this would work, because on my actual code, I have a button to submit the form, but it still doesn't work. On closer inspection, it's just a normal button, not a submit button :facepalm: Thank you very much! – Phil Cross Feb 05 '19 at 20:51
  • That's easy to miss :) I'll add the answer – ljubadr Feb 05 '19 at 20:53

5 Answers5

19

Make sure that your form has either

<button type="submit">Submit</button>

or

<input type="submit" value="Submit" />

If you don't want to show the button, you can use

<input type="submit" style="position: absolute; left: -9999px"/>

You can find more information about hiding the button in this question Submitting a form by pressing enter without a submit button

ljubadr
  • 2,174
  • 1
  • 20
  • 24
1

On Vue 3 we can directly add @keyup.enter event in the form.

Here is an example.

<form @keyup.enter="handleSubmit($event, onSubmit)">
Anik Anwar
  • 625
  • 5
  • 11
  • Thanks for this. Just a note (in case it isn't obvious to others - it wasn't to me initially!); you need to have focus on any of the form inputs for this to work. – Mr B Oct 29 '22 at 11:46
0

I tried many different solutions and none worked for me. Maybe because I had several buttons in my form of which only one was supposed to submit the form.

This was what finally worked: Use @keyup.enter on the last element of your input like so:

<input type="text" @keyup.enter="save" />

This way the form will be submitted when the user presses enter right after they fill in the last field of your form.

P.S. In my case I had a <v-text-field> instead of an <input> but it should make no difference.

yukashima huksay
  • 5,834
  • 7
  • 45
  • 78
0

Solved for me. Don't mount Vue on the form element. Mount Vue on a parent element of the form.

<form
    id="app"
    method="post"
    novalidate="true"
    @submit="onSubmit"
>

<div id="app">
    <form
        method="post"
        novalidate="true"
        @submit="onSubmit"
    >
small mammal
  • 692
  • 5
  • 12
0

It's more a specification thing, than a weird behavior:

Only when you have exactly one input field AND a submit button, will the enter key automatically submit the form.

https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#implicit-submission

Thomas Laier Pedersen
  • 449
  • 2
  • 8