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>
Question : on click of previous & next navigation link, i want to submit the form available inside the div
(#searchResult) to the same div itself without disturbing the other div
Any help ?
document.querySelector('#searchResult form').submit()
– tried this but it submits the form to the whole content. But i want the submit to happen only inside the searchResult
div
2
Answers
If you use a form inside the
<div>
:then you can use your code
You can’t target a
<div>
element with a form submission.<form>
elements have atarget
attribute but that only targets windows, tabs, and frames.You could replace the
<div>
with an<iframe>
and then put the<form>
in a separate document which you load into the frame by default. (You won’t need thetarget
attribute since the default behaviour targets the current frame/window/tab).You could also use a submit event listener to intercept the form submission, prevent the normal behaviour of the form, capture the data in the form using a FormData object, submit it via Ajax using the Fetch API, then replace the content of the
<div>
with the result.That said, it would be more typical to replace the whole page and include the data needed to preserve the searchCriteria in the pagination links so you can recreate it when the page is loaded.