Disabling the Submit Button with Ajax

Now that SharePoint 2010 has Ajax support built in I find I’m using it more frequently. Ajax, of course, allows us to update a portion of the page without having to do a complete post back to the server. However, the browser does not see this as a full page refresh and doesn’t alert the user that it’s loading data meaning they may keep hitting that “submit” button over and over again. The best way to handle that issue is to just disable the button. Fortunately, we can do that with just a few lines of JavaScript code.

The first thing we need to do is set up a couple basic variables – one for the button, and another for the text being displayed in the button.

var originalText;

var button;

Next up – register the event handlers. ASP.NET’s Ajax has a request manager that has the events (beginRequest and endRequest) that we need. The beginRequest will of course execute when the round trip starts, and the endRequest will execute when we receive our data from the server. We place the code to wire up the event handlers inside pageLoad, which is automatically called when, you guessed it, the page loads. The one little thing you’ll need to change for your environment is the name of the button. In my case it’s btnSearch.

function pageLoad() {

       var manager =

              Sys.WebForms.PageRequestManager.getInstance();

       manager.add_beginRequest(beginRequest);

       manager.add_endRequest(endRequest);

       button = $get('<%= btnSearch.ClientID %>');

}

Our logic for beginRequest and endRequest is very straight forward. beginRequest will disable the button and set the text to be “Loading…”, while endRequest will set it back to the original value.

function beginRequest() {

       originalText = button.value;

       button.value = "Loading...";

       button.disabled = true;

}

 

function endRequest() {

       button.value = originalText;

       button.disabled = false;

}

No more need for text that says, “Please only click the button once!” If they can’t click the button, we don’t need the text.