Comments on: Default html button submit on enter with JQuery

By: Philip Hofstetter

Philip Hofstetter — Mon, 15 Feb 2010 08:50:40 +0000

in my case I decided to take the “put an invisible clone of the submit button as the first element of the form”-approach.

That felt saver than to hack a script to try and detect the enter key (the key codes are not really formalized. A browser could send a different code for enter).

Here’s what I used (specific to my page layout where the last button is the default button):

$(‘form’).each(function(){
var $f = $(this);
$f.prepend($f.find(‘button:last’)
.clone()
.css({
position: ‘absolute’,
left: “-999px”,
top: “-999px”,
height: 0,
width: 0
})
);
});

I would have preferred visibility: hidden or even display:none, but IE doesn’t play with that idea and only submits buttons it thinks are visible (even though that clone certainly isn’t).

By: Lars Peter Thomsen

Lars Peter Thomsen — Tue, 09 Feb 2010 14:13:15 +0000

there may be a small problem with fields: When a dropdown is open, the user can navigate the options with the keyboard, and under normal circumstances press enter to select the marked option. With this script, however, the form is instantly submitted when he tries this, which is not desirable.

By: Indialike

Indialike — Wed, 27 Jan 2010 04:50:44 +0000

Very nice and useful tutorials for web designers,
Thanks for posting.

By: Dan

Dan — Fri, 04 Dec 2009 20:33:40 +0000

Thanks!

By: YOUR-TITLE

YOUR-TITLE — Sat, 21 Nov 2009 02:05:24 +0000

Default html button submit on enter with JQuery – GreatWebGuy…

Thank you for submitting this cool story – Trackback from YOUR-TITLE…

By: Stinky69

Stinky69 — Tue, 13 Oct 2009 07:27:55 +0000

This is realy good and worth to read. ,

By: Chris Love's Official ASP.NET Blog : Setting the Default Input Focus and Default Button : Thin ASP.NET 5

Sun, 24 May 2009 20:46:56 +0000

[...] key to the desired behavior when the user presses the ENTER key. I found a good article explaining how to set a form’s default button behavior with JQuery. I did change the code from the article by making it only return true. I did this because returning [...]

By: Michiel

Michiel — Mon, 02 Mar 2009 11:32:51 +0000

I’m currently using jQuery 1.3.1. And to make it even more compatible with most of the common situations and less error prone, I’m using the following code:

jQuery(document).ready(function() {
$(“form input, form select”).live(‘keypress’, function (e) {
if ($(this).parents(‘form’).find(‘button[type=submit].default, input[type=submit].default’).length <= 0)
return true;

if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
$(this).parents(‘form’).find(‘button[type=submit].default, input[type=submit].default’).click();
return false;
} else {
return true;
}
});
});

This uses live so it also will work on newly added elements. And will also work on select elements. And also works on multiple forms. So it searches for the parent form of the element and uses that to find the submit button. As well as button form as input form.

By: Bruce

Bruce — Wed, 17 Dec 2008 17:46:17 +0000

In using JSF we found that without the return false and return true lines in this example that Firefox worked and IE didn’t behave as we expected. In IE the form was submitted, but we didn’t get the expected action execution on the back end nor the expected JSF error message on the screen. Best I can tell, the return false intercepts the default IE behavior which is to submit the form via the form definition (if that makes sense) as opposed to “pushing the button” which JSF knows which action to call.

By: rajeev

rajeev — Thu, 20 Nov 2008 07:23:15 +0000

testing