javascript 如何将a中的表单提交到< div>相同的< div>

f87krz0w  于 2023-05-21  发布在  Java
关注(0)|答案(1)|浏览(116)
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()-尝试了这个方法,但是它提交了整个表单的内容。但是我希望提交只发生在searchResultdiv中。

yruzcnhs

yruzcnhs1#

表单提交不能以<div>元素为目标。<form>元素有一个target属性,但它只针对窗口、选项卡和框架。
您可以将<div>替换为<iframe>,然后将<form>放在一个单独的文档中,默认情况下将该文档加载到框架中。(您不需要target属性,因为默认行为针对当前帧/窗口/选项卡)。
您还可以使用submit事件listener拦截表单提交,prevent拦截表单的正常行为,使用FormData对象捕获表单中的数据,使用the Fetch API通过Ajax提交数据,然后使用<div>replace the content提交结果。
也就是说,更典型的做法是替换整个页面,并在分页链接中包含保留searchCriteria所需的数据,以便在加载页面时重新创建它。

相关问题