Common Approaches to Prevent Duplicate Submissions

The standard technique to prevent duplicate form submissions involves disabling the submit button using JavaScript after the user clicks it. This prevents further clicks and subsequent duplicate requests.

Basic Button Disabling Technique

<asp:Button runat="server" ID="submitButton" Text="Submit" 
    UseSubmitBehavior="false" 
    OnClientClick="this.disabled=true; this.form.submit();"/>

Important considerations:

• UseSubmitBehavior="false": This seting ensures the generated input element is of type button rather than submit, allowing server-side events to trigger properly.
• Avoid using the ValidationGroup attribute, as it may prevent server-side event execution.

Handling Validator Controls

When validator controls are present, simply disabling the button may bypass validation. The solution involves manually triggering validation before submission:

<script type="text/javascript">
function disableButton(btn) {
    if (typeof(Page_ClientValidate) === 'function' && !Page_ClientValidate()) {
        return false;
    }
    btn.disabled = true;
    return true;
}
</script>

<asp:TextBox runat="server" ID="inputField"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ControlToValidate="inputField"
    ValidationGroup="MainGroup" ErrorMessage="Required" />
<asp:Button runat="server" ID="submitButton" Text="Submit" 
    UseSubmitBehavior="false" ValidationGroup="MainGroup"
    OnClientClick="if(!disableButton(this)) return false;" 
    OnClick="submitButton_Click" />

Addressing Rapid User Clicks

Even with validation and disabling, extremely rapid clicks can still cause duplicate submissions if the browser hasn't disabled the button before the second click occurs.

Test scenario to reproduce the issue:

<script type="text/javascript">
function simulateDoubleClick() {
    var btn = document.getElementById('submitButton');
    btn.onclick();
    btn.onclick(); // Simulate two rapid clicks
}
</script>

<input type="button" value="Test Double Click" onclick="simulateDoubleClick();"/>

Advanced Prevention Technique

To handle rapid clicks, track click timestamps and reject submissions within a specified time interval:

<script type="text/javascript">
var clickTimestamps = [];

function preventDuplicateSubmission(btn, validationGroup) {
    clickTimestamps.push(new Date());
    
    if (clickTimestamps.length > 1 && 
        (clickTimestamps[clickTimestamps.length-1] - clickTimestamps[clickTimestamps.length-2] < 1000)) {
        return false; // Reject if clicks within 1 second
    }
    
    if (typeof(Page_ClientValidate) === 'function') {
        if (validationGroup === undefined) {
            if (!Page_ClientValidate()) return false;
        } else {
            if (!Page_ClientValidate(validationGroup)) return false;
        }
    }
    
    btn.disabled = true;
    return true;
}
</script>

<asp:Button runat="server" ID="submitButton" Text="Submit"
    UseSubmitBehavior="false" ValidationGroup="MainGroup"
    OnClientClick="if(!preventDuplicateSubmission(this, 'MainGroup')) return false;"
    OnClick="submitButton_Click" />

Implementation notes:

• Return value control is more reliable than event cancellation methods
• The validationGroup parameter allows targeted validation when multiple validator groups exist