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;
}
|