Self-proclaimed greatness is a hard thing to prove.
Prevent double submit with jQuery
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 was clicked and not allow it to be clicked again. The problem was the event for the button wasn’t present when the form was submitted so it would silently error out with a blink in the Firebug console. After weeks of fighting to have it fixed, I removed the code and reimplemented a working solution with jQuery
$('form').submit(function(){
$(':submit', this).click(function() {
return false;
});
});
| Print article | This entry was posted by webguy on September 16, 2008 at 7:58 pm, 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. |
Writing JavaScript specific CSS
about 1 year ago - 2 comments
I wrote an article recently recommending Using jQuery to write JavaScript specific CSS, I’ve since change my mind on this approach. The approach I’ve moved to is similar, but doesn’t rely on a framework and allows more flexibility like moving all of my JavaScript includes to the bottom of the page for better performance. In
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
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
Default html button submit on enter with JQuery
about 2 years ago - 14 comments
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
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 7 years ago
this will not only work for submit buttons but for also image buttons. comments welcomed.
$(“form”).each(function(){
var $that = $(this);
$that.submit(function(){
$that.find(“input[type='image'],input[type='submit']“).attr(“disabled”, “true”);
});
});
about 7 years ago
Tony,
Thanks improvements are always welcome. I have run into a slight problem with the approach of disabling buttons during the submit, in some cases developers are using the name of the button clicked to control the routing of the next action, when you disable the buttons, the name is not passed. This is easily remedied by attaching to the click event:
$(“form”).each(function(){
var $that = $(this);
$that.submit(function(){
$that.find(“input[type='image'],input[type='submit']“).click(function(){
return false;
});
});
});
about 1 year ago
If you take the combination of the two approaches an even more elegant solution is possible
$(’form’).submit(function(){
$(this).find(”input[type='image'],input[type='submit']“).click(function(){
return false;
});
});
about 1 year ago
I prefer this: http://henrik.nyh.se/2008/07/jquery-double-submission
about 1 year ago
Very good and simple solution!
Additionally, the developer can use an alert (or something) to inform the user that the request is being processed.
about 7 months ago
Hello,
This solution:
$(’form’).submit(function(){
$(this).find(”input[type='image'],input[type='submit']“).click(function(){
return false;
});
});
does a good job, but how do you enable the submit button again after a return from an ajax call? I thought do this in the sucess function would fix it but it doesn’t
$(this).find(“input[type='image'],input[type='submit']“).click(function(){
return true;
});
about 7 months ago
Randy, your problem is probably that $(this) is a reference to the object calling the function. In the original, that is the form. But in your ajax success function, it most likely refers to something else. So it’s trying to “find” image and submit inputs inside whatever $(this) refers to and not finding them. If you replace $(this) in your ajax success callback with a selector that points to your form (probably just using its ID), it might fix the problem.
about 7 months ago
Henrik said he preferred another solution without saying why. I checked it out, and I see its advantages. While webguy’s solution elegantly prevents a submit _button_ from being double clicked, it does not handle all ways a form can be submitted, most importantly by pressing the enter key. Henrik’s solution works directly on the form rather than the specific means of submitting it. That takes care of submit buttons, images, enter keys, scripts, or any other method of submitting the form. Thanks for the help, both of you.
about 4 months ago
What about hitting enter twice?
about 2 months ago
Why not just limit to one submit? This solves hitting enter twice as Skylar said.
var i = 0;
$(“form”).submit(function()
{
i++;
if ( i > 1 ) { return false; }
});
about 1 week ago
@henrik.. good one