skip to Main Content
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


  1. But i want the submit to happen only inside the searchResult div

    If you use a form inside the <div>:

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

    then you can use your code

    document.querySelector('#searchResult form').submit() 
    
    Login or Signup to reply.
  2. You can’t target a <div> element with a form submission. <form> elements have a target 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 the target 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search