Preventing multiple form submissions in asp.net webform functions correctly on a desktop version, but encounters issues on the mobile version of Safari or Chrome on iPhone.
The following script prevents users from submitting the same form multiple times by changing the text of the submit button to "wait..." after the form has been submitted and validated successfully.
While this script works well on desktops, it fails to update the button text to "wait..." on the default iPhone browser or Chrome. The reason for this issue is unclear, and troubleshooting has been unsuccessful so far.
BUTTON
<asp:Button ID="btnSave" runat="server" Text="Submit" CausesValidation="true" CssClass="btn btn-primary" ValidationGroup="vgForm" OnClick="btnSave_Click" OnClientClick="ClientSideClick(this)" UseSubmitBehavior="False" /> <asp:Button ID="btnSave" runat="server" Text="Submit" CausesValidation="true" CssClass="btn btn-primary" ValidationGroup="vgForm" OnClick="btnSave_Click" OnClientClick="ClientSideClick(this)" UseSubmitBehavior="False" />
//Avoid Multiple Submission
function ClientSideClick(myButton) {
// Client side validation
if (typeof (Page_ClientValidate) == 'function') {
if (Page_ClientValidate("vgForm") == false) {
return false;
}
}
// Ensure the button is not of type "submit" but "button"
if (myButton.getAttribute('type') == 'button') {
// Disable the button
myButton.disabled = true;
myButton.className = "btn-inactive";
myButton.value = "Wait...";
}
return true;
}