under the category of the simplest thing that will actual work, I wanted to have one of those nice animate swilling icons running after the user hit the submit button so they knew that something was really happening.
The core code to this is very simple, using jQuery, just have a hidden image tag with the image (one on many “ajax loader images“, even though there is no Ajax involved in this case), use the jQuery .submit() function to bind the the event and show the image using the jQuery .show().
This is assuming there is only one form and only one submit type button.
The 3rd line is checking ( via ($(‘#loading_image’).length == 0) ) to see if the image tag has been previously been added to the form, and if not (length==0) inserts the image tag just before the submit button.
Also 2 notes about the img tag I’m inserting (just before the submit or update button) :
- using the alt=”loading” give me a fail back if the image do not load (probably a img path problem).
- I could insert more elaborate HTML mark up, even going a far a view point centered lightbox sort of effect.
As an added bonus, the last line disables the submit button to stop the user from resubmitting (or double submitting the form). very very bad.