<form> 标签未包含在 .jsp 中 <s:iterator> 的第一行 <tr> 中

Question

我正在 Struts 框架中开发 Java webapp。当我遍历报告列表时（请参见下面的代码），它将“预览”按钮嵌入到除第一行之外的每一行中都有 id="doDisplayPDF" 的表单中。 (java)

<s:iterator var="counter"  value="reports" status="key">
     <tr  id="row_<s:property value="repId"/>"
         class="">
          <td>  
            <input type="radio" id="<s:property value="repId"/>" name="reportsAvaiable" 
                 value="<s:property value="repId"/>" onclick="validate(this.id)"  />
              <s:property value="RepName"></s:property>
          </td>
    <td>
        <s:property value="template"/>
    </td>
    <td>
        <c:choose>
            <c:when test="${not empty template}">
                    <s:form id="doDisplayPDF" theme="simple" target="_blank" action="doDisplayPDF">
                      <s:hidden name="fullFileName" value="%{reportDesinationPath + template}" />
                      <s:submit type="button" cssClass="btn btn-warning" cssStyle="height:auto;" value="Preview" onmouseover="style.cursor='pointer'" />
                    </s:form>              
            </c:when>
             <c:otherwise>N/A</c:otherwise>
        </c:choose>
    </td>  
    <td> 
        <s:file name="upload" label="Report Name" tooltip="Choose PDF to upload" 
                accept=".pdf" required="true"
                cssClass="form-control" cssStyle="height:auto;" />
    </td>                                     
    <td>                                        
        <s:submit type="button" cssClass="btn btn-success" cssStyle="height:auto;" label="Upload For Delivery" value="submit"/>
    </td>
</tr>
 </s:iterator>

所以 html 输出看起来像这样（第一个周围没有标签，但它在报告列表中的每个后续行之后......：

     <td>
        <input id="5090" name="reportsAvaiable" value="5090" onclick="validate(this.id)" type="radio">
           pdfnamesecret1
      </td>
        <td>
            pdfnamesecret1.pdf
        </td>   

                  <input name="fullFileName" value="pdfnamesecret1.pdf" id="doDisplayPDF_fullFileName" type="hidden">
                  <button type="submit" id="doDisplayPDF_0" value="Preview" class="btn btn-warning" style="height: auto; cursor: pointer;" onmouseover="style.cursor='pointer'">
                    Preview
                    </button>
    </td>  
    <td> 
        <input name="upload" value="" accept=".pdf" id="f_1_upload" class="form-control" style="height:auto;" type="file">
    </td>                                     
    <td>                                        
        <button type="submit" id="f_1_0" value="submit" class="btn btn-success" style="height:auto;">
            Upload For Delivery
            </button>

    </td>
</tr>

     <tr id="row_5073" class="">
          <td>  
            <input id="5073" name="reportsAvaiable" value="5073" onclick="validate(this.id)" type="radio">
              pdfnamesecret2
          </td>
    <td>
        pdfnamesecret2.pdf
    </td>
    <td>


                <form id="doDisplayPDF" name="doDisplayPDF" action="/report-admin/doDisplayPDF.action" target="_blank" method="post">
                  <input name="fullFileName" value="pdfnamesecret2.pdf" id="doDisplayPDF_fullFileName" type="hidden">
                  <button type="submit" id="doDisplayPDF_0" value="Preview" class="btn btn-warning" style="height: auto; cursor: pointer;" onmouseover="style.cursor='pointer'">
                    Preview
                    </button>

                </form>

    </td>  
    <td> 
        <input name="upload" value="" accept=".pdf" id="f_1_upload" class="form-control" style="height:auto;" type="file">
    </td>                                     
    <td>                                        
        <button type="submit" id="f_1_2" value="submit" class="btn btn-success" style="height:auto;">
        Upload For Delivery
        </button>

    </td>
</tr>

编辑：考虑到 Andrea Ligios 的考虑！

我找到了一种通过不嵌套表单来提交我想要的操作的方法（仍然不确定为什么第一行是输出中唯一没有嵌套表单的行）。

<c:choose>
<c:when test="${not empty template}">
<input type="button" cssClass="btn btn-warning clickable" cssStyle="height:auto;" value="Preview" onclick="submitForm2('<s:property value="%{reportDesinationPath + template}"/>');" />
</c:when>
<c:otherwise>N/A</c:otherwise>
</c:choose>

然后调用一个 javascript 函数，该函数在 .jsp 的底部提交一个带有隐藏参数的表单：

Javascript 函数： 函数 submitForm2(_filepath){
document.getElementById("selectedReportToPreview").value=_filepath; document.getElementById('f_2').submit(); } 第二种形式（未嵌套）：

<s:form theme="simple" action="doDisplayPDF" id="f_2" name="f_2">
<s:hidden name="fullFileName" value="%{reportDesinationPath + template}" id="selectedReportToPreview" />
</s:form>

Answer 1

一些注意事项：

1. 永远不要嵌套表格。由于您使用的是字段和提交按钮（外部按钮），我假设所有表格本身都在表单内。由于您在 td 中创建表单，因此您将有嵌套的表单，这是无效的并且不起作用。否则，您将无法使用外部 s:submit 按钮提交任何内容；
2. 永远不要在一个页面中分配相同的 id 两次；它是无效的 HTML，并且在使用 ID 选择器时不起作用；
3. 避免在不需要时将 Struts 标记与 JSTL 混合。使用<s:if> 和<s:else> 而不是<c:when> 和<c:otherwise>；
4. 尽可能尝试使用 Struts 标签。你的<input type="radio"> 里面有两个<s:property/> 很容易变成一个不那么冗长、更易读的<s:radio>。 <form> 和 <s:form>;
5. 去除噪声以获得更好的信号：例如class=""应该去除；

6. 更喜欢 CSS 而不是内联样式，更喜欢 CSS 而不是 javascript 用于演示目的：

   cssClass = "btn btn-warning" 
   cssStyle = "height:auto;" 
   onmouseover = "style.cursor='pointer'"
   

   可以翻译成

   cssClass = "btn btn-warning clickable" 
   

   在 CSS 文件中：

   .clickable {
       cursor : pointer;
       height : auto;
   }
   

   因此您将来可以即时更改它，而无需重新部署整个项目来更改像 height : auto 这样的幼稚设置。

Answer 2

据我了解，只要按钮位于 ID 为“doDisplayPDF”下，按钮的 ID 为“doDisplayPDF_0”。 因为你的代码在这里：

<s:form id="doDisplayPDF" theme="simple" target="_blank" action="doDisplayPDF">
    <s:hidden name="fullFileName" value="%{reportDesinationPath + template}" />
    <s:submit type="button" cssClass="btn btn-warning" cssStyle="height:auto;" value="Preview" onmouseover="style.cursor='pointer'" />
</s:form>     

另一个按钮不在此表单下，因此它们具有不同的 ID。

不确定这是否能回答您的问题。