ASP.Net – How to control client-side functionality based on triggered event (i.e. What button was clicked)

Let’s say you have a scenario that whenever a button event or any event for the matter is raised on the client-side you want to display text in a label on the screen that says something like, “PROCESSING… PLEASE WAIT.” At the end of processing, you then would clear out the text to that label at the end of the server-side event routine.

To do this on the client-side, you add a handler for the OnClientClick event, let’s say for a SEARCH button like this:

<asp:Button ID="btnSearch" runat="server" Text="Search" Width="81px"  
    OnClientClick="SetProcessLabelFromClient" TabIndex="14" 
    CausesValidation="False"/>

At the top of your aspx, you then add the javascript like this:

function SetProcessLabelFromClient
{
  document.getElementById('<%= txtProcessing.ClientID %>').value = 'PROCESSING.... PLEASE WAIT.';
}

This works fine and all, but what if you have a SAVE button and you are using validation controls? The problem? Your label says, “PROCESSING… PLEASE WAIT.” and won’t go away because your…let’s say… telephone textbox error validation says “INVALID FORMAT”. The page never got submitted to the server in order to clear the label.

The solution? Pass the button control ID to the javascript like this:

<asp:Button ID="btnDSave" runat="server" Text="Save" Width="81px"  
    OnClientClick="SetProcessLabelFromClient(this.id)" TabIndex="30" 
    ValidationGroup="DetailGroup" UseSubmitBehavior="False" />

The difference is your are now passing the script a parameter called, “this.id”

Last but not least, modify your javascipt to except the parameter and interrogate whether you are dealing with the SAVE button. If the SAVE button, then execute the Page_ClientValidate method. If the page is valid, set the label. If not valid, then don’t set it. If the button is not SAVE, then set the label.

The modified script looks like this:

function SetProcessLabelFromClient(tid)
  {
    if (tid == "btnDSave")
       {
         Page_ClientValidate();
         if (Page_IsValid)
             document.getElementById('<%= txtProcessing.ClientID %>').value = 'PROCESSING.... PLEASE WAIT.';
    } else 
    {
        document.getElementById('<%= txtProcessing.ClientID %>').value = 'PROCESSING.... PLEASE WAIT.';
    }
  }