使用JavaScript / Ajax排除表单字段提交到支持bean

时间:2018-02-27 10:42:04

标签: javascript jsf jsf-2.2

如何将JSF表单字段排除在提交给支持bean之外? 我有很多字段,并根据其中一个输入字段的条件,我想要排除另一个字段提交。

我将检查JavaScript中的条件,然后想要将此特定字段排除在提交给辅助bean之外。

1 个答案:

答案 0 :(得分:0)

我能找到的最接近的副本是:Exclude field from a form in JSF。但是,它没有说明如何使用JavaScript。

正如Kukeltje已经指出的那样,我不会寻求客户端解决方案。您可以使用Ajax获得相同的结果。作为示例,我创建了一个表单,其中选中复选框时提交值1。如果未选中该复选框,则将提交值。

<h:form>
  <h:panelGrid columns="3">
    <h:outputLabel for="check" value="Check"/>
    <h:selectBooleanCheckbox id="check" value="#{myBean.checked}">
      <f:ajax event="change" render="submit"/>
    </h:selectBooleanCheckbox>
    <h:message for="check"/>

    <h:outputLabel for="value1" value="Value 1"/>
    <h:inputText id="value1" value="#{myBean.value1}" required="true"/>
    <h:message for="value1"/>

    <h:outputLabel for="value2" value="Value 2"/>
    <h:inputText id="value2" value="#{myBean.value2}" required="true"/>
    <h:message for="value2"/>

    <h:commandButton id="submit" value="Submit">
      <f:ajax execute="#{myBean.execute()}" render="@form"/>
    </h:commandButton>
  </h:panelGrid>
</h:form>

要提交规则的字段由命令按钮的<f:ajax execute="..."属性控制。它应包含一个或多个客户端ID,以空格分隔。在此示例中,值在辅助bean中创建:

public String execute() {
  return checked ? "value1" : "value2";
}

正如您所看到的,它基于checked,它与复选框绑定。如果选中,则应执行value1,否则执行value2

为了更新命令按钮的execute属性,我已将<f:ajax event="change" render="submit"/>添加到复选框以更新命令按钮(及其执行客户端ID)。

我已在字段中添加了必填项,以显示如果您将其中的任何一个字段显示为空,则会显示错误消息。

使用输入字段的呈现属性可以获得相同的效果:

<h:form>
  <h:panelGrid columns="3">
    <h:outputLabel for="check" value="Check"/>
    <h:selectBooleanCheckbox id="check" value="#{myBean.checked}">
      <f:ajax event="change" render="@form"/>
    </h:selectBooleanCheckbox>
    <h:message for="check"/>

    <h:outputLabel for="value1" value="Value 1"/>
    <h:inputText id="value1" value="#{myBean.value1}" required="true"
                 disabled="#{not myBean.checked}"/>
    <h:message for="value1"/>

    <h:outputLabel for="value2" value="Value 2"/>
    <h:inputText id="value2" value="#{myBean.value2}" required="true"
                 disabled="#{myBean.checked}"/>
    <h:message for="value2"/>

    <h:commandButton id="submit" value="Submit">
      <f:ajax execute="@form" render="@form"/>
    </h:commandButton>
  </h:panelGrid>
</h:form>