Disabling Mouse clicks while processing using Javascript by aliasgar

February 9, 2010 muthu ASP .Net Miscellaneous 0

Disabling Mouse clicks while processing using Javascript

We had an ASP.NET page and user can select something in dropdown and press Submit button and depending on that some data is displayed in datagrid.

The issue is before even the data comes back the user selects some other value in dropdown and presses “Submit”, which we do not want.

We want to disable the mouse clicks of the user till the user gets the data for the first request.

Basically I want two javascript functions – One for disabling the mouse clicks and another one for enabling it back.

Solution 1:

In the OnBeforeUnload event disable/enable all the form controls using the  javascript….

for(var i=0; i<document.forms[0].elements.length; i++)
{
try
{
if(document.forms[0].elements[i].type + “” == ‘hidden’ ||  document.forms[0].elements[i].style.display==”none”)
          continue;
document.forms[0].elements[i].disabled = true;

        }

catch(e)

{}
}

Solution 2

Submit the form only when the button is clicked for the first time and don’t submit it again when the form submission is in progress.

   This can be achieved using the code as below:

Server Side:

    btnSubmit.Attributes.Add(“onclick”,”javascript:return submitForm();”);

Client Side:

      //isFormSubmitted variable is used to prevent the form submission while the server execution is in progress
var isFormSubmitted = false;

     //If the form is already submitted, this function will return false preventing the form submission again.

      function submitForm()
{

if(isFormSubmitted)

return false;

isFormSubmitted = true;

return true;

}

Solution 3:

   This is the third way of disabling mouse clicks.
The “WaitCursor” method converts the mouse of the page to “wait” state (hourglass) and disables all the controls (input, select & hyperlink). 

The “registerEventHandler” is used to register events on all the input controls to identify when the button was clicked.
Finally the last method “Onclicked” is used to set a flag when a button is clicked. this method is registered with all input controls in the above method.

<body onbeforeunload=”waitcursor();” onunload=”waitcursor();” onload=”registerEventHandler();” MS_POSITIONING=”GridLayout”>

<form id=”frmAgedInventory” method=”post” runat=”server”>
function waitcursor()
{

//Do this if Buttons and Link where click that do a heavy postback.
if(properEvent)
{

document.body.style.cursor=”wait”;
//Disables all the INPUT Controls

for(i=0;i<document.all.tags(‘INPUT’).length;i++)
{
var io = document.all.tags(‘INPUT’)[i];
//Make sure you are not working with hidden INPUTS
if(io.type != ‘hidden’)
{
io.disabled=true;
io.style.cursor =”wait”;
}
}

for(i=0;i<document.all.tags(‘SELECT’).length;i++)
{
var select = document.all.tags(‘SELECT’)[i];
//Make sure you are not working with hidden INPUTS
if(select.type != ‘hidden’)
{
select.disabled=true;
select.style.cursor =”wait”;
}
}

//Disables all the HyperLink Controls
for(i=0;i<document.all.tags(‘a’).length;i++)
{
var io = document.all.tags(‘a’)[i];
//Make sure you are not working with hidden Links
if(io.type != ‘hidden’)
{
io.disabled=true;
io.style.cursor =”wait”;
}
}

//divResult.style.display = “none”;
//divWait.style.display=”block”;
properEvent=false;
}
}

//Register All the Buttons with an Event to Identify the Click event for required buttons
function registerEventHandler()
{
for(i=0;i<document.all.tags(‘INPUT’).length;i++)
{
var io = document.all.tags(‘INPUT’)[i];
io.attachEvent(“onclick”,OnClicked);
}
}

//This Function is used to set the Flag that required Buttons where Click
function OnClicked()
{
properEvent=true;
}