Submit form with Enter key without submit button?

Question

Possible Duplicate:
HTML: Submitting a form by pressing enter without a submit button

How can I submit a form with just the Enter key on a text input field, without having to add a submit button?

I remember this worked in the past, but I tested it now and the form doesn't get submitted unless there's a submit-type input field inside it.

score 212 · Accepted Answer · answered Jan 24 '12 at 03:28

212

$("input").keypress(function(event) {
    if (event.which == 13) {
        event.preventDefault();
        $("form").submit();
    }
});

answered Jan 24 '12 at 03:28

timmah.faase

3

Don't forget to add the # in front of the input id! – MadsterMaddness Nov 04 '14 at 22:50
13

@MadsterMaddness Use the `#` only if we are specifying the ID of an element. From that answer, it specifies ALL the `` elements. – Mai Mar 03 '15 at 03:47

score 48 · Answer 2 · answered Jan 24 '12 at 03:27

48

Change #form to your form's ID

$('#form input').keydown(function(e) {
    if (e.keyCode == 13) {
        $('#form').submit();
    }
});

Or alternatively

$('input').keydown(function(e) {
    if (e.keyCode == 13) {
        $(this).closest('form').submit();
    }
});

answered Jan 24 '12 at 03:27

Jay Gilford

8

You can bind the keydown event on just the form, instead of binding the individual inputs: the keydown event will propagate up to the form. – Ben Hull Jan 24 '12 at 03:32
very helpful indeed! makes sense not to have submit form buttons everywhere – cwiggo Jun 18 '13 at 11:13
2

If your form had multiple input elements then slightly better would be to bind the handler to the form and filter for events from input elements like this: $('#form').on('keydown', 'input', function(e) { ... – Nine Tails Nov 19 '13 at 16:53

score 15 · Answer 3 · answered Jan 24 '12 at 03:29

15

Jay Gilford's answer will work, but I think really the easiest way is to just slap a display: none; on a submit button in the form.

answered Jan 24 '12 at 03:29

Brian Glaz

4

This doesn't work for me, I have to set visibility: hidden; instead. – Martin Andersson Nov 22 '12 at 09:27

score 5 · Answer 4 · answered Jan 24 '12 at 03:31

5

@JayGuilford's answer is a good one, but if you don't want a JS dependency, you could use a submit element and simply hide it using display: none;.

answered Jan 24 '12 at 03:31

FtDRbwLXw6

4 Answers4