title: How to create search button that runs a jsp scriplet without refreshing?
body: <p>I am trying to write a code which generates a list of products from a database, the goal is that when you click the search button, a list of products satisfying the search are displayed on a <strong>Specific DIV (i have given that div an id)</strong>. I tried to use the mediocre approach of combining javascript and java (and failed). 
  I want to run the second scriplet (i have marked it in the code) when the search button is clicked so that the contents in <strong>div1</strong> are replaced by these, but i don't know how to redirect the result to div1, and for some reason it always shows empty input during run Here is my current code (connections etc are handled by a custom bean) sorry i am new to programming, but if possible please give concrete steps:
      
             
                 <h2> Search Product </h2></p>
  
  <pre><code>    &lt;br&gt;&lt;br&gt;
      &lt;div class ="col-sm-4"&gt;
      &lt;label&gt; Search By ID &lt;/label&gt;
      &lt;br&gt;
      &lt;input name ="s1" id="e1" type ="text" class ="input-lg"  placeholder= "search ID"/&gt;
  &lt;/div&gt;
  &lt;div id="div1"&gt;   
  &lt;%
          Set rs = Etn.execute("select * from products");
          while(rs.next()){
              %&gt;&lt;div class="big"&gt;&lt;label&gt;&lt;%
          out.write(rs.value("id")+"&lt;br&gt;");
          out.write (rs.value("image_name")+"&lt;br&gt;");
          out.write(rs.value("image_actual_name")+"&lt;br&gt;");
          out.write(rs.value("product_type")+"&lt;br&gt;&lt;br&gt;");
              %&gt;&lt;/label&gt;&lt;br&gt;&lt;input type="checkbox" /&gt;&lt;/div&gt;&lt;%
          }
  
      %&gt;       
  
  &lt;/div&gt;
  
  
  &lt;%  // this one--&gt;&gt;
      if(request.getParameter("b1")!=null){
      String abc=request.getParameter("s1");
      if(abc==null){}
      else{
      Set rs2 = Etn.execute("select * from products where id = '"+abc+"'");
          if(rs2.next()){
          out.write(rs2.value("id")+" ");
          out.write (rs2.value("image_name")+"&lt;br&gt;");
          out.write(rs2.value("image_actual_name")+" ");
          out.write
     (rs2.value("product_type")+"&lt;br&gt;&lt;br&gt;");
          }  
  
   }
      }
   %&gt;
  </code></pre>