Is it possible to call servlet and get values from it within JAVASCRIPT

Question

I have a form where I want the values of text fields to be changed on select change event, I want to call the onchange event for the select field to calls a javascript function that gets values from database but its not working, need workable example according to this scenario (I am not familiar with AJAX/JSON/JSTL etc so I haven't used those).

       (NEED WORKABLE EXAMPLE)

          -----------------------------
   Name   |                           |   (Select Field)
          -----------------------------

          -----------------------------
   Price  |                           |   (Text Field)
          -----------------------------

          -----------------------------
   Image  |                           |
          |                           |
          |                           |
          |                           |
          |                           |
          -----------------------------

          <script>

            function updateFields()
            {
              <% ProductDAO yy = new ProductDAO();
              String q = request.getParameter("orproductname");
              String f = yy.getProductPrice(q);
              request.setAttribute("price", f);
              %>

              document.getElementById("orproprice").value = f;
            }

          </script>

                <form name="product" method="post" action=".\GetProducts">
                        <div class= "form">
                            <div class="input-group margin-bottom-sm">
                                <span class="input-group-addon">
                                    <i class="fa fa-bars"></i>
                                </span>
                                <select class="form-control" name="orproductname" id="orproname" onchange="document.product.submit();">
                                <% ProductDAO pdr = new ProductDAO(); String[] kl = pdr.getProductNames();
                                for(int i=0;i<kl.length;i++) {%>
                                <option><% out.println(kl[i]); %></option>
                                <% } %>
                                </select>
                            </div>
                            <div class="input-group margin-bottom-sm">
                                <span class="input-group-addon">
                                    <i class="fa fa-bars"></i>
                                </span>
                                <input class="form-control" type="text" placeholder="Original Price" id="orproprice" name="orproductprice" required>
                            </div>
                            <div class="input-group margin-bottom-sm">
                                <span class="input-group-addon">
                                    <i class="fa fa-picture-o"></i>
                                </span>
                                <img class="img-responsive" src="img/game-2.jpg" alt="Product" >
                            </div>

                        <input class="btn btn-primary send" style="width:200px; margin-right:20px" type="submit" value="Order">
                        <input class="btn btn-primary send" style="width:200px" type="reset" value="Clear">
                    </form>
                </div>  
            </div>

Answer 1

Send a POST AJAX request to .\GetProducts. See jQuery docs for AJAX: http://api.jquery.com/jquery.ajax/ . Example:

$.ajax({
  method: "POST",
  url: "/GetProducrs",
  data: { formField: value, ... }
}).done(function( data ) {
    //process data
});