Showing an animation while a form is processed.
It is common that a form submission can take a while to complete. Depending on how intensive the processing is, a web form submission can take quite a while. Users are very likely to repeatedly submit a form when they are not convinced their previous action was indeed effective and has not hung. A message to the user that the form has submitted is usually enough. An asynchronous post and process where the submitted contents are queued and the results retrieved from a browser redirect is the ultimate solution for potentially “very slow” operations. Somewhere in between is showing an animated gif to the user that can distract them from leaving or clicking something else while we process the request.
The problem is this:
The animation stops on form post! When a document changes location, the present (previous) location is stopped. In other words, if, on form submission, we reveal a hidden animated gif, the gif will not be animated following the form post. Therefore, the user may think they’ve hung. This is not our desired end result. We want to show a nice little graphic that has movement, indicating progress.
Here is the solution:
Place the form html in an I-frame on the parent page. Place the animated gif on a simple page and load that in a second I-frame. Capture the onload event of the form I-frame and hide the animated gif I-Frame from that event. On the form html page, call to the parent and show the animated I-Frame before submitting the form. Since they love in separate physical windows (I-Frames), the animation will continue to play while the form submits. When the results page loads, the animated gif’s containing I-Frame will again be hidden due to the onload event re-firing.
parent page containing the I-frames
<html>
<head>
<script>
//function to show the animation and hide the form.
function showAni(){
divAni.style.display = 'block';
divForm.style.display = 'none';
}
function showForm(){
divAni.style.display = 'none';
divForm.style.display = 'block';
</script>
</head>
<body>
<!-- create two iframes and assign the form page to one and the animated gif page to the other -->
<div id="divForm">
<iframe src="page1.htm" height="100%" width="100%" frameborder="no" onload="showForm()"></iframe>
</div>
<div id="divAni">
<iframe id="frmAni" src="animated.htm" height="100%" width="100%" frameborder="no"></iframe>
</body>
</html>
form page
//function to call the showAni function of the parent window -
//this is called on the onSubmit event of the form
if(parent!=self){
parent.showAni();
return true;
<form id="Form1" action="resultsPage.aspx" onsubmit="return showAni();">
<input type="submit">
</form>
animation page
<img src="animated.gif" >