Question

目前我的页面有一个提交按钮，在单击时会被禁用，以防止双重提交。

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

但是，如果表单中存在错误，则由于提交按钮被禁用，用户将无法重新提交表单。

是否有任何方法可以在清除表单验证时禁用提交按钮？

仅供参考我的页面看起来像这样：

<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... -->

在每个标签上都有各种验证方法，如

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

...和

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

是否可以将我的按钮设置为onclick =“this.disabled = [页面错误指示符，例如page.hasError或类似的东西] ”？< / p>

编辑1：另一种方法是在页面无法提交时重新呈现按钮。我对代码进行了如下更改：

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

a4j中的oncomplete事件：支持让我看看它是否已经完成。但是当我尝试运行时，我没有看到任何警报。这是否意味着我在这里做错了什么？

Answer 1

我不确定，但你试过了吗？

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

Answer 2

按钮标记：

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

在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>

Answer 3

这对我来说非常好（基于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
}

并将其应用于commandButton：

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

禁用提交按钮以防止双击，但仅在成功进行表单验证后

3 个答案: