ansaurus

Question

Send form when hitting enter

Answer 1

+1 A:

Use the jquery form plugin.

http://malsup.com/jquery/form/

Vinodh Ramasubramanian 2010-03-30 14:30:35

Answer 2

+4 A:

I would capture the keypress event of the input elements, watch for a keycode of 13 (enter) and call submit. Like so:

$("form input").keypress(function(ev){
    if (ev.keyCode == 13) {
        $("form")[0].submit();
    }
});

This code is untested.

Freyday 2010-03-30 14:33:49

Perhaps best not to submit on Ctrl+Enter, Shift+Enter, ...

T.J. Crowder 2010-03-30 14:42:31

Answer 3

+1 A:

Recommended? I'm not sure it's recommended to emulate this behaviour at all!

Whilst you can mess around with trying to detect keypress for Enter, there are some subtle browser differences about how Enter presses are supposed to work which won't be quite the same as what you produce. And your form will fail to work at all without JavaScript, which isn't ideal.

So put a submit button in. If you're really adamant that the button shouldn't appear on-page (and I'm not sure that's a good idea), you can always absolute-position it off the left-hand side of the page where no-one can see it.

Note that WebKit will submit the form anyway despite the lack of button. If you must patch this up with messy script, make sure you cancel the default action for the keypress or you may get double-submission.

bobince 2010-03-30 14:35:32

Answer 4

A:

You could bind a keydown/keyup event to the form or document. Within the eventhandler you trigger a form submit.

like

$(form).bind('keydown', function(e){ 
    if(e.which === 13){
        e.preventDefault();
        e.stopPropagation();
        $(this).trigger('submit');
    }
});

Kind Regards --Andy

jAndy 2010-03-30 14:35:33

but this doesn't detect that the Enter key was pressed?

paolo granada lim 2010-03-30 14:42:04

Correct me if I'm wrong, but in IE, keydown and keyup do not fire for Enter. Only keypress fires.

Freyday 2010-03-30 14:45:55

Answer 5

A:

I used following thing for the same purpose but not for jquery try this may help you.

function submitenter(myfield,e)
  {
    var keycode;
    if (window.event) keycode = window.event.keyCode;
    else if (e) keycode = e.which;
    else return true;

    if (keycode == 13)
    {
        myfield.form.onsubmit();
        return false;
    }
    else
     return true;
  }

Salil 2010-03-30 14:35:50

Answer 6

+2 A:

Why not just feature a button that is hidden using CSS, or even better JS: in that case the form will remain accessible to people that have JS disabled, and you should get your enter automatically

Ramuns Usovs 2010-03-30 14:38:25

Yes, hidden buttons seem to work (you always have to test yourself this kind of stuff :)

Álvaro G. Vicario 2010-03-30 15:15:44

Answer 7

+8 A:

Put a submit button in the form, and make it invisible using JavaScript. This fulfils 2 purposes:

The enter button will work because there is a submit button present
Non-javascript users will be able to use your form

Gareth 2010-03-30 14:38:36

I think this is a better solution than keypress checking, as you can add new controls without having to wire every single one into a javascript keypress checking function. In addition, some controls may not behave properly, such as someone who uses the keyboard to select an item in a dropdown, when they press enter to select it, it may submit the form.

SLC 2010-03-30 15:01:28

It's pretty elegant indeed: `$("form input[type=submit]").hide();` and you're done.

Álvaro G. Vicario 2010-03-30 15:11:58

What about just hiding the button by CSS? Hiding by javascript may cause visible artifact in IE due to slow execution speed of JS.

jholster 2010-03-30 15:30:24

To be honest, I wouldn't hide the button at all. Much better for people to see an explicit way to submit a form, and there are **plenty** of people who don't understand the concept of pressing enter in a form field. But you're right, if you're going to hide it you might as well do it with plain CSS as there's no specific reason it should be there without javascript and hidden with javascript

Gareth 2010-03-30 19:17:14

Oops... It looks like IE8 ignores hidden submit buttons :(

Álvaro G. Vicario 2010-03-31 07:54:09

IE-resistant hidden button: `<div style="width: 0; height: 0; overflow: hidden;"><input type="submit" value="Entrar"></div>`

Álvaro G. Vicario 2010-03-31 08:05:08

Answer 8

+1 A:

Safari, Firefox, Opera, and IE8 all do submit the form when you hit enter in text input field. Neither is submit button nor javascript needed. Try yourself.

(Didn't test IE6/7 but I'm 95% sure they do too.)

I agree with other that capturing the enter is not good idea.

Update: the above is true, except that Firefox does not submit a form containing password field and having no submit button. No idea why, can anyone see a reason behind that?

Update 2: ... and except for IE, if there's only one input field.

jholster 2010-03-30 14:55:59

Curious. It seems to be that way when there's only *one* field.

Álvaro G. Vicario 2010-03-30 15:02:38

Number of fields doesn't matter, but password field seems to be special for Firefox. I wonder if that's a bug.

jholster 2010-03-30 15:10:01

Buttonless forms with only one input field will not be submitted by enter in MSIE.

BalusC 2010-03-30 15:10:33

BalusC, thanks. I have always used enter key for submitting forms (whether submit button existed or not) and assumed that was standard behavior in all browsers.

jholster 2010-03-30 15:18:21

ansaurus

tags:

views:

answers:

Send form when hitting enter

Update

related questions