Disable submit button to prevent double click, but only upon successful form validation

Question

Currently my page has a submit button which is disabled when it is clicked, to prevent double submission.

<tr:commandButton onclick="this.disabled=true;" />

However, if there are errors in the form, the user will not be able to re-submit the form since the submit button is disabled.

Is there any way for me to disable the submit button only when it clears the form validation?

FYI my page looks something like this:

<rich:tabPanel headerAlignment="left" switchType="client" width="100%">
    <rich:tab label="#{cfsMsgs.main_tab_label}" name="mainTab">
        <rich:spacer height="20" />
        <ui:include src="add_main.xhtml" />
    </rich:tab>
    <rich:tab label="#{cfsMsgs.qualification_tab_label}" name="qualificationTab">
        <rich:spacer height="20" />
        <ui:include src="add_qualification.xhtml" />
    </rich:tab>

    <!-- ...and so on... -->

And on each tab there's a mix of validation methods like

<tr:inputText ...>
    <tr:validateRegExp pattern="^\S.*" ... />
</tr:inputText>

...and

<tr:inputText validator="#{backingBean.validate}" ...>
</tr:inputText>

Is it possible to set my button to something like onclick="this.disabled=[page error indicator, e.g. page.hasError or something similar]"?

EDIT 1: An alternative is to re-render the button if the page fails to submit. I made a change to my code as follows:

<tr:commandButton onclick="this.disabled=true;" id="btnSubmit">
    <a4j:support event="oncomplete" reRender="btnSubmit" ajaxSingle="true" oncomplete="alert('done!');" />
</tr:commandButton>

The oncomplete event in a4j:support is for me to see if it was done. However when I tried running this, I didn't see any alert. Does that mean I'm doing something wrong here?

What happens if sending the form is not successful? How will the user retry? Or what if someone doesn't have javascript enabled? It would be better to always leave the button enabled and include a transaction code in the form which would prevent duplicates. — teambob, Oct 21 '11 at 04:03
Hi teambob, like I mentioned, I don't want to leave the button enabled because then it allows the user to double-click it, resulting in duplicate submissions. I have server-side checks to prevent duplicate submissions but even that isn't foolproof. — ohseekay, Oct 21 '11 at 05:58
I'm not sure how that can be done in JSF, but the general idea behind double form submission is that you track each displayed form by providing unique ID (UUID for example). When you render Form you just generate ID and set it as a value of some hidden field. Upon submission you check this ID against a map of already submitted IDs. If it's in map - the for is obviously was already submited. Hope that helps — SirVaulterScoff, Oct 21 '11 at 08:06
Another idea for your case is to disable submit button for several seconds just to prevent "ocasional double clicks". If form validation fails user will have to stay on that page for several seconds to correct details which in case will lead to submit button being enabled again. — SirVaulterScoff, Oct 21 '11 at 08:09
@SirVaulterScoff that sounds possible. How should I go about doing that? — ohseekay, Oct 21 '11 at 08:36
Not sure how to do it whith JSF, but it can be done fairly easy with pure JS/jquery. — SirVaulterScoff, Oct 24 '11 at 05:54
Check this http://stackoverflow.com/questions/5889451/jsf-2-0-and-multiple-submission-problem — Abdullah Shaikh, Nov 28 '11 at 14:13

score 0 · Answer 1 · edited Oct 21 '12 at 13:07

Button tag:

<asp:Button ID="Submit" runat="server" Text="Submit"
            Width="150" OnCommand="GoFromHere" CommandArgument="2"
            OnClientClick="disableSubmitButtons()" />

In HTML:

<input type="submit" value="Submit" onclick="disableSubmitButtons()" />
<script type="text/javascript">
//disable the button and do nothing if user clicks a second time
function disableSubmitButtons() {
    event.srcElement.onclick = doDisable;
}
function doDisable(){
    event.srcElement.disabled=true;
}

</script>

gaffcz · Accepted Answer · 2012-06-26T10:54:16.563

This works very fine for me (based on javaScript):

//Initialize our submit flag to false
var formSubmitted = false;

/**
 * Prevent from submitting a form more than once
 * @returns {Boolean}
 */
function submitForm()
{   
  //has the form been submitted before?
  if( formSubmitted == true )
  {
     alert("This form has already been submitted!");
     return false;
  }
  formSubmitted = true;

  return true; // Submit form
}

And apply it in commandButton:

<h:commandButton action="#{bean.action}" onclick="return submitForm();"/>

score 0 · Answer 3 · answered Oct 21 '11 at 04:05

0

Im not really sure but have you tried:

<tr:commandButton onsubmit="this.disabled=true;" />

answered Oct 21 '11 at 04:05

mgm8870

679
1
5
10

No this doesn't work. When I click SUBMIT, as long as the page is still loading, I can still click it again and again, resulting in duplicate submissions. – ohseekay Oct 21 '11 at 05:48

Disable submit button to prevent double click, but only upon successful form validation

3 Answers3