CODEWITHSUNDEEP
javascriptjavajspservlets
blinkettaro
blinkettaro

Reputation: 361

Passing parameter to Servlet

I have some problem when I pass a parameter to my servlet. In particular I want to pass the value of the selected item of a dropdown select. But the problem is that when I click the choosed item, it doesn't happen anything (the servlet, in fact, should call a jsp to visualize a table). Moreover how can I visualize this jsp under the dropdown select? I don't want open another window: how you can see I have a tab menu ( each tab represents an operation on a Database and I don't want open other window when I call the various jsp )

 protected void doPost(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {

        response.setContentType("text/html");
        String i = request.getParameter("choose");
        PrintWriter out = response.getWriter();
        if(i.equals("products")){
        ArrayList<Products> list = new ArrayList<Products>();
         list =  bDBean.listProduct();

        request.setAttribute("list", list);

        String arg = "/" + this.getServletName() + ".jsp";
        RequestDispatcher dispatcher =    this.getServletContext().getRequestDispatcher(arg);
        dispatcher.forward(request, response);
        }
        if(i.equals("login")){
         // something
        }

        }

MY jsp

<script type="text/javascript">
function passingParameter(form1){
var choose = document.getElementById("choose");

var selectedValue =choose.options[choose.selectedIndex].value;
 }
</script>

<div class="tab-content">

<div id="operation 1" class="tab-pane fade in active">

  <h3>OPERATION 1</h3>


  <div class="form-group">
  <label for="scelta">Select the table you want to see:</label>

   <form name=form1 action="NewServlet" method="post">
    <select id="choose" class="form-control" name="choose"onchange="passingParameter(this.form)">
      <option value="products">Products</option>
       <option value="login">Login</option>
     </select>
    </form>
    </div> 
    </div>
    <div id="add" class="tab-pane fade">
    <h3>OPERATION 2</h3>

    </div>
     <div id="OPERATION 2" class="tab-pane fade">
      <h3>OPERATION 2</h3>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="OPERATION 3" class="tab-pane fade">
      <h3>OPERATION 3</h3>
     <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>

Upvotes: 0

Views: 2012

Answers (1)

Nicolas Filotto
Nicolas Filotto

Reputation: 44965

What you are obviously looking for is to be able to modify a page fragment without reloading the entire page which can be done with AJAX (Asynchronous JavaScript and XML). The common way is to use JQuery, here is a simple code that you will need to adapt a little bit to be integrated in your code:

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
</head>
<body>
   <form>
    <select id="choose" class="form-control" name="choose">
       <option value="products">Products</option>
       <option value="login">Login</option>
     </select>
    </form>
<div id="result"></div>
<script>
$( "#choose" ).change(function( event ) {
   $.post("NewServlet", "choose=" + $( "#choose" ).val(), function( data ) {
      $( "#result" ).empty().append( data );
   });
});
</script>
</body>
</html>

This code:

  1. Loads JQuery 3.1.0 (this code will work with JQuery 1.x as it is very basic)
  2. In the script section it adds an handler that will post to your servlet the value of the select and put the response into the div whose id is result anytime the selected option change

Upvotes: 1

Related Questions