« Preventing multiple page requests after double-clicks | Main | Two must-have web developer extensions for Firefox »

UI technique: changing submit button appearance via background images

In my recent post titled "Preventing multiple page requests after double-clicks", I suggest a way to use JavaScript to prevent multiple requests resulting from double-clicks on submit buttons or links. In the comments of my posting, Sam Farmer mentions the technique of putting "...the submit button in a span or div and after submission change the span or div contents to say 'Processing' or something like that." His is a great idea, and one that I've used myself in other sites. I responded that I'd blog about my technique for changing the appearance of a submit button to show that it's been clicked, so here goes!

So, let's start with a normal submit button. When you click on it, it may (depending on it's styling) appear to depress when you click on it, just to let you know that your click was received. Give it a try.

Now every so often, in my applications there will be a fair bit of processing going on after a form submission-- enough to make for a delay of a second or more before the browser redraws the screen. This can happen particularly when the form allows for a file upload. And I know people for whom that one-second delay is enough to make them wonder if their click was received. So they click again... and perhaps again... and in the process, send several identical requests up to the server (probably making the page-refresh delay even worse for themselves). So, my solution is to change the state of the submit button after the first click to let them know that there is, indeed, something going on after the first click (and that they should wait, patiently and happily, for my application to do its work).

So what do I do? I throw some kind of animation in the submit button. To make space for the animation, we need a bit of CSS; and to insert the animation after a click, we need some scripting. Here's a CSS class to make room for the background animation:


.submitBtn {
	background-image: url('/images/blank.gif');
	background-repeat: no-repeat;
	background-position: 100% 50%;
	padding-right: 15px;
	text-align: center;
}

Here's the breakdown of the CSS: we're adding a blank GIF as the background image, which is fixed to the right-hand side of the button, vertically centered, and doesn't repeat. The text in the submit button has 15 pixels of padding on the right-hand side so that it makes room for the background graphic to appear, and is centered.

When the button is clicked, you want to change the background graphic so that an animation appears, which will indicate to the user that something is indeed happening after their click and they can sit back. So, we embed a script in the page like so:


function showLoading(button) {
	button.style.backgroundImage = 'url(/images/buttons/loading-arrows_12x12.gif)';
	button.style.color = '#676561';
	wait(400);  // Else the form will submit before the background image changes
	return true;
}

function wait(ms) {
	var date = new Date();
	var curDate = null;
	
	do{
		curDate = new Date();
	} while(curDate - date < ms);
}

And we add an onclick to our button to call the function:


<button class="submitBtn" onclick="showLoading(this);">Submit</button>

Give it a try:

Stop the animation

If you're submitting a form via AJAX and won't be refreshing the page, there's a function that will "stop" the animation and restore the submit button to its original state (I'm using it in the link above):

 
function stopLoading(button) {
	button.style.backgroundImage = 'url(/images/blank.gif)';
	button.style.color = '#000000';
	return true;
}

So there you have it, a CSS/scripting technique for using background animations to change submit buttons after they've been clicked. This gives users some very good feedback to let them know that their form submission is being processed and they can wait happily for the results. No more extra clicks needed. (This technique can even be combined with my double-click suppression technique for those users who insist on clicking again anyway). Let me know if you find this useful, or if it doesn't work for you.

Comments (7)

so why aren't you using cool submit buttons on your comments forms yet?

Nice detailed writeup!
I am not that familiar with any JS work, but this should keep me motivated to learn it.

Thats very good to know... thanks

There is no animation showing. I checked the folder the .gif is in, and its there, and works, but the example above shows nothing when clicked. I tried your code locally, and got the same results. I also checked your source code, and duplicated it with the same results.

Making a Great personal ad - Be honest - As I stated above what's the point of misleading someone, it's going to only result in disappointment for both of you. If an individual says they are seeking for an athletic kind it's unlikely they will change their mind on a 1st date and they are also not most likely to trust anything else about you.

Making a Great personal ad - Be honest - As I stated above what's the point of misleading someone, it is going to only lead to disappointment for each of you. If a person says they're looking for an athletic type it really is unlikely they'll alter their mind on a 1st date and they're also not likely to trust anything else about you.

Even though employed in the sitting down position, and adjustable ergonomic stick up desk can
increase tracks, keyboards, plus the work surface to a far healthier spot.

Post a comment