24Apr/0827
Default html button submit on enter with JQuery
I basically needed the update button to be the default action on clicking enter in the form, but there were multiple submit buttons in my form and they weren't in the order I needed due to UI design. This was a quick and dirty solution to select an html submit button and make it the default when a user clicks enter from certain or all input elements on the form. It could be tweaked to give specific behavior to specific types of input boxes, such as invoking a tab on enter in between required elements, but the general idea is using jQuery to click the default button when the user hits enter.
$(function() {
$("form input").keypress(function (e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
$('button[type=submit] .default').click();
return false;
} else {
return true;
}
});
});
November 20th, 2008 - 02:23
testing
December 17th, 2008 - 12:46
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.
May 10th, 2011 - 06:30
yeeeah
March 2nd, 2009 - 06:32
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:
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.
March 22nd, 2012 - 04:29
GOOD!
October 13th, 2009 - 02:27
This is realy good and worth to read. ,
December 4th, 2009 - 15:33
Thanks!
January 26th, 2010 - 23:50
Very nice and useful tutorials for web designers,
Thanks for posting.
February 9th, 2010 - 09:13
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.
February 15th, 2010 - 03:50
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).
August 17th, 2010 - 07:43
August 19th, 2010 - 00:47
Thanks , It’s really good code i have just implement and it works for me ,,,, Thanks
August 27th, 2010 - 00:07
What I used was a lot more leaner and generic.
(obviously with some assumptions)
$(“form *”).keypress(function(e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
$(this).parents(‘form’).find(‘[type=submit]‘).eq(0).focusin().click();
}
});
September 6th, 2010 - 14:04
November 8th, 2010 - 11:52
Some litte optimization.
1) deleted “default” class jquery search
2) jquery search performed only once (assigned to variable)
$(document).ready(function() {
$(‘form input, form select’).live(‘keypress’, function (e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
var btnSubmit = $(this).parents(‘form’).find(‘button[type=submit], input[type=submit]‘);
if (btnSubmit.length <= 0)
{
return true;
}
else
{
btnSubmit.click();
return false;
}
} else {
return true;
}
});
});
December 21st, 2010 - 08:50
January 27th, 2011 - 01:48
These responses have all been really helpful. Here’s a similar version as a jQuery extension. Add it to your js library and use something like this on your page:
$(‘.foo form’).clickButtonOnEnter();
jQuery.fn.clickButtonOnEnter = function() {
$(this).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;
}
});
}
February 25th, 2011 - 17:35
My slightly changed version.
It finds the first button of type submit in the form and executes that button. (btw, this is also the default behavior in Firefox, but not in IE).
$.fn.installDefaultButton = function() {
$(this).live('keypress', function(e) {
// Submit button found, test for enter key press.
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
// No submit button found, execute default action.
if ($(this).closest('form').find('input[type=submit]:visible').size() <= 0) {
return true;
}
// Find first submit button in form and submit.
var defaultButton = $(this).closest('form').find('input[type=submit]:visible:first');
defaultButton.click();
return false;
} else {
return true;
}
});
// Enable jQuery chaining.
return this;
};
March 3rd, 2011 - 21:14
THANK YOU! I’m a JSF developer and this just saved my ass. Us JSF developers can only accomplish server-side action upon form submit if a button is clicked, so when the user uses the enter button to submit a form without clicking the button, it really screws us up. This has saved my project!
May 6th, 2011 - 15:40
I tweaked Rob’s suggestion a little. You can specify different selector for the default button. Now we only search the DOM once.
This coffe script:
# Pressing "Enter" key clicks defaultButton
# selector: defaults to first Submit button, like FF.
# Some browsers click first button (not necessarily Submit), by default.
# Derived from: http://greatwebguy.com/programming/dom/default-html-button-submit-on-enter-with-jquery/#comment-614
$.fn.defaultButton = (selector = 'input[type=submit]:visible:first') ->
$(this).live('keypress', (e) ->
# simply leave if Enter key was NOT pressed
return true unless ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13))
firstSubmit: $(this).closest('form').find(selector)
if firstSumit
firstSubmit.click()
false
else
true
)
# Enable JQuery chaining
return this
Generated:
$.fn.defaultButton = function(selector) {
if (selector == null) {
selector = 'input[type=submit]:visible:first';
}
$(this).live('keypress', function(e) {
if (!((e.which && e.which === 13) || (e.keyCode && e.keyCode === 13))) {
return true;
}
({
firstSubmit: $(this).closest('form').find(selector)
});
if (firstSubmit) {
firstSubmit.click();
return false;
} else {
return true;
}
});
return this;
};
May 6th, 2011 - 15:50
Lost my formatting. argh. I used
.Also, there's a typo in the coffee script: `if firstSumit` should be `if firstSubmit`. And... now that selector may indicate something other than the first Submit button, I will rename that.
June 17th, 2011 - 10:37
Really handy thanks, we have been looking for a way of doing this without using asp.
September 10th, 2011 - 00:27
Thanks for share. I’m ready use it for my code.
October 27th, 2011 - 04:22
@Matt Scilipoti: the generated JavaScript seemed to stumble upon an error at “firstSubmit”. I changed the following to fix it for me:
This:
({
firstSubmit: $(this).closest(‘form’).find(selector)
});
To this:
firstSubmit = $(this).closest(‘form’).find(selector);
It worked for me after the change. I don’t know enough JavaScript, jQuery or CoffeeScript to say exactly why, but I guess it has to do with the “object literal” feature of JavaScript. The initial “firstSubmit” was created as a *property* inside an anonymous object, so it wasn’t available as a variable name when “if (firstSubmit)” asked for it.
Thanks for the code!
November 25th, 2011 - 05:07
Is there a way to get that without JavaScript? i mean having JavaScript disabled.
Also not using CSS trick position:fixed, user can navigate not using author css.
Thanks
August 15th, 2012 - 09:41
Haven’t tried it yet, but I guess this should work.
August 15th, 2012 - 09:48
I’ve tried this with javascript but wish there is a way to do it with css only.