Project .NET Submit: Step by step guide to dealing with disabling a .NET submit button after it is clicked on.

Purpose
The purpose of this project is to demonstrate how to disable a .NET submit button after a user clicks on it.

Problem
The submit button in my ASPX page stays active, allowing the user to submit multiple times while the form submission is being processed which results in getting many submissions.

Solution
In order to kill the ASPX submit button, as trivial as it is to do normally, because you are using .NET you need to do some jumping jacks, jog in place for ten minutes and then do the dying cockroach for a while; once you've done all that then things will work. Sorry for the sarcasm there, but with such a trivial matter ideally it should be just as trivial to handle in .NET. However, since it is not, let me show you how to "kill" the ASPX submit button when someone submits the form; this process also works in those cases where there's a lot of server-side processing taking place that prevents .NET from serving updated content back to the client for updating the page.

Basically what you need to do since you've got script manager invoked on the page is (1) add "onclick" to the ASPX button in the code-behind Page_Load function, (2) add a javascript function to the page, (3) surround the ASPX button in a DIV, and, (4) in the code-behind Btn_Click code you need to ensure the submit button is not visible.

To begin with, let me show you how this is possible by showing you the initial state of the form and progressing from there to a working solution.

Starter ASP.NET 3.5 Code Example:
This is the default state of the form and code-behind of the ASPX page. Unfortunately, people can continue to click on the button as many times as they want until .NET responds.

ASPX Code

<form...>
<!-- Message area to show the user such as when form validation fails -->
<asp:Label ID="SubmitMessage" runat="server"></asp:Label>
<!-- The submit button of the form -->
<asp:Button ID="Submit" Text="Submit" runat="server" />
</form>

ASPX Code-Behind Code

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
' Do something if not a post-back
Else
' Do someting if a post-back
End If
End Sub
Private Sub Submit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Submit.Click
' Handle the submission of the form
End Sub

NOTE: At this point if the user submits the form, it will sit there in the web browser with the submit button active, allowing the user to click on the button as many times as they want until the server responds.

Failure #1:
You would think that all you would need to do is (1) add some code to the code-behind for the Submit_Click function to disable the button as shown below.

ASPX Code

<form...>
<!-- Message area to show the user such as when form validation fails -->
<asp:Label ID="SubmitMessage" runat="server"></asp:Label>
<!-- The submit button of the form -->
<asp:Button ID="Submit" Text="Submit" runat="server" />
</form>

ASPX Code-Behind Code

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
' Do something if not a post-back
Else
' Do someting if a post-back
End If

End Sub
Private Sub Submit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Submit.Click
' Disable the button so people cannot continue to click on it
Submit.Visible = False
thePage.Update()
' Handle the submission of the form
End Sub

NOTE: Unfortunately that is the wrong answer. With .NET submerged into the Submit_Click code-behind page, although you direct it to hide the button and perform an update, .NET is not going to do that until it has finished processing the entire function. Handy, eh?

Failure #2:
Since the submit button is still active on the page until .NET is finished with processing the Submit_Click function, the next step is to naturally progress toward having javascript take over since it is active in the web browser while we are waiting for .NET to finish processing the form.

ASPX Code

<script type="text/javascript" language="javascript">
function disableButtonAtSubmit() {
    /* Unfortunately "SubmitMessage" does not exist */
    if (document.getElementById("SubmitMessage")) {
        document.getElementById("SubmitMessage").style.visibility = "visible";
        document.getElementById("SubmitMessage").innerHTML = "Preparing request...";
    }
    /* "Submit" does exist, but you cannot change it */
    if (document.getElementById("Submit")) {
        document.getElementById("Submit").enabled = false;
        document.getElementById("Submit").style.visibility = "hidden";
        document.getElementById("Submit").style.display = "none";
   }
}
</script>
<form...>
<!-- Message area to show the user such as when form validation fails -->
<asp:Label ID="SubmitMessage" runat="server"></asp:Label>
<!-- The submit button of the form -->
<asp:Button ID="Submit" Text="Submit" runat="server" />
</form>

ASPX Code-Behind

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
' Since we've got a .NET button, in order to add "onclick" to it we have to do it here
Submit.Attributes.Add("onclick", "disableButtonAtSubmit()")
If Not IsPostBack Then
' Do something if not a post-back
Else
' Do someting if a post-back
End If
End Sub
Private Sub Submit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Submit.Click
' Disable the button so people cannot continue to click on it
Submit.Visible = False
thePage.Update()
' Handle the submission of the form
End Sub

NOTE: Unfortunately that is the wrong answer. Although .NET is setup to execute the javascript function "disableButtonAtSubmit()" (and it does) when the submit button is clicked, the .NET label (which equates to a span tag) "SubmitMessage" can't be found by javascript, so you cannot show a message to the user (.Net likes to rewrite the IDs of elements). Additionally, although "Submit" is found by javascript, you can't actually control it - such as hiding it so the user cannot continue to click on it.

Success #1:
At least we are getting warm now with javascript. In order to show a message to a user when they submit the form and to disable the button we need to (1) create a span tag, and, (2) place the submit button inside of a DIV.

ASPX Code

<script type="text/javascript" language="javascript">
function disableButtonAtSubmit() {
    /* Inform the user the submission is being processed until .NET responds */
    document.getElementById("SubmitMessageInitial").style.visibility = "visible";
    document.getElementById("SubmitMessageInitial").innerHTML = "Processing submission...";
    /* Hide the .NET submit button until .NET responds */
    document.getElementById("btnContainer").style.display = "none";
}
</script>
<form...>
<!-- Message area to show the user while .NET is processing the submission -->
<span id="SubmitMessageInitial" style="color: #ff0000; visibility: hidden;"></span>
<!-- Message area to show the user such as when form validation fails -->
<asp:Label ID="SubmitMessage" runat="server"></asp:Label>
<!-- The submit button of the form -->
<div id="btnContainer">
    <asp:Button ID="Submit" Text="Submit" runat="server" />
</div>
</form>

ASPX Code-Behind Code

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
' Since we've got a .NET button, in order to add "onclick" to it we have to do it here
Submit.Attributes.Add("onclick", "disableButtonAtSubmit()")
If Not IsPostBack Then
' Do something if not a post-back
Else
' Do someting if a post-back
End If
End Sub
Private Sub Submit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Submit.Click
' Disable the button so people cannot continue to click on it
Submit.Visible = False
thePage.Update()
' Handle the submission of the form
End Sub

NOTE: At this point, when someone clicks on the .NET submit button the javascript will tell the user something is going on, hide the submit button so they cannot continue to click on it repeatedly and, when .NET finally does respond, the button is still hidden by the code-behind setting in the Submit_Click function (so they still cannot continue to click on it after submission provided the button will still be on the page).

Success #2:
Another solution to this age-old dilemna with .NET may be to use a simple method using two buttons. This may also be useful if you are having trouble with the submit button even after approaching it from what has been provided previously.

function disableButtonAtSubmit() {
    /* Hide the "preCompleted" submit button until .NET responds */
    document.getElementById("hideMe").style.display = "none";
    /* Submit the .NET form by clicking on the .NET button */
    document.getElementById("Completed").click();
}
<!-- The submit button the user clicks on, which is initially visible -->
<div id="hideMe">
    <input type="button" id="preCompleted" value="Submit" onclick="disableButtonAtSubmit()" />
</div>
<!-- The .NET submit button of the form, never visible to the user so they cannot click on it -->
<div style="visibility:hidden">
    <asp:Button ID="Completed" Text="Submit" runat="server" />
</div>

NOTE: Here, you easily control a regular button which the user can click on. Once that action is done then the regular button becomes hidden and the javascript function performs a click on the hidden .NET button to submit the form.