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

Posted 2021-03-30

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

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

答案

我能找到的最接近的副本是：Exclude field from a form in JSF。但是，它没有显示如何使用JavaScript执行此操作。

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

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