This week's giveaway is in the Spring forum.
We're giving away four copies of REST with Spring (video course) and have Eugen Paraschiv on-line!
See this thread for details.
The moose likes HTML, CSS and JavaScript and the fly likes Dynamic form/checkbox problem Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login

Win a copy of REST with Spring (video course) this week in the Spring forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Dynamic form/checkbox problem" Watch "Dynamic form/checkbox problem" New topic

Dynamic form/checkbox problem

John Kilbourne
Ranch Hand

Joined: Aug 22, 2001
Posts: 30
I have spent many hours on this problem, and can't seem to crack it. How can a checkbox in an array of checkboxes know which index is its home? The checkbox can pass up its corresponding form object, and the array of checkboxes, but how can an onKlick() function for a specific checkbox know that this checkbox is the 7th in a list of 12? The final number of checkboxes is not known ahead of time.

The user first selects from a multiple-select list; the multiple-select specifies the "names" in a set of name-value pairs, and the subsequent checkboxes and textfield specifies the range of values for each name. For each name there are two sets of properties to specify.

My first iteration of this did not permit the user to select a list of names, it only allowed one name. The additional properties were specified with radio buttons.

I can generate the checkboxes ok using c:forEach jsp tags, but I need to a way to make them act like sets of radio buttons. For each dynamically selected name, I have two groups of CB's ("groupA", "groupB") For each name, I want the user to pick one (and only one) from groupA and one and only one from groupB.

The web gave a few tantalizing hints:
Eric Pascarello

Joined: Nov 08, 2001
Posts: 15385
How are the checkboxes named? That is the first question.

There are multiple ways that you can implement this.

First off if you are dynamically writing them out, you can save yourself all of the hassle by including the index number in the onclick event

for example onclick="FunctionCall(12)"

If that does not suit your needs, you can use the form array to access the elements, but I need information on how they are being named.

John Kilbourne
Ranch Hand

Joined: Aug 22, 2001
Posts: 30
edited to better format the code)

There are two names, one for each group of checkboxes. Here is the page source for the generated code; I am using convoluted trial and error in my fxn cBvalidate() to find a way to check off one and only one of the top set of checkboxes. In my mind I feel I should be able to make a function to which I pass a parameter "modulus" that lets me make every _X_ checkboxes act like a radio group. For this application, the first group of checkboxes would have modulus 2 (there ar a pair of them), adn the second group would have modulus 3. I appreciate any help you can offer.
[ September 18, 2004: Message edited by: John Kilbourne ]
John Kilbourne
Ranch Hand

Joined: Aug 22, 2001
Posts: 30
Here is the original jsp page for the code I posted:
[CODE}<%@ taglib prefix="c" uri="" %>
<c:import url="/WEB-INF/javascript/functions.js" />
<jsp:useBean id="roleGp" scope="session" class="bean.RoleGroupQueryBean"/>
<jsp:setProperty name="roleGp" property="*"/>

Give the value or range of values for each role<p>

<form name="roleValues" method="get" action="processRGValues.jsp">
<c:forEach items="${paramValues.rolesInGroup}"
var="role" varStatus="status">
<b><c :-o ut value="${role}"/></b><br>
</td><td>&nbsp <input type="checkbox" name="inGroup"
value="inGroup" checked="checked"
onclick="cBvalidate()" />
This role is in the group <br>
<td>&nbsp <input type="checkbox" name="inGroup"
onclick="cBvalidate()" />
This role is not in the group <br>
&nbsp <input type="checkbox" name="valRange"
ANY value of this role is OK
&nbsp <input type="checkbox" name="valRange"
ONLY the value below is OK
&nbsp &nbsp<input type="text" name="roleVals" size="35"/>
&nbsp <input type="checkbox" name="valRange"
The value above or any descendent is OK

John Kilbourne
Ranch Hand

Joined: Aug 22, 2001
Posts: 30
I'm seeing a general solution in a sort of data-structures approach, but i don't know if I am over-complicating things.

There can be a function, called at onKlick() for each checkbox, that takes as a parameter the "modulus" or number of adjacent checkboxes that need to act like a radio group. The function unchecks any previously checked box that "collides" with a newly checked box in the same "block".

To be most general, it should probably take the array of checkboxes as a parameter as well as the modulus value. "numBlocks" is the number of blocks, so for a 12 element array of checkboxes with a modulus of 3, there are 4 blocks.

function CBRadioGroup(cbArray, modulus)

Iterate over cbArray using an inner and an outer loop:
for(outer = 0; outer < numBlocks; outer++){
for(inner= 1; inner <= modulus; inner ++){
var collisions = new Array()
when the inner loop finds a checked box, add its index location
(inner x outer) to collisions[collisions.length]
At the end of the inner loop, check the length of collisions[];
if it is > 1, there was a collision; the length should be 2.
Determine which of the two colliding indices was checked first.
Uncheck that box
End this iteration of the inner loop
End outer loop.

Determining which of the two colliding indices was checked earlier means compparing the current cbArray with the one used at the last onKlick()

If there is a simpler way, please tell me.
I agree. Here's the link:
subject: Dynamic form/checkbox problem
jQuery in Action, 3rd edition