change cursor to busy while page is loading

asp.net, javascript, mouse-cursor, postback

Solution

you can add a handler to the form's `submit` event.

CSS

    .wait, .wait * { cursor: wait; }

JavaScript

function cursorwait(e) {
    document.body.className = 'wait';
}

var fm = document.getElementById('<% =form1.ClientID %>');
var proxySubmit = fm.onsubmit;

fm.onsubmit = function () {
    cursorwait();
    if (proxySubmit) {
        proxySubmit.call(fm);
    }
}

here we're ensuring our method gets called if `submit()` is called in js like the drop down does when it causes a postback. this should also catch any other instances of the form submitting.

Problem

I understand how to use javascript to change the cursor to busy while the page is making and ajax call. However I have a page that does not use ajax, it uses a postback to reload the page. However the load is rather data intensive and it takes a few seconds. During this time the user can still click on the page. I want to turn the cursor to "waiting" so the user does not try to click on the page. For example I have a couple of dropdowns that cause postback. I make a selection and the page loads for 3 seconds. While it loads I would like the cursor to turn to waiting so the user does not try to make a selection on a second dropdown until the page reloads. Is this possible? Additional Info: (simplified version of my setup) I have a masterpage: ``` <form id="form1" runat="server"> <table width = "100%" bgcolor="White"> <tr><td> <h3><asp:ContentPlaceHolder id="MAIN" runat="server"></asp:ContentPlaceHolder></h3> </tr></td> </table> </form> <script type="text/javascript"> function cursorwait(e) { document.body.style.cursor = 'wait'; } var fm = document.getElementById('<% =form1.ClientID %>'); if (fm.addEventListener) { fm.addEventListener('submit', cursorwait, false); } else { fm.attachEvent('onsubmit', cursorwait); } </script> ``` and then a page that uses the master page: ``` <asp:Content ID="Content1" ContentPlaceHolderID="MAIN" Runat="Server"> <table runat=server id="tb_simple_search_table" cellpadding = 0 cellspacing = 0> <tr><td> <asp:DropDownList... <asp:DropDownList... </td></tr> </table> </asp:content> ```

Original source