Preventing multiple Submit button clicks

Gary King

14y4.3kAJAX

I have a rather large web form with btnSubmit event code that can take several seconds to complete.
The problem is that users are clicking the submit button multiple times which causes multiple records to be added to the database.

I found a JS based solution at http://www.codeproject.com/KB/ajax/disable_btn_on_click.aspx which initially seemed to work well.

My form has a number of panels that are initially hidden (it is whilst they are hidden that the above solution works).

However, at least one of the panels must be visible (panels become visible when user clicks Checkboxes - one per panel). When one or more of the panels become visible, the solution does not work (that is to say that the submit button remains enabled).

I'm not sure why this is, but suspect it may have something to do with the submit button's reference changing when panels become visible (I may be totally wrong!)

Can anyone suggest how to get the solution to work, or alternative solutions to prevent multiple submits?

Thanks
Gary

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Gary King14y ago
Still struggling to find a solution....

To recap, I want to prevent users from clicking "Submit" more than once.
One solution that I found (see my original post) would work fine, but doesn't for the following reason....

The page includes 3 GridViews that enable the user to add additional items in the FooterTemplate. The textboxes in the FooterTemplate have RequiredFieldValidators which are causing the solution to not work (the JS checks each validator on the page to see if it isValid).
There are something like 20 textboxes with validators in the 3 FooterTemplates.

The FooterTemplate only CausesValidation when a user clicks on the new line item's "Add New" LinkButton.
If the user is submitting the entire form, then the FooterTemplate validators are not required.

Any ideas what I need to do with the JS solution to get around the fact that these FooterTemplate validators are causing the JS to detect an invalid form?

                if (!Page_Validators[i].isvalid) { //if not valid
                        ResetToDefault(btn, oldValue); //break;
                        }

Is there a way that I could add a condition to the above that will ignore the Page_Validator if it is contained in one of the GridView FooterTemplates? Something along the lines of.....

                if(!Page_Validators[i].isvalid && PageValidators[i] not contained in FooterTemplate)

Thanks

Gary
Sam Hobbs14y ago
I agree that you need to solve the problem of disabling the submit button. You should disable the submit button when it should not be used.

I think it would also help to give the user better feedback of what is happening, if that is not being done. Something such as a message that appears when the update is being done. Ensure that the messae or whatever it is does not stay after the datgabase update has been done because you want the user to be able to trust the message. Do everything you can to make the message accurate and reliable.

You could also add code to your database update so that it does not try to do the update when an update is already being done.
Gary King14y ago
Ok, I have found the problem....

The panels have GridViews and the footer templates have RequiredFieldValidators that are causing the page to be deemed as invalid which then resets the Submit button text back to "Submit".

Just need to figure out how to get around this now.