Quick jQuery Tip - Preventing Double Form Submission
Posted By : todd sharp Posted At : July 17, 2008 9:05 AM Posted In: jQuery, Ajax
18
Last night I wanted to implement a simple measure to prevent double form submissions so I of course turned to my newest best friend for a little help. My goal was simple - when the form was submitted just swap out the submit button for a little animated gif and a 'Saving' message. My first thought was to capture the click of the submit button like so:
//swap out the button
});
Unfortunately doing so overrides the normal 'submit' behavior. I could have gotten hacky to submit the form, but I discussed it with my friend Dan Vega and he suggested attaching my listener to the submit event of the form itself - which worked perfectly. Here's how that might look:
//swap out the button
return true;
});
Of course you could also throw some validation logic in that function and conditionally return false depending on your needs.
I'm loving jQuery more and more every day!
Is there actually a benefit to using jQuery in this instance or you just showing off ;-p
Otherwise I agree, it wouldn't be worth bothering just to disable the submit.
As you rightly point out though if you added validation the "modular fashion" of JQuery would definately help in keeping everything in check.
It is hard to keep away from the tempatation of trying to get everything working under jQuery sometimes. You feel the draw of the 90s "lets add Flash animations because they're cool" phases coming back again :-(
James
$("form").each(function(){
var $that = $(this);
$that.submit(function(){
$that.find("input[type='image'],input[type='submit']").attr("disabled", "true");
});
});
Granted, Ext is far more mature with the UI components, but jQuery is super lightweight and as you learn the syntax you'll be amazed at how powerful and easy it is. Also, the jQuery UI stuff is starting to come into it's own too from what I've seen.
http://ui.jquery.com
If you're building a full-blow RIA, then Ext is a great solution and competes directly with Dojo, Flex, BackBase & OpenLazlo. But, if you're dealing with a consumer-facing web site and you want to enhance it, then jQuery is definitely the better solution due to it's light-weight, flexibility, and features.
Thats basically the explanation I was looking for, thanks!
I wouldn't want to put jquery and spry in the same class but spry is "kind of" like that in that its incredibly light weight and is more geared toward ajax enablement than javascript UI framework, but I guess thats really where the similarities end.
I do believe that most of the inline stuff has since been removed from spry because of incompatibilities with the AIR security framework (though i could be wrong).
I somehow can't believe that in its current form that it's targeted towards designers anymore...at least no designers I know :)
Now I'm definitely grooving to jQuery and trying to learn it as much as possible, but Spry is a darn good framework in itself.
Todd, the inline JS wasn't actually used that much at all. What you have more of is the use of custom attrbitues, spry:region, for example, to tell Spry what areas will be marked up for content.
Another reason to do it with jQuery (or an equivalent framework) is to remove the javascript "logic" from your view.
That way your HTML is completely clean and free of clutter, and you can control logic from an external file. This makes it nice and simple to maintain your views javascript from a single file.
It wasn't meant to be a knock on Spry or those who use it. I'm just quoting this page:
http://labs.adobe.com/technologies/spry/
That says:
"The Spry framework for Ajax is a JavaScript library that provides easy-to-use yet powerful Ajax functionality that allows designers to build pages that provide a richer experience for their users. It is designed to take the complexity out of Ajax and allow designers to easily create Web 2.0 pages."
I like Spry, it is definitely easy to use and can't be beaten for some things IMO.