Retrieve data from database and display it dynamically in the rows of the table using textboxes

Question

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:

<table>
    <tr>
        <td>
            <select name="choice_type">
            <option>select</option>
            <option value="part_type">part_type</option>
            <option value="category">category</option>
            <option value="names">names</option>
            </select>    
        </td>
    </tr> 
    <tr>
        <th>VAL</th>
        <th>VAL DESC</th>
    </tr>
    <tr>
        <td> <input type="text" name="val"  id="val" size="15" /></td>
        <td> <input type="text" name="val_desc"  id="val_desc" size="15" /></td>
    </tr>
</table>   

<input type="submit" name="Query" value="Query" onClick="getData();"/>

The getData() function is as follows:

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>1){
    var strname = strar[1];
    document.getElementById("val").value= strar[1];
    document.getElementById("val_desc").value= strar[2];
   }
} 

The Code snippet for choice_retrieval.jsp is as follows:

<%
    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);
    }
%>

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.

Answer 1

Assuming that the data is being returned (your stateChanged method is being invoked) you need to dynamically create the table rows (and their contents, the text boxes) in your stateChanged method by modifying the DOM.

To modify the DOM to create the table structure the code should read something like this (assuming you've already removed the previously displayed rows):

var table = document.getElementById('tableId');
var data = xmlHttp.responseText.split(":");

for (int i = 0; i < data.length; i + 2) 
{
  var valueText = document.createElement('input');
  valueText.type = 'text';
  valueText.name = 'value' + i;
  valueText.value = data[i];

  var valueCell = document.createElement('td');
  valueCell.appendChild(valueText);

  var descriptionText = document.createElement('input');
  descriptionText.type = 'text';
  descriptionText.name = 'value' + i;
  descriptionText.value = data[i + 1];

  var descriptionCell = document.createElement('td');
  descriptionCell.appendChild(descriptionText);

  var tableRow = document.createElement('tr');
  tableRow.appendChild(valueCell);
  tableRow.appendChild(descriptionCell);

  table.tBodies[0].appendChild(tableRow);
}

Also, as @TrueDub said, putting SQL in JSPs is bad for a whole host of reasons. What's worse is building SQL queries with string concatenation - it opens your system to SQL injection attacks, especially when the string being concatenated includes a string captured in the browser.