title: Retrieve data from database and display it dynamically in the rows of the table using textboxes
body: <p>I'm currently working on an Inventory Management project. I m working with JSP and MySQL on Netbeans Platform. In my project on querying I need to retrieve values from the database and display it in a  table. The rows to be displayed should be dynamic in my page. They should be displayed in any number. Suppose When I want to retrieve values based on a particular choice I select, I should be able to display all the data based on the choice and display it in the rows of the table. I am not able to display it in multiple rows of my table because I m using text boxes to display the values.
  Here is the code snippet:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;select name="choice_type"&gt;
              &lt;option&gt;select&lt;/option&gt;
              &lt;option value="part_type"&gt;part_type&lt;/option&gt;
              &lt;option value="category"&gt;category&lt;/option&gt;
              &lt;option value="names"&gt;names&lt;/option&gt;
              &lt;/select&gt;    
          &lt;/td&gt;
      &lt;/tr&gt; 
      &lt;tr&gt;
          &lt;th&gt;VAL&lt;/th&gt;
          &lt;th&gt;VAL DESC&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt; &lt;input type="text" name="val"  id="val" size="15" /&gt;&lt;/td&gt;
          &lt;td&gt; &lt;input type="text" name="val_desc"  id="val_desc" size="15" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;   
  
  &lt;input type="submit" name="Query" value="Query" onClick="getData();"/&gt;
  </code></pre>
  
  <p>The getData() function is as follows:</p>
  
  <pre><code>function getData(){ 
      xmlHttp=GetXmlHttpObject()
      var id=document.getElementById("choice_type").value;
      var url="choice_retrieval.jsp";//The code for this file is defined below 
      url=url+"?choice_type="+id;
      xmlHttp.onreadystatechange=stateChanged 
      xmlHttp.open("GET",url,true)
      xmlHttp.send(null);
  }
  
  function stateChanged(){ 
      if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){ 
      var showdata = xmlHttp.responseText; 
      var strar = showdata.split(":");
      if(strar.length&gt;1){
      var strname = strar[1];
      document.getElementById("val").value= strar[1];
      document.getElementById("val_desc").value= strar[2];
     }
  } 
  </code></pre>
  
  <p>The Code snippet for choice_retrieval.jsp is as follows:</p>
  
  <pre><code>&lt;%
      String ch = request.getParameter("choice_type").toString();
      System.out.println(ch);
      String data ="";
      try{
          Class.forName("com.mysql.jdbc.Driver");
          Connection con = DriverManager.getConnection("jdbc:mysql://", "", "");
          Statement st=con.createStatement();
          ResultSet rs=st.executeQuery("select * from master_panel where choice_type='"+ch+"'");
          while(rs.next())
          {
              data = ":" + rs.getString("val") + ": " + rs.getString("val_desc");
          }
          out.println(data);
          System.out.println(data);
      }
      catch(Exception e) {
          System.out.println(e);
      }
  %&gt;
  </code></pre>
  
  <p>Database table used here is master_panel(choice_type varchar,val varchar,val_desc varchar). I have not put any constraints as of now. Based on the choice_type value I need to retrieve the corresponding data(val and val_desc) from the database and display it in dynamic rows.</p>