On Form Submit, fade out screen and display animated "Loading" gif until page loads

[TechBoyJK]

Hi Guys,

I'm building some forms, and when they are submitted, I'd like to integrate a method that will fade out the screen a bit, and show an animated "processing" .gif.

Basically when the "submit" button is pressed, the form is being submitted to it's destination. The page will hang on the form until the next page is ready to load. While it's hanging there after submitting, I'd like the screen to fade out, and display an image in the center of the screen.

I'm hoping this can be achieved with CSS, as I try to use as little Javascript as possible.

What's the best way to achieve this? I figure if anything a javascript "onsubmit" function will be a good start.

 

[Crusty]

Have a <div /> containing your processing content that is initially hidden, then onSubmit just makes it unhidden. You can use all the CSS you want to style the div.

 

[sourceninja]

Sounds like you need to do a ajax form submit. If you try to just show a gif with onSubmit it's going to be very brief. As soon as the first part of the next page starts to load it will disappear.

 

[TechBoyJK]

Sounds like you need to do a ajax form submit. If you try to just show a gif with onSubmit it's going to be very brief. As soon as the first part of the next page starts to load it will disappear.

That's fine. I'm using it on forms that have a file upload. The page that loads is very small, so once it begins loading, it should be pretty snappy.

 

[tatteredpotato]

Are you using jQuery/jQueryUI? Those libraries make a lot of the flashy UI stuff pretty easy.

 

[sourceninja]

That's fine. I'm using it on forms that have a file upload. The page that loads is very small, so once it begins loading, it should be pretty snappy.

I mean brief like no one will ever see it. It will happen and as soon as it is finished the page will change. Not much point. Using ajax submit the loading screen would actually be there while the form is uploading and only go away when it is finished.

Loading screens that are not actually for well loading, are kind of pointless imho.

 

[TechBoyJK]

I mean brief like no one will ever see it. It will happen and as soon as it is finished the page will change. Not much point. Using ajax submit the loading screen would actually be there while the form is uploading and only go away when it is finished.

Loading screens that are not actually for well loading, are kind of pointless imho.

Well, it would only be for pages that won't have a near instant load out.. Simple forms and such won't use it. But if someone is uploading a photo or something, I want to have the loader image there.

 

[sourceninja]

and for that you need to use ajax. Otherwise as soon as they hit submit, the image you are displaying to say "loading" will be gone.

Or you can fake it with a delay before the real submit, but then you are making the loading screen fake and delaying the actual form submit even more.

 

[TechBoyJK]

All I'm really concerned about is once the form submit button is clicked, that a div, image or text, be loaded over the page that says "processing".

I found this forum thread

http://www.htmlforums.com/client-side-scripting/t-add-loadinggif-onsubmit-of-form-upload-116068.html

He basically includes teh following code just above the submit button.

<script type="text/javascript" src="../js/animatedcollapse.js"></script>

<div class="style2" id="uploading" style="width: 100&#37;; display: none;">
Uploading your Files Please wait...
<img src="http://www.colletts.co.uk/submit/img/ajax-loader.gif" alt="Uploading - Please Wait" />
<br/>
...You will be redirected to a Submission Success Page when your documents are uploaded
</div>

<INPUT class="input" type="submit" name="upload" value="Continue" onclick="javascript:animatedcollapse.toggle('uploading')">

----------------------------------------------------------
I haven't got it to work just yet though.

Here's a link to the actual animatedcollapse.js code

http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.js

Is this the best way? Or do you have other ideas?

 

[sourceninja]

Seems like a lot of code in that js to just show a hidden div with a loading gif in it.

How is it breaking? Is the form failing to submit (IE, the javascript you are calling does not submit the form) or is the form submitting without running the onclick?

If it's the latter I would say that the script is probably working, it's just that it happens too fast for you to see it. As soon as the form is submitted that the next page load is going to begin and in some browsers that means the page is going to change right away.

 

[BigDH01]

Just download jQuery and use the fadein function, which I believe alters the display property. Also, make sure you have your position set correctly in your style2 class. You're basically just making a modal popup.

Other posters, however, are correct. Not much point in doing this if you are actually submitting the page and directing the client somewhere else. This would make more sense if you were doing something like an AJAX post.

 

[LokutusofBorg]

Aye, using jQuery makes this very easy... there are lots of situations where there is plenty of time after submit before the next page blanks the screen for a progress flower to be shown. Uploads are most certainly one of the best cases of this.

 

[Snapster]

If memory recalls you can do this quite simple with jQuery and BlockUI (it's even themeroller extended)