Can you offer a bit of advice.

I am using a hosted SAAS CMS solution that enables you to create basing apps with a web apps system. I have created a form for members to submit a bunch of images and content to their own area. Everything is working great except if the images being submitted via the form are large, it takes ages for the form to submit and go to the thank you page. I am already using jQuery UI to split the form in to 5 steps and using the jQuery facebox plugin for instructional popups.

My question is, what would be the best way to display a loading gif (in facebox or in another suggested overlay) while the form is being submitted?

Thanks for your help! Jack

Can you offer a bit of advice.

I am using a hosted SAAS CMS solution that enables you to create basing apps with a web apps system. I have created a form for members to submit a bunch of images and content to their own area. Everything is working great except if the images being submitted via the form are large, it takes ages for the form to submit and go to the thank you page. I am already using jQuery UI to split the form in to 5 steps and using the jQuery facebox plugin for instructional popups.

My question is, what would be the best way to display a loading gif (in facebox or in another suggested overlay) while the form is being submitted?

Thanks for your help! Jack

• javascript
• jquery
• jquery-ui

2 Answers 2

$('#myForm').bind('submit', function() {
  $('#ajax-loading').show()
});

Put your loading image inside a div with id "ajax-loading" with css "display: none;"

If you are talking about classical form submissions (no AJAX or anything), I see two possibilities:

1. Put the whole process into a frameset consisting of two frames. The other frame contains the "please wait" icon. The form steps make the "wait" icon visible when they are submitted, and each step hides it onload.

2. Leave everything as is, and just show a "please wait" image on form submission - it will automatically disappear when the next page is opened. (An animated image will not be animated in some browsers in the loading process after submitting a form, though).

Both these solutions have the downside that if the user cancels the form submission, you have no way to tell it happened, and thus you can't hide the "please wait" icon (see my question on this issue here.) It's a minor issue but it still doesn't look really professional.

You may want to switch to Ajax based form submissions if you can - they give you more freedom in designing the interaction.

Also, for file uploads, you may want to look into Flash based uploaders like SWFUpload or Uploadify that enable you to display a real progress bar, among other things.