How many times do we need to disable a button after sending a xhr call or submitting a form?
Almost everytime, the element which induces a data transfer, should be disabled until you get a reply from the server.

I’ve written a short and simple extension of the “dijit.form.Button” widget called “dojox.form.BusyButton”, which provides a simple API to let you deal with those cases when you don’t want to allow the user to hit the submit button a second time.

Lets take a look at two examples

Button without timeout:

Button with five second timeout:

You can find a few more examples at the Dojox test page. There you will find a few special cases of how to use the widget.

Download the code

You can get the widget when downloading the latest nightly from or the upcoming 1.2 release.

To include it on your page simply insert following code


Note that you also have to include the dijit theme CSS on your page. This can be either the tundra, nihilo, soria or a custom theme. In this example we will use the nihilo theme.

@import url(yourdojodir/dijit/themes/nihilo/nihilo.css);
@import url(yourdojodir/dojox/form/resources/BusyButton.css);

And add the theme CSS to your body tag:

<body class="nihilo">...</body>


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

To create a button programatically, use following code:


<div id="busyButton"></div>


  var button = new dojox.form.BusyButton({
             id: "submit",
             busyLabel: "Sending mail...",
             label: "Send mail",
             timeout: 5000
  }, dojo.byId("busyButton"));

To create a button via normal markup:

<button dojotype="dojox.form.BusyButton" busylabel="Sending data...">Send data</button>

Following parameters can be passed besides the default dijit.form.Button ones, when creating the button

isBusy: This is really the internal state. When you pass it being true, the button will be busy initially
busyLabel: This is the text you see when the button is busy
timeout: a timeout, the button will be reset to original state after the timeout expires
useIcon: set useIcon to false if you don’t want to see the loading icon

Following methods besides the default dijit.form.Button ones, can be used or connected to

makeBusy(): Changes the buttons state to busy and disables the button
cancel(): Resets the button to its normal state – enabled
resetTimeout(/*Int*/ timeout): you can reset an existing timeout and set a new value. This is useful for chained responses
setLabel(/*String*/ content, /*Int*/ timeout): lets you change the label of the button and connect an optional timeout to that label