Self-proclaimed greatness is a hard thing to prove.
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;
}
});
});
| Print article | This entry was posted by webguy on April 24, 2008 at 9:43 am, and is filed under DOM. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site. |
Enable JavaScript specific CSS with one line of jQuery
about 1 year ago - 23 comments
jQuery is by far my favorite JavaScript framework in terms of simplicity and just pure DOM power. I picked up a little trick at a conference quite a few months back and improved upon it and thought it could benefit anyone that believes in the mantra of progressive enhancement. Here’s the line of code that
Setting your tabindex on your html forms automatically with jQuery
about 1 year ago - 12 comments
The tabindex is absolutely necessary for controlling the tab order through a really long form, from a usability and accessibility standpoint. This is probably not the preferred way to do this, you should be setting the tabindex attribute on all of your input elements in your html. Now if you work with lazy developers, that
Prevent double submit with jQuery
about 1 year ago - 13 comments
Another great “little” solution with jQuery. Needed a simple way to protect all the forms on our site from being double submitted. There was an attempted solution in place on our app, that added an onsubmit to every form with a function above it called ignoreDoubleSubmit that tried to trap the event of the button
Input focus with jQuery
about 2 years ago - 17 comments
Form input focus always seems a pain to me, I don’t like all of the generated inline javascript that struts or other frameworks add to accomplish this and it always seems to be one issue or another. So here’s a simple solution that applies focus to the last input element in the document that has
Suckerfish DHTML dropdown menu with JQuery
about 2 years ago - 13 comments
DHTML dropdown menu’s have been greatly improved in terms of accessibility, standards compliance, and weight using the Suckerfish technique of building pure CSS-based menus and then attaching a small javascript that allows Internet Explorer 6 to mimic the CSS hover method. Once the die-hards hanging onto IE6 let go, we won’t have to worry much
about 1 year ago
testing
about 1 year ago
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.
about 1 year ago
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.
about 10 months ago
This is realy good and worth to read. ,
about 9 months ago
Thanks!
about 7 months ago
Very nice and useful tutorials for web designers,
Thanks for posting.
about 6 months ago
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.
about 6 months ago
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).
about 2 weeks ago
about 2 weeks ago
Thanks , It’s really good code i have just implement and it works for me ,,,, Thanks
about 6 days ago
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();
}
});