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?

Answer 1

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();"/>

Answer 2

Im not really sure but have you tried:

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

Answer 3

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>