Extract data from the database and dynamically display it in the rows of the table using text fields

Question

I am currently working on an inventory management project. I work with JSP and MySQL on the Netbeans platform. In my project, upon request, I need to get the values ​​from the database and display them in a table. The lines that should be displayed must be dynamic on my page. They should be displayed in any quantity. Suppose that when I want to get values ​​based on a specific selection that I select, I should be able to display all the data based on the selection and display it in the rows of the table. I cannot display it in multiple rows of a table because I use text fields to display 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); } %> 

The database table used here is master_panel (choice_type varchar, val varchar, val_desc varchar). At the moment, I did not put any restrictions. Based on the value of choice_type, I need to get the corresponding data (val and val_desc) from the database and display them in dynamic rows.

Answer 1

Assuming the data is being returned (your stateChanged method is stateChanged called), you need to dynamically create table rows (and their contents, text fields) in your stateChanged method, changing the DOM.

To change the DOM to create a table structure, the code should read something like this (if you have already deleted 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, including SQL in JSP is bad for a number of reasons. Even worse is the creation of SQL queries with string concatenation - this opens up your system for SQL injection, especially when the concatenated string includes a string captured in the browser.

Answer 2

You do a few things here, especially having the database code in JSP, but to answer your specific question, you have to write your result set into a list and set this list to the query area with a specific identifier. You can then iterate over it using the JSTL tag and display the output using {} notation.