about 9 months 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 More >
about 9 months ago - 15 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 More >
about 1 year ago - 9 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 More >
about 1 year ago - 14 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 More >
about 1 year ago - 9 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 More >
about 1 year 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 More >
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 6 months 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 4 weeks 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 1 week 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 1 week 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.