JSF：一个文本输入框控制着我所有的按钮

Question

我在这里尝试将 JSF 与三个不同的输入文本框一起使用，这些输入文本框与三个单独的按钮一起使用。

但是，我发现前两个文本框根本不起作用，最后一个文本框的用户输入文本是唯一可以与所有三个按钮一起使用的文本。

谁能告诉我我的代码有什么问题？谢谢。

            <h:panelGrid columns="1" style="padding-left:20px;" cellspacing="30">
            <h:panelGroup style="color: black; font-size:medium;" >
                <b style="color: black;">Search for species reviews</b> by name (scientific or common)<br/>
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;<h:inputText id="name" size="20" value="#{searchBean.inputName}" required="false" />                                 
                    &nbsp;&nbsp;<h:commandLink action="#{searchBean.searchByName}" class="buttons">Search</h:commandLink></p>
                <h:message for="name" errorClass="errors" style="color: red;" />   
                </h:panelGroup>

                <h:panelGroup style="color: black; font-size:medium;">
                <p><b style="color: black; font-size:medium; padding-bottom:25px;">Find Species Reviews</b><br/></p>
                    &nbsp;&nbsp;&nbsp;&nbsp;<h:inputText id="searchOne" size="20" value="#{searchBean.inputName}" required="false" /> &nbsp; <h:commandLink action="#{searchBean.searchByOther}" class="buttons">Enter Species</h:commandLink>&nbsp; or &nbsp;&nbsp;<h:commandLink action="#{searchBean.reviewSearchAction}" class="buttons
">Andvanced Search</h:commandLink>
                </h:panelGroup>

                <h:panelGroup style="color: black; font-size:medium;">
                <p><b style="color: black; font-size:medium;">Find Fire Studies</b><br/></p>
                    &nbsp;&nbsp;&nbsp;&nbsp;<h:inputText id="searchTwo" size="20" value="#{searchBean.inputName}" required="false" /> &nbsp; <h:commandLink action="#{searchBean.searchByFireStudy}" class="buttons">Enter Species</h:commandLink>&nbsp; or &nbsp; <h:commandLink action="#{searchBean.fireStudySearchAction}" class="buttons">Advanced Search</h:commandLink>
                </h:panelGroup>

Answer 1

将所有内容放在同一个形式中没有错。但是，由于您对所有三个<h:inputText> 使用相同的value="#{searchBean.inputName}"，所以当您提交整个表单时，最后一个<h:inputText> 的值将覆盖前两个的值。

要解决这个问题，我认为您可以尝试以下方法之一：

1. 使用 bean 的不同属性来保存不同输入文本的值（即，第一个使用 inputName1，第二个使用 <h:inputText>，第二个使用 inputName2，依此类推）。

2. 如果您在同一页面上呈现结果，您可以使用<f:ajax> 并使用其execute 属性告诉JSF 要提交什么。您的按钮将如下所示：

   <h:inputText id="input1" value="searchBean.inputName" />
   
   <h:commandLink value="Search 1" action="#{searchBean.searchByName}" class="buttons">
       <f:ajax execute="input1" render="result" />
   </h:commandLink>
   

Answer 2

您需要为每个<h:panelGroup>s 使用单独的<h:form>s，因为<h:commandLink> 需要位于<h:form> 内，如果单个<h:commandLink> 中有多个<h:commandLink> 按钮，则每个<h:form>按钮将提交相同的表单。

        <h:panelGrid columns="1" style="padding-left:20px;" cellspacing="30">
<h:form>
        <h:panelGroup style="color: black; font-size:medium;" >
            <b style="color: black;">Search for species reviews</b> by name (scientific or common)<br/>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;<h:inputText id="name" size="20" value="#{searchBean.inputName}" required="false" />                                 
                &nbsp;&nbsp;<h:commandLink action="#{searchBean.searchByName}" class="buttons">Search</h:commandLink></p>
            <h:message for="name" errorClass="errors" style="color: red;" />   
            </h:panelGroup>
</h:form>
<h:form>
            <h:panelGroup style="color: black; font-size:medium;">
            <p><b style="color: black; font-size:medium; padding-bottom:25px;">Find Species Reviews</b><br/></p>
                &nbsp;&nbsp;&nbsp;&nbsp;<h:inputText id="searchOne" size="20" value="#{searchBean.inputName}" required="false" /> &nbsp; <h:commandLink action="#{searchBean.searchByOther}" class="buttons">Enter Species</h:commandLink>&nbsp; or &nbsp;&nbsp;<h:commandLink action="#{searchBean.reviewSearchAction}" class="buttons">Andvanced Search</h:commandLink>
            </h:panelGroup>
</h:form>
<h:form>
            <h:panelGroup style="color: black; font-size:medium;">
            <p><b style="color: black; font-size:medium;">Find Fire Studies</b><br/></p>
                &nbsp;&nbsp;&nbsp;&nbsp;<h:inputText id="searchTwo" size="20" value="#{searchBean.inputName}" required="false" /> &nbsp; <h:commandLink action="#{searchBean.searchByFireStudy}" class="buttons">Enter Species</h:commandLink>&nbsp; or &nbsp; <h:commandLink action="#{searchBean.fireStudySearchAction}" class="buttons">Advanced Search</h:commandLink>
            </h:panelGroup>
</h:form>