This week's book giveaway is in the Design forum.
We're giving away four copies of Design for the Mind and have Victor S. Yocco on-line!
See this thread for details.
Win a copy of Design for the Mind this week in the Design forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Dynamic form/checkbox problem

 
John Kilbourne
Ranch Hand
Posts: 30
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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:
http://javascript.internet.com/forms/select-one.html
http://javascript.internet.com/forms/limit-boxes.html
http://javascript.internet.com/forms/controlled-boxes.html
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.

Eric
 
John Kilbourne
Ranch Hand
Posts: 30
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 30
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Here is the original jsp page for the code I posted:
[CODE}<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:import url="/WEB-INF/javascript/functions.js" />
<jsp:useBean id="roleGp" scope="session" class="bean.RoleGroupQueryBean"/>
<jsp:setProperty name="roleGp" property="*"/>

<html>
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">
<fieldset>
<table>
<tr><td>
<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>
</tr>
<tr>
<td></td>
<td>&nbsp <input type="checkbox" name="inGroup"
value="notInGroup"
onclick="cBvalidate()" />
This role is not in the group <br>
</td>
</tr>
</table>
<br>
&nbsp <input type="checkbox" name="valRange"
value="allVals"
onclick="checkBoxValRange()"/>
ANY value of this role is OK
<br>
&nbsp <input type="checkbox" name="valRange"
value="oneVal"
onclick="checkBoxValRange()"/>
ONLY the value below is OK
<br>
&nbsp &nbsp<input type="text" name="roleVals" size="35"/>
<br>
&nbsp <input type="checkbox" name="valRange"
value="DescentVals"
onclick="checkBoxValRange()"
checked="checked"/>
The value above or any descendent is OK
</fieldset><p><p>
</c:forEach>
</form>

</html>[/CODE]
 
John Kilbourne
Ranch Hand
Posts: 30
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic