jQuery submit not triggered on ENTER keypress

Question

a very simple FORM and JS:

$('#gg').submit(function() {
    alert('s');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="gg" method="post">
    <input name="languageId" type="text">
    <input name="languageName" type="text">
</form>

.submit wont be triggered by pressing enter on an input somehow. But if I have one input, it does work!

You need to place a `` or `` *within* the `form` for this behaviour to work — Rory McCrossan, May 29 '18 at 15:18
No. you attached a submit event listener. The event has to occur for it to call the handler — charlietfl, May 29 '18 at 15:21
You have nothing to call the submit event and only forms with a *single input* default to submitting on pressing enter. — j08691, May 29 '18 at 15:22
@j08691 Has that always been the case? I never knew that one :) — Rory McCrossan, May 29 '18 at 15:25
@RoryMcCrossan lol yup. It's a verrry old 'feature'. Link coming... — j08691, May 29 '18 at 15:26
@RoryMcCrossan https://stackoverflow.com/questions/17797025/why-does-a-form-with-one-text-input-submit-on-enter-while-one-with-two-text-inpu — j08691, May 29 '18 at 15:26

Guillaume Georges · Answer 1 · 2018-05-29T15:24:18.150

5

Pressing the ENTER key will submit the form if you add a submit input to your form.

    $('#gg').submit(function() {
        alert('s');
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="gg" method="post">
    <input name="languageId" type="text"/>
    <input name="languageName" type="text"/>
    <input type="submit"/>
</form>

edited May 29 '18 at 15:24

answered May 29 '18 at 15:21

Guillaume Georges

3,878
3
14
32

3

_"only if"_ Not true. Forms with a single text input will submit when pressing enter on the input. – j08691 May 29 '18 at 15:23
1

@j08691 You are correct. I edited my answer. Thanks for pointing that out. – Guillaume Georges May 29 '18 at 15:24

Jonathan.Brink · Answer 2 · 2018-05-29T15:30:40.460

3

One way to accomplish this is to manually setup the enter key press like this:

$('#gg input').keypress(function (e) { // listen to keypress on your input controls
    if (e.which == 13) {   // if enter key...
        $('#gg').submit(); // submit the form
    }
});

Here it is in action: https://jsfiddle.net/8md75a6f/3/

edited May 29 '18 at 15:30

answered May 29 '18 at 15:19

Jonathan.Brink

23,757
20
73
115

1

really don't need the return false – charlietfl May 29 '18 at 15:21
2

I don't like this solution, or you have to change your selector. If OP have multiple forms the form #gg will be submitted for each forms – Alexis May 29 '18 at 15:23
The answer from @RogerC is probably superior, but I'll leave this answer here in case in helps anyone else. – Jonathan.Brink May 29 '18 at 15:27
1

@Jonathan.Brink Or just change your selector to `$(formselector input)` in this case `$("#gg input")` – Alexis May 29 '18 at 15:29

score 0 · Answer 3 · answered May 30 '18 at 07:56

0

Actually, adding a

<input type="submit" style="display: none;">

seems to solve everything

answered May 30 '18 at 07:56

John Smith

6,129
12
68
123

jQuery submit not triggered on ENTER keypress

3 Answers3