Stillnet Studios

On pages that take more than a few seconds to complete, its a good idea to show some type of in-progress meter. Things like bulk email processing and large file uploads are good candidates. Often this doesn’t need to be as complicated as a real progress meter, where you show the actual percentage complete. Instead, an “in progress” meter just gives feedback to the user to let them know that something is going on.

I usually place a hidden element on the page, then use JavaScript to make it appear when the form is submitted. Something like:

<p style="visibility:hidden" id="inprogress">
    <img id="inprogress_img" src="progress.gif">
    Please Wait...
</p>

<input type="submit" onclick="document.getElementById('inprogress').style.visibility='visible'">

Note that there is an image used in the in-progress message, this is important. A static “Please Wait” message tells your user they should wait, but without the feedback of the moving image, they could still get the impression something is locked up. You can get some awesome free progress meters from http://www.ajaxload.info.

Of course Internet Explorer throws a wrench into things. IE will stop any animated gifs from animating when the form is submitted. This is a problem in IE6 and 7. This is far worse than having no progress meter, since it appears as if something has locked up. But there is a work around. We just need to kick start the animation after the form submits. We do this by resetting the source of the image with JavaScript. We have to reset the src after the form submits, and the form submits when our function returns. So we make use of the setTimeout function, which executes a line of JavaScript after a specified number of milliseconds. We’ll also throw in an anti-double submit feature similar to what I mentioned in my last post.

<script language="JavaScript">
var submitted = false;
function doSubmit() {
	if (! submitted) {
		submitted = true;
		ProgressImg = document.getElementById('inprogress_img');
		document.getElementById("inprogress").style.visibility = "visible";
		setTimeout("ProgressImg.src = ProgressImg.src",100);
		return true;
		}
	else {
		return false;
		}
	}
</script>

<input type="submit" onclick="return doSubmit()">

If your form is long enough that it needs scroll bars, be sure to place the in-progress message where the user will see it when they click the submit button.

This entry was posted on Sunday, February 4th, 2007 at 12:23 am and is filed under Web Development, AJAX / JavaScript.