I have a HTML form which contains a button. When the button is pressed a function is called which queries the database and displays a list box(list box populated with values from the database). This way user can add any number of list boxes.

Here is my code

<%@page contentType="text/html"%>
<script type="text/javascript" src="scripts.jsp"></script>
<form action="submitAddClient.jsp">
<div id="container"></div>
<input type="button" onclick="insSelect();" value="Add Dept" />
<input type="submit">

Here is scripts.jsp

var myDataArray = new Array(
con = ConnectionManager.getConnection();
rs=stmt.executeQuery("SELECT dept_name FROM department ");

while( rs.next() )
data = rs.getString(1);
out.println("\"" + data + "\",");

function insSelect()
var containerElement= document.getElementById("container");
var newSelectElement = document.createElement("select");
newSelectElement.name="dept_name"; //Problem Line
for (i=0; i < (myDataArray.length - 1); i++)

var newOptionElement = document.createElement("option");
newOptionElement.setAttribute("value", myDataArray[i]);
newOptionElement.innerHTML = myDataArray[i];




This all works fine.
But there is one problem.
Each select box is created with the name "dept_name" (when the button is pressed more than once and hence there are more than one list boxes). So when i submit the form I get value of only one list box(even when there are multiple list boxes).