Dot-Dot-Dotter

Sometimes you want a submit button that you can only press once. It would be nice if it was obvious to the user that they’re not supposed to click it twice. How about making it disable, change the text to “waiting” and have an animating ellipsis (“…”)? I think that’d do the job.

Example:

Just include this code in your page somewhere:

window.onload = function() {
	dottage.x = document.getElementById('submit');
	dottage.x.onclick = dottage.godots;
}
var dottage = {
	i: 1,
	godots: function(){
		dottage.x.disabled=true;
		dottage.x.value = 'waiting';
		dotty = setInterval('dottage.dotter()', 500);
		//return false;
	},
	dotter: function(){
		if (dottage.i == 0){
			dottage.x.value = 'waiting';
		} else {
			dottage.x.value += '.';
		}
		dottage.i = (dottage.i+1)%4;
	}
}

Note: This assumes that your submit button has an id of “submit”. If this is not the case just change line 2 as necessary.

To see it in action (it only displays for a split second when viewing it locally) just uncomment line 11.

I have tested this in IE (6, 7 & 8), Firefox, Opera and Chrome and found no problems.

Update: I’ve rewritten this with a different structure and the use of jQuery. it’s a bit easier to customise and understand.

var dot_count    = 0;           // This should not be changed
var dot_speed    = 250;         // The time in ms between updates. Think FPS.
var dot_btn_id   = 'submit';    // The id of the button.
var dot_busy_txt = 'waiting';   // The text to display

// A function to animate the dots, to be called repeatedly.
function dotter(btn){
    $('#'+dot_btn_id).val(function(index, value){
        if (dot_count == 0){ return dot_busy_txt;
        } else { return value + '.'; }
    });
    dot_count = (dot_count+1)%4;
}

// Add click handler to submit button. Call dotter() every {dot_count}ms.
$(document).ready(function(){
    $('#'+dot_btn_id).click(function(){
        $(this).attr('disabled', 'true');
		dot_repeater = setInterval('dotter($(this))', dot_speed);
		// return false; // Prevents form from submitting.
    });
});
Advertisements

About Mr Chimp

I make music, draw pictures, browse the internet, programme, and make sweet, sweet cups of tea until the early hours.
This entry was posted in Uncategorized and tagged , , . Bookmark the permalink.

One Response to Dot-Dot-Dotter

  1. dan says:

    Nice, must have missed this first time round.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s