ClickOnce JavaScript





3.00/5 (2 votes)
Some JavaScript to add to a project to ensure buttons are clicked only once
Introduction
Many times, a developer wants the clicking of one button on the screen to disable the other buttons on the screen to prevent multiple submissions. Attached is some JavaScript that provides this feature.
Using the Code
Over the internet, there are several ways to prevent multiple button clicks in ASP.NET, this is just another way to do it. Click here in order to see a server side control doing a similar thing that this JavaScript is doing.
<script language="JavaScript">
<!--
/// <summary>
/// This function disables the submission buttons on the page
/// after checking to see if the page's validators are valid.
/// If they are not, then the changes don't take place.
/// The purpose of this method is to prevent the user from having
/// multiple submissions by clicking rapidly on the same button.
/// </summary>
function DisableButtonClick(valGroup) {
// Start the validation false
var cont = false;
// Check to see if the page has Validators to fire
if (typeof Page_ClientValidate != "undefined") {
// There are validators available,
// so fire them based on the ValidationGroup passed in
cont = Page_ClientValidate(valGroup);
}
else {
// There are no validators to fire, just disable the buttons
cont = true;
}
// Only continue if the validators are valid or
// there are no validators on the page
if (cont) {
// Find a button, and if it exists on this page, then disable it
var btn = document.getElementById('<%= BtnSaveGeneral.ClientID %>');
if (btn != null) {
btn.disabled = true;
btn.value = 'Saving...';
}
}
}
-->
</script>
Usage of this would be inline in HTML.
<asp:Button ID="BtnSave" runat="server" Text="Save" OnClick="BtnSaveGeneral_Click"
OnClientClick="DisableButtonClick('Save');"
UseSubmitBehavior="false" ValidationGroup="Save" />
Or in the code behind by changing the "onclientclick
" attribute to the button.
BtnSave.Attributes.Add("onclientclick", "DisableButtonClick('Save');
BtnSave.UseSubmitBehavior = false;
Set the UseSubmitBehavior
to false
so ASP.NET will render JavaScript to allow the Button_Click
event to fire on the server even though the JavaScript disables the button.
You can send in a blank ValidationGroup
too if you want, by sending in an empty string
.
Points of Interest
This JavaScript function explicitly names the buttons to clear inside the function. Other options would be to pass into the function the buttons to disable when you call the OnClientClick
, or to register each button that you wish to disable into an array and iterate through the array of names, disabling each control found.
History
- 25th June, 2009: Initial post