1

目前我的页面有一个提交按钮，当它被点击时被禁用，以防止重复提交。

<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 或类似内容] "？

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

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

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

4

3 回答 3

0

按钮标签：

<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>
于 2012-06-25T16:31:35.890 回答
0

这对我来说非常好（基于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();"/>
于 2012-06-26T10:16:31.827 回答
0

我不太确定，但您是否尝试过：

<tr:commandButton onsubmit="this.disabled=true;" />
于 2011-10-21T04:05:25.073 回答