JSP中的動態文本字段與選擇項目時從MYSQL數據庫的數據

Question

我試圖創建一個窗體，其中用戶從數據庫獲取產品列表，並選擇產品後，檢索與該產品關聯的價格並從數據庫中分配值到第二個文本字段，其他文本字段也是如此。同樣在改變選擇時，值應該被更新。需要建議，如果這是可能的和如何？例子會很棒。由於

他是什麼，我試圖做

<form method="post" action=".\Sale"> 
     <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="updateFields()"> 
        <option>--Select Product--</option> 
       <% 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-bars"></i> 
       </span> 
       <input class="form-control" type="text" placeholder="Discount" id="orprodis" name="orproductdiscount" required> 
      </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="Sales Tax" id="orprosalestax" name="orproductsalestax" required> 
      </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="Final Price" id="orprofinalprice" name="orproductfinalprice" required> 
      </div> 
      <div class="input-group margin-bottom-sm"> 
       <span class="input-group-addon"> 
        <i class="fa fa-home" ></i> 
       </span> 
       <textarea class="form-control" type="textarea" placeholder="Shipping Address" name="orproductshippingaddress" required></textarea> 
      </div> 
      <div class="input-group margin-bottom-sm"> 
       <span class="input-group-addon"> 
        <i class="fa fa-calendar"></i> 
       </span> 
       <input class="form-control" type="text" placeholder="Order Date" id="datepicker" name="orproductorderdate" required> 
      </div> 
      <div class="input-group margin-bottom-sm"> 
       <span class="input-group-addon"> 
        <i class="fa fa-user"></i> 
       </span> 
       <input class="form-control" type="text" placeholder="User ID" name="orproductuserid" 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/bride-1.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> 

Answer 1

你可以做，使用ajax。

查找以下鏈接從數據庫中獲取數據使用Jsp和servlets和ajax。

1. http://www.javacodegeeks.com/2014/09/jquery-ajax-servlets-integration-building-a-complete-application.html

2. How to use Servlets and Ajax?

3. http://www.programming-free.com/2013/03/ajax-fetch-data-from-database-in-jsp.html

試試看;）

Answer 2

I will explain this into step by step with code.  
    step 1. in jsp file display all product into select option tag. and give select tag name and **id**. 

    step 2. using ajax to define where to get the required data.call servlet. this servlet define the your query you wants using productid. productid pass by ajax. jQuery("#your select tag id").change(function(){ 
        var productid  = jQuery(this).val(); 

        jQuery.ajax({ 
         async : false, 
         url  : 'your servlet url', 
         type : 'POST', 
         dataType: 'json', 
         data : {'productid':productid}, 

         success : function(response){ 

          if (response.success == 'true' && response.html != '') { 
           $('#your price text box id').val(response.html) 
          }else{ 
           jQuery("#user_role_parent").html(""); 

          } 
         }, 
         error : function(){ 
          alert("Some thing went wrong!!!"); 
         }, 
        }); 
    Step 3. response.html come from servlet 

I hope you are understand this code and solve your problem.