How do I send back the randomly selected checkboxes values back to servlet

Question

Hello All,
Assume I have a table of N rows with two columns. I will have one checkbox on column-1 and zero or more on column-2. Column-1 may represent categories and column-2 represents associated things. Just like below:
Column 1 Column 2
Books HFSJ EJB Hibernate
Foods Pizza Steak
Electronics Computers HDTV others
Now user can select EJB and Hibernate of first row, HDTV of the third row, and no value from second row and submit
Now I'm looking at adding EJB and Hibernate to a list and add that list to a map with Books as Key. In the same way HDTV to a list and Electronics as the Key.
I tried to accomplish the above thing with the below code, but I actually ended up with a Map with three keys, Books, Foods and Electronics and for each corresponding key, all the elements in the list.
</tr>
<% for(int i=0;i<suiteNames.size();i++){tempSuiteName=(String)suiteNames.get(i); %>
<tr>
<td width="400">
<input type="checkbox" onklick="toggle(this,'<%=tempSuiteName%>')"/><%=tempSuiteName%>
</td>
<td width="400" id="<%=tempSuiteName%>" style="visibility:hidden">
<%
tempMode=new TreeSet();
modeNames=(ArrayList)modeMap.get((String)suiteNames.get(i)); for(int j=0;j<modeNames.size();j++){
tempModeName=(String)modeNames.get(j);
%>
<input type="checkbox" name="<%=tempModeName%>" onklick="<%tempMode.add(tempModeName);%>" /><%=tempModeName%>
<%}tempMap.put(tempSuiteName,tempMode); %>
</td>
</span>
</tr>
<%}%>
</table>
<%
if(tempMap.size()!=0)
session.setAttribute("map",tempMap);
%>
Can some one tell me why this code is not working as intended.
My jsp code is bit cluttering with lot of java code and I know its a bad idea. My primary task is to get this work and later I can look in tweaking the code.

Answer 1

Javascript(client side) can not call your java code(serverside) directly
You are mixing up Java/JSP with javascript.
You need to understand the JSP lifecycle
1 - All Java/JSP code runs. Produces an HTML page.
2 - Java stops running
3 - Page gets loaded in browser - javscript starts running from client side events.
You have your onclick events trying to run java code. Thats not gonna happen.
Instead what you need to do is split this code into two pieces
1 - render the table
2 - read parameters coming from a request.
A bit better formatted, with the unnecessary bits taken out:
<table>
<% for(int i=0;i<suiteNames.size();i++){
  tempSuiteName=(String)suiteNames.get(i);
  %>
     <tr>
     <td width="400">
          <input type="checkbox" onklick="toggle(this,'<%=tempSuiteName%>')"/><%=tempSuiteName%>
     </td>
     <td width="400" id="<%=tempSuiteName%>" style="visibility:hidden">
     <%
     modeNames=(ArrayList)modeMap.get((String)suiteNames.get(i));
     for(int j=0;j<modeNames.size();j++){
          tempModeName=(String)modeNames.get(j);
          %>
          <input type="checkbox" name="<%=tempModeName%>"" /><%=tempModeName%>
          <%}%>
     </td>
     </span>
     </tr>
     <%}%>
</table>{code}
Even better using JSTL for loops instead of scriptlet code:
{code}
<c:forEach var="suite" items="${suiteList}">
  <tr>
     <td width="400">
          <input type="checkbox" onklick="toggle(this,'${suite}')"/>${suite}
     </td>
     <td width="400" id="<%=tempSuiteName%>" style="visibility:hidden">
        <c:forEach var="mode" items="${modeMap[suite]}">
            <input type="checkbox" name="${mode}">" />${mode}
     </c:forEach>
</td>
</c:forEach>And at the server end, something like this:
for(int i=0;i<suiteNames.size();i++){
   tempSuiteName=(String)suiteNames.get(i);
   modeNames=(ArrayList)modeMap.get((String)suiteNames.get(i));
    tempMode=new TreeSet();
   for(int j=0;j<modeNames.size();j++){
     tempModeName=(String)modeNames.get(j);
     if (request.getParameter(tempModeName) != null){
       tempMode.add(tempModeName)
   tempMap.put(tempSuiteName,tempMode);
}If a checkbox is clicked, when you submit the form it will come through as a name/value pair.
If it is not checked, that parameter won't be there.
A better approach just occured to me
Another approach would be use checkbox name=[column1] and value=[column2]
<c:forEach var="suite" items="${suiteList}">
  <tr>
     <td width="400">
          <input type="checkbox" onklick="toggle(this,'${suite}')"/>${suite}
     </td>
     <td width="400" id="<%=tempSuiteName%>" style="visibility:hidden">
        <c:forEach var="mode" items="${modeMap[suite]}">
            <input type="checkbox" name="${suite}" value="${mode}">" />${mode}
     </c:forEach>
</td>
</c:forEach>
{code}
Then at the server end:
{code}
for(int i=0;i<suiteNames.size();i++){
   tempSuiteName=(String)suiteNames.get(i);
String[] selectedModes =   request.getParameters("tempSuiteName");
   for(int j=0;j<selectedModes.size();j++){
     tempModeName=selectedModes[j];
     tempMode.add(tempModeName);    
   tempMap.put(tempSuiteName,tempMode);
{code}
Hope this helps some,
evnafets