arrays of checkboxes with javascript? [Archive] - Community for Webmasters & Developers

Time:
Scotland: Fri, 9:45 pm
Rhode Island: Fri, 4:45 pm
Florida: Fri, 4:45 pm
New Mexico: Fri, 2:45 pm
California: Fri, 1:45 pm

Buy this Ad Space.

180px wide.

Please get in touch with KH@ if you are interested and make an offer.

Altrincham Las Cruces Dona Ana Realtor's Network Las Cruces homes for sale Las Cruces New Mexico

US$10 per year - Save $100s!
The Fabulously Unfair
WebX Auction Bar. For Ebay etc.
Ro-Sham-Bo the opposition. Laugh like Eric Cartman when you win! CLICK HERE NOW!

More information and sign-up.

WebXpertz Hosting.
Custom fit from $5pm. PHP/MySQL
You'll save money, we'll save money. Seems fair to me. Interested? If so Please PM me here and tell me what you need. Thanks!

Las Cruces Las Cruces homes for sale Las Cruces Las Cruces homes for sale

PDA

For continued disscussion on this topic : arrays of checkboxes with javascript?

muscle

04-15-2003, 10:40 PM

I have a schedule on my site that displays like so...

Tuesday, April 15, 2003
11:15am-12:15am Class 1
11:15am-12:15am Class 2
11:15am-12:15am Class 3
11:15am-12:15am Class 4
2:45pm-3:30pm Topic A
2:45pm-3:30pm Topic B
2:45pm-3:30pm Topic C

Wed, April 16, 2003
and so on and so on.

Is there some way with javascript I can ensure the user only selects one class for each time slot before they proceed? Basically I don't want the user to select (2) 11:15-12:15 classes. The only problem is, I'm doing this with Coldfusion, as far as my ouput goes. Can I still do this with Javascript somehow. Thanks so much beforehand!!

Coldfusion code...

<cfoutput query="getSchedule" group="date">
<tr>
<td colspan="3"><b>#date#</b></td>
</tr>
<cfoutput>
<tr>
<td><input type="checkbox" name="event" value="#id#"></td>
<td>#time#</td>
<td>#topic#</td>
</tr>
</cfoutput>
</cfoutput>

diades

04-15-2003, 10:44 PM

hi muscle

perhaps use a radio control so that they can only select one?

muscle

04-15-2003, 10:49 PM

Unfortunately, I can't do it. I was planning on using radio buttons, but was told I can't switch the design. Is there still something I can do with Javscript and the checkboxes?

diades

04-15-2003, 11:19 PM

Hi muscle

If you were using radios, would the groups be thus? :

group1:

11:15am-12:15am Class 1
11:15am-12:15am Class 2
11:15am-12:15am Class 3
11:15am-12:15am Class 4

group2:

2:45pm-3:30pm Topic A
2:45pm-3:30pm Topic B
2:45pm-3:30pm Topic C

muscle

04-15-2003, 11:27 PM

Diades:

Thank youfor the prompt reply. Your assumption is 100% correct.

diades

04-16-2003, 12:08 AM

Hi Muscle

Try this out (tested in IE6):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>check</title>
<script type="text/javascript">
function getVals(frm){
alert("The value of the first group is:" + rad1(frm) + " and the value of the second is:" + rad2(frm))
}
function rad1(frm){
var el = document.getElementsByName("checkbox1")
for(var i = 0; i < el.length;i++) if(el[i].checked) return i
}
function rad2(frm){
var el = document.getElementsByName("checkbox2")
for(var i = 0; i < el.length;i++) if(el[i].checked) return i
}
function rad(frm,item){
var el = document.getElementsByName(item.name)
for(var i = 0; i < el.length;i++){
if(el[i] != item) {
el[i].checked = false
} else if(el[i] == item && !item.checked){
item.checked = true
}
}
}
</script>
<style type="text/css">
label{display:block}
div.clsfrm{
margin-bottom:10px;
}
</style>
</head>
<body>
<form action="">
<div class="clsfrm">
<label for="checkboxa"><input type="checkbox" id="checkboxa" name="checkbox1" onclick="rad(this.form,this)">group1 0</label>
<label for="checkboxb"><input type="checkbox" id="checkboxb" name="checkbox1" onclick="rad(this.form,this)">group1 1</label>
<label for="checkboxc"><input type="checkbox" id="checkboxc" name="checkbox1" onclick="rad(this.form,this)">group1 2</label>
<label for="checkboxd"><input type="checkbox" id="checkboxd" name="checkbox1" onclick="rad(this.form,this)">group1 3</label>
</div>
<div class="clsfrm">
<label for="checkbox1"><input type="checkbox" id="checkbox1" name="checkbox2" onclick="rad(this.form,this)">group2 0</label>
<label for="checkbox2"><input type="checkbox" id="checkbox2" name="checkbox2" onclick="rad(this.form,this)">group2 1</label>
<label for="checkbox3"><input type="checkbox" id="checkbox3" name="checkbox2" onclick="rad(this.form,this)">group2 2</label>
<label for="checkbox4"><input type="checkbox" id="checkbox4" name="checkbox2" onclick="rad(this.form,this)">group2 3</label>
<label for="checkbox5"><input type="checkbox" id="checkbox5" name="checkbox2" onclick="rad(this.form,this)">group2 4</label>
<label for="checkbox6"><input type="checkbox" id="checkbox6" name="checkbox2" onclick="rad(this.form,this)">group2 5</label>
</div>
<input type="button" value="button" id="button1" name="button1" onclick="getVals(this.form)">
</form>
</body>
</html>

muscle

04-16-2003, 09:44 PM

It works perfectly, but I've got my stupid code setup differently. Unfortunately, I output the schedule from a database, so I can't really change the input name for each group. Is there anyway around this? Here is what my code looks like...

<cfoutput query="getSchedule" group="date">
<tr>
<td colspan="3"><b>#date#</b></td>
</tr>
<cfoutput>
<tr>
<td><input type="checkbox" name="event" value="#id#"></td>
<td>#time#</td>
<td>#topic#</td>
</tr>
</cfoutput>
</cfoutput>

Which the #id# (value is the id for that particular class in the database. Here is my query as well...

<cfquery name="getSchedule" datasource="test">
select * from schedule order by id
</cfquery>

diades

04-16-2003, 10:30 PM

Hi Muscle

unfortunately, I don't have any knowledge of CF but there must be a way of reading the #id# data so that you can increment a numeric and add it to the name variable within the CF I would have thought

something like (syntax apart):
#num# = 0
<td><input type="checkbox" name="event#num#"
value="#id#"></td>
if #id# == thisval
#num# = #num# + 1

Hopefully one of the guys that knows CF will be alongf and give a more sensible reply:D