How to submit a form inside a <div> into the same <div>

Question

I have 2 <div> in my JSP 

<div id="searchCriteria">
// included one search criteria JSP with search button. 
</div>
<div id="searchResult">
// included search result jsp with <previous> <next> navigation links
</div>

问题：单击上一个和下一个导航链接时，我想将

div

（#searchResult）中可用的表单提交到同一个div本身而不打扰其他

div

有什么帮助吗？

document.querySelector('#searchResult form').submit()

- 试过这个但是它将表单提交给整个内容。但我希望提交只发生在

searchResult

div

Answer 1

您不能通过表单提交来定位

<div>

元素。

<form>

元素有一个

target

属性 但它只针对窗口、选项卡和框架。

您可以将

<div>

替换为

<iframe>

，然后将

<form>

放入您默认加载到框架中的单独文档中。 （您不需要

target

属性，因为默认行为针对当前框架/窗口/选项卡）。

您还可以使用 submit 事件 listener 拦截表单提交，prevent 表单的正常行为，使用 FormData 对象捕获表单中的数据，使用 通过 Ajax 提交Fetch API，然后用结果替换<div>

的内容

。

---

也就是说，更典型的做法是替换 whole 页面并在分页链接中包含保留搜索条件所需的数据，以便您可以在加载页面时重新创建它。

Answer 2

但我希望提交只发生在

searchResult

div

如果你在

<div>

里面使用表格：

<div id="searchResult">
 <form>
  // included search result jsp with 
  <previous> <next> navigation links
 </form>
</div>

然后你可以使用你的代码

document.querySelector('#searchResult form').submit()