...

View Full Version : validate only checkboxes checked from certain area



john6767
10-12-2006, 03:29 AM
hi,

hope i explain this well enough,

i have checkboxes that are in tds (table cells) and each td has a unique id, i want to check if there is only checkboxes checked from one of these table cells, else display an error.

the cell may have no checkboxes checked, just as long as there aren't checkboxes checked in more than one cell..

also its worth noting the checkboxes arent' static, they are dynamically pulled from a db using php..

_Aerospace_Eng_
10-12-2006, 06:28 AM
Can you post some example output from the php?

john6767
10-12-2006, 08:02 AM
no worries, here is the output of the fields, out of the three tds here only one shows at a time depending on what my drop down further up does.. i would like to have only checkboxes from the open td be allowed to be checked,

is it possible to clear the checkboxes when the td is hidden..? If that is not possible maybe i can simply warn the user when checkboxes in more than one of these regions are checked.. in this case i would also have to warn user if the checkboxes that are checked are not in the same region as selected by the dropdown..

here is the dropdown..

<select name="tradeID" class="formDropDownField" id="tradeID" onChange="expandcontent(this,this.options[this.selectedIndex].value);">
<option value="3">Electrician</option>
<option value="1">Plasterer</option>
<option value="2"selected="selected">Plumber</option>
</select>

heres the tds that are hidden or shown depending on id


<tr valign="top" id="3" class="switchcontent">
<th>Types Of Work </th>
<td>
<table border="0" cellspacing="0" cellpadding="0" class="borderTop">
<tr valign="top">
<td width="179px">
</td>
<td width="179px">
<input name="typeOfWorkID[]" type="checkbox" id="typeOfWorkID[]" value="10">changing light bulbs<br>
<input name="typeOfWorkID[]" type="checkbox" id="typeOfWorkID[]" value="2">wiring boats<br>
<input name="typeOfWorkID[]" type="checkbox" id="typeOfWorkID[]" value="1">wiring houses<br>
</td>
</tr>
</table></td>
</tr> <tr valign="top" id="1" class="switchcontent">
<th>Types Of Work </th>
<td>
<table border="0" cellspacing="0" cellpadding="0" class="borderTop">
<tr valign="top">
<td width="179px">
</td>
<td width="179px">
<input name="typeOfWorkID[]" type="checkbox" id="typeOfWorkID[]" value="9">sd<br>
<input name="typeOfWorkID[]" type="checkbox" id="typeOfWorkID[]" value="4">wall building<br>
</td>
</tr>
</table></td>
</tr> <tr valign="top" id="2" class="switchcontent">
<th>Types Of Work </th>
<td>
<table border="0" cellspacing="0" cellpadding="0" class="borderTop">
<tr valign="top">
<td width="179px">
<input name="typeOfWorkID[]" type="checkbox" id="typeOfWorkID[]" value="5" checked>digging holes<br>
</td>
<td width="179px">
<input name="typeOfWorkID[]" type="checkbox" id="typeOfWorkID[]" value="3">unblocking pipes<br>
</td>
</tr>
</table></td>
</tr>


the expandcontent() function simply expands or contracts the rows..

let me know if i haven't given enough info

_Aerospace_Eng_
10-12-2006, 08:07 AM
I see some issues with this. You have used the same name for all of your checkboxes. Each checkbox should have its own name. I know you are trying to create an array on the server side but still each checkbox should have its own name and id.

john6767
10-12-2006, 08:10 AM
ok, how do you suggest i fix this? I am looping through the array to get the checked boxes and add them into database on submit..

_Aerospace_Eng_
10-12-2006, 08:16 AM
Well the javascript likely won't be able to validate the checkboxes because of the duplicate names and ids. You should probably instead of making them all arrays is add 1 to the end of each checkbox name and id.

john6767
10-12-2006, 08:22 AM
ok, will that cause php to have errors when i go to loop through checkboxes in the array?

what if i put the id of the region into the checkbox, such as typeOfWorKID1[], and then when i do the insert loop, loop through that loop one time for each region ID?? This sounds like its possible in php, would this be ok for the javascript?

also you say 'javascript likely won't be able to validate the checkboxes', is there a chance it may work?

_Aerospace_Eng_
10-12-2006, 08:35 AM
Hmm try this for the js

<script type="text/javascript">
function validate()
{
var checkboxes = document.getElementsByTagName('input');
var count = 0;
for(var i = 0; i < checkboxes.length; i++)
{
if(checkboxes[i].type == 'checkbox' && checkboxes[i].checked == 1)
{
count++;
}
}
if(count > 1)
{
alert('You have chosen more than one checkbox.');
for(var j = 0; j < checkboxes.length; j++)
{
if(checkboxes[i].type == 'checkbox' && checkboxes[i].checked == 1)
{
checkboxes[i].checked = 0;
}
}
return false;
}
}
</script>
Use
onsubmit="return validate()"
in the open form tag. The script loops through all inputs looking for checkboxes that are checked. If it finds more than one checkbox that is checked then it resets all checkboxes to the original checked value however now that I think about it, why are you even using checkboxes? Why don't you use radio buttons? Radio buttons can have the same name and only one of them can be chosen.

john6767
10-12-2006, 08:42 AM
i can't use radio buttons as there can be more than one checkbox checked..

to try explain it i am inserting tradesmen and each tradesmen has a trade, now this trade can have different types of work that the tradesmen does.

Hence if the tradesmen selects the wrong trade and checks some types of work, and then he selects the right trade (the types of work he sees change for the different trade) and checks some types of work,

then his original checks will still be checked but he won't know as that original region is hidden.. all he will see is the checkboxes he just checked..

i'll have a look at the code u posted now, but i don;t know much about javascript yet.. just fumbling through.

_Aerospace_Eng_
10-12-2006, 08:44 AM
Okay so only checkboxes in one section can be checked?

john6767
10-12-2006, 08:46 AM
yes thats correct, i just realised from looking at your javascript that you were checking for one checkbox.

multiple checkboxes may be check in one area, but this cell id must match the selected drop down value..

_Aerospace_Eng_
10-12-2006, 09:06 AM
How many options will be in the select menu? Only 3?

john6767
10-12-2006, 09:08 AM
no this is a dynamic value.. it will have as many options as there are trades and trades can be added over time..

_Aerospace_Eng_
10-12-2006, 09:31 AM
Okay give this a try, notice that each section is now its own table. I did this for reasons explained below.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
form {
margin:0;
padding:0;
}
table.switchcontent {
display:none;
}
table.switchcontent th, table.switchcontent td {
vertical-align:top;
}
td {
vertical-align:top;
}
</style>
<script type="text/javascript">
function validate()
{
var menuLength = document.forms[0].tradeID.options.length;
var checkboxes;
var theid;
for(var j = 1; j <= menuLength; j++)
{
theid = new String('type'+j);
checkboxes = document.getElementById(theid).getElementsByTagName('input');
if(document.getElementById(theid).style.display == 'none')
{
for(var i = 0; i < checkboxes.length; i++)
{
if(checkboxes[i].type == 'checkbox' && checkboxes[i].checked == 1)
{
checkboxes[i].checked = 0;
}
}
}
}
}
function expandcontent(what)
{
var theTables = document.getElementsByTagName('table');
for(x = 0; x < theTables.length; x++)
{
if(theTables[x].className == 'switchcontent')
{
theTables[x].style.display = 'none';
}
}
document.getElementById(what).style.display = 'block';
}
</script>
</head>
<body>
<form onsubmit="return validate()">
<select name="tradeID" class="formDropDownField" id="tradeID" onChange="expandcontent(this.options[this.selectedIndex].value);">
<option value="type3">Electrician</option>
<option value="type1">Plasterer</option>
<option value="type2" selected="selected">Plumber</option>
</select>
<table id="type3" class="switchcontent">
<tr>
<th>Types Of Work </th>
<td><table border="0" cellspacing="0" cellpadding="0" class="borderTop">
<tr >
<td width="179"></td>
<td width="179"><input name="typeOfWorkID[]" type="checkbox" value="10">
changing light bulbs<br>
<input name="typeOfWorkID[]" type="checkbox" value="2">
wiring boats<br>
<input name="typeOfWorkID[]" type="checkbox" value="1">
wiring houses<br>
</td>
</tr>
</table></td>
</tr>
</table>
<table id="type1" class="switchcontent">
<tr>
<th>Types Of Work </th>
<td><table border="0" cellspacing="0" cellpadding="0" class="borderTop">
<tr >
<td width="179"></td>
<td width="179"><input name="typeOfWorkID[]" type="checkbox" value="9">
sd<br>
<input name="typeOfWorkID[]" type="checkbox" value="4">
wall building<br>
</td>
</tr>
</table></td>
</tr>
</table>
<table id="type2" class="switchcontent" style="display:block">
<tr>
<th>Types Of Work </th>
<td><table border="0" cellspacing="0" cellpadding="0" class="borderTop">
<tr >
<td width="179"><input name="typeOfWorkID[]" type="checkbox" value="5">
digging holes<br>
</td>
<td width="179"><input name="typeOfWorkID[]" type="checkbox" value="3">
unblocking pipes<br>
</td>
</tr>
</table></td>
</tr>
</table>
<input type="submit" value="Submit">
</form>
</body>
</html>

It doesn't matter how many options there are in the select menu. A few things you will have to change though. For the option values you need to make them type1, type2, type3, etc. You also need to apply the class switchcontent to the a table rather than the tr since its read only its adding extra space. Just follow the formatting of the example and it should work. The last table displayed that had checkboxes will be the ones that stay checked. If the user checks a box in another section that is hidden and checks one in a section not hidden then onsubmit the hidden section checkboxes will be cleared and the section still visible will have its checkboxes remained checked.

john6767
10-13-2006, 12:48 AM
ok, i havent been able to get this going, firstly the tables don't collapse for me, but when i put the id oin the row they do..? Do i need to use tables for the code to work or will it recognise tr's the same as tables?

so i have the table rows working correctly but the function validate() doesn't seem to be working.. is this because i have an action on the form? maybe i can put the acxtion into the javascript and it will work??

here is my javascript in the head



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><!-- InstanceBegin template="/Templates/template_admin.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- InstanceBeginEditable name="doctitle" -->
<title>Trade Hunter Admin</title>
<!-- InstanceEndEditable --><!-- InstanceBeginEditable name="head" -->
<style type="text/css">
* {
margin:0;
padding:0;
}
form {
margin:0;
padding:0;
}
table.switchcontent {
display:none;
}
table.switchcontent th, table.switchcontent td {
vertical-align:top;
}
td {
vertical-align:top;
}
</style>
<script type="text/javascript">
function validate()
{
var menuLength = document.forms[0].tradeID.options.length;
var checkboxes;
var theid;
for(var j = 1; j <= menuLength; j++)
{
theid = new String('type'+j);
checkboxes = document.getElementById(theid).getElementsByTagName('input');
if(document.getElementById(theid).style.display == 'none')
{
for(var i = 0; i < checkboxes.length; i++)
{
if(checkboxes[i].type == 'checkbox' && checkboxes[i].checked == 1)
{
checkboxes[i].checked = 0;
}
}
}
}
}
</script>
<script type="text/javascript">

/***********************************************
* Switch Content script II- &#169; Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use. Last updated April 2nd, 2005.
* Visit http://www.dynamicdrive.com/ for full source code
* Modified by jscheuer1 in http://www.dynamicdrive.com/forums to
* initially be closed and allow for persistence in Opera
***********************************************/

var initialstate=0 //0 for contracted, 1 for expanded
var enablepersist="off" //Enable saving state of content structure using session cookies? (on/off)
var memoryduration="7" //persistence in # of days

var contractsymbol='images/arrow_down.gif' //Path to image to represent contract state.
var expandsymbol='images/paging_right_small.gif' //Path to image to represent expand state.
var imageStateVar ='images/arrow_down.gif'//var by john for mouse overs

/////No need to edit beyond here //////////////////////////

if(!initialstate){
if(document.getElementById)
document.write('<style id="styletest" type="text/css">\
#nothing {\
}\
<\/style>')

if(typeof document.getElementById('styletest').disabled=='boolean')
document.write('<style id="added" type="text/css">\
.switchcontent{\
display:none;\
}\
<\/style>')
}

function getElementbyClass(rootobj, classname){
var temparray=new Array()
var inc=0
var rootlength=rootobj.length
for (i=0; i<rootlength; i++){
if (rootobj[i].className==classname)
temparray[inc++]=rootobj[i]
}
return temparray
}


function sweeptoggle(ec, operaFlag){
var inc=0
while (ccollect[inc]){
ccollect[inc].style.display=ec=="contract"? "none" : ""
inc++
}
revivestatus()
if (enablepersist=="on"&&window.opera&&!operaFlag)
saveswitchstate();
}

function expandcontent(curobj, cid){
if(!initialstate){
sweeptoggle('contract', 1)
document.getElementById('added').disabled=true
}
if (ccollect.length>0){
var el=document.getElementById(cid)
el.style.display=el.style.display!="none"? "none" : ""
curobj.src=(el.style.display=="none")? expandsymbol : contractsymbol
imageStateVar=(el.style.display=="none")? expandsymbol : contractsymbol
}
if (enablepersist=="on"&&window.opera)
saveswitchstate();
}

function revivecontent(){
selectedItem=getselectedItem()
selectedComponents=selectedItem.split("|")
for (i=0; i<selectedComponents.length-1; i++){
document.getElementById(selectedComponents[i]).style.display=initialstate? "none" : ""
}
}

function revivestatus(){
var inc=0
while (statecollect[inc]){
if (ccollect[inc].style.display=="none")
statecollect[inc].src=expandsymbol
else
statecollect[inc].src=contractsymbol
inc++
}
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function getselectedItem(){
if (get_cookie(window.location.pathname) != ""){
selectedItem=get_cookie(window.location.pathname)
return selectedItem
}
else
return ""
}

function saveswitchstate(){
var inc=0, selectedItem=""
while (ccollect[inc]){
if (!initialstate&&ccollect[inc].style.display!=="none"||initialstate&&ccollect[inc].style.display=="none")
selectedItem+=ccollect[inc].id+"|"
inc++
}
if (get_cookie(window.location.pathname)!=selectedItem){ //only update cookie if current states differ from cookie's
var expireDate = new Date()
expireDate.setDate(expireDate.getDate()+parseInt(memoryduration))
document.cookie = window.location.pathname+"="+selectedItem+";path=/;expires=" + expireDate.toGMTString()
}
}

function do_onload(){
uniqueidn=window.location.pathname+"firsttimeload"
var alltags=document.all? document.all : document.getElementsByTagName("*")
ccollect=getElementbyClass(alltags, "switchcontent")
statecollect=getElementbyClass(alltags, "showstate")
if(!initialstate){
sweeptoggle('contract', 1)
document.getElementById('added').disabled=true
expandcontent(this,'')
}
if (enablepersist=="on" && get_cookie(window.location.pathname)!="" && ccollect.length>0)
revivecontent()
if (ccollect.length>0 && statecollect.length>0)
revivestatus()
}

if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload

if (enablepersist=="on" && document.getElementById)
window.onunload=saveswitchstate

</script>


and here is my form as 'view source' compiled from php..



<form onsubmit="return validate()" action="/tradehunter/admin/tradesmen_add.php?" method="POST" name="tradesmenForm" id="tradesmenForm">
<table border="0" cellpadding="0" cellspacing="0" class="tableForm">
<tr>
<th>Business Name</th>
<td width="350"><input name="businessName" type="text" class="formTextField" id="businessName" value=""></td>
</tr>
<tr>
<th>Trade</th>
<td><select name="tradeID" class="formDropDownField" onChange="expandcontent(this,this.options[this.selectedIndex].value);">
<option value="selected="selected""></option>
<option value="3">Electrician</option>
<option value="1">Plasterer</option>
<option value="2">Plumber</option>
</select></td>
</tr>
<tr id="3" class="switchcontent">
<th valign="top">Types Of Work</th>
<td class="borderTop">
<table border="0">
<tr>
<td>
<table>
<td>
<input name="typeOfWorkID[]" type="checkbox" id="typeOfWorkID[]" value="10">
changing light bulbs<br>
<input name="typeOfWorkID[]" type="checkbox" id="typeOfWorkID[]" value="2">
wiring boats<br>
<input name="typeOfWorkID[]" type="checkbox" id="typeOfWorkID[]" value="1">
wiring houses<br>
</td></tr></table>
</td>
</tr>
</table></td>
</tr>
<tr id="1" class="switchcontent">
<th valign="top">Types Of Work</th>
<td class="borderTop">
<table border="0">
<tr>
<td>
<table>
<td>
<input name="typeOfWorkID[]" type="checkbox" id="typeOfWorkID[]" value="9">
sd<br>
<input name="typeOfWorkID[]" type="checkbox" id="typeOfWorkID[]" value="4">
wall building<br>
</td></tr></table></td>
</tr>
</table></td>
</tr>
<tr id="2" class="switchcontent">
<th valign="top">Types Of Work</th>
<td class="borderTop">
<table border="0">
<tr>
<td>
<table>
<td><input name="typeOfWorkID[]" type="checkbox" id="typeOfWorkID[]" value="5">
digging holes<br>
<input name="typeOfWorkID[]" type="checkbox" id="typeOfWorkID[]" value="3">
unblocking pipes<br>
</td></tr></table></td>
</tr>
</table></td>
</tr>
<tr>
<td></td>
<td><input name="Submit" type="submit" class="formButton" value="Submit"></td>
</tr>
</table>
<input type="hidden" name="MM_insert" value="tradesmenForm">

</form>

john6767
10-13-2006, 12:56 AM
also, you may notice i named the table row ids the number still as if i name it type1, type2 etc then i would need to add the type into the select dropdown value and then i would also need to remove it when i insert the value to the database..

_Aerospace_Eng_
10-13-2006, 12:59 AM
You didn't do a single thing I told you to do. IDs should not begin with numbers. If it doesn't work for your script I'm sorry, you need to make adjust your server side code.

john6767
10-13-2006, 01:11 AM
lol, well i have worked late overnight to get it going but have got nowhere so trying different things to get it working, thanks for your help, i wasn't ignoring your suggesting just couldn't get them going so reverted back to the way it was working before (the row expand i mean, not the validate.. it was never working for me)?

the two things you said to do were to make table with an id as opposed to the rows and to make the option values type1, type 2 etc..

i am trying to get these things working,

would type1, type2 work and 1,2 not as select values?

basically i think maybe my form action isn't working with the validate, or i have called it wrongly, but i have put the validate function in and called it insubmit, and the rows expand contract but the validation does not appear to work, can i put an alert into the javascript to show if it is working?

john6767
10-13-2006, 01:22 AM
ok, got that numbers thing, i'll get the types into the selects and rows with php and see how i go, cheers

john6767
10-13-2006, 03:42 AM
got it going, cheers, i have done it exactly the way you said and what do u know it works!

i'm starting to undersatnd javascript a bit better, i have used your expandcontent() not my previous one,

one final thing that i got the previous javascript to do, was onload run the expandcontent() for the value in the dropdown..

I am trying to put this functionality into your expandcontent() function. So onload i would like to do the following..



expandcontent('type1')


and i would prefer not to do it in the body onload as it makes it tricky with my template, the way the previous code did it was something like this



function do_onload(){
uniqueidn=window.location.pathname+"firsttimeload"
var alltags=document.all? document.all : document.getElementsByTagName("*")
ccollect=getElementbyClass(alltags, "switchcontent")
statecollect=getElementbyClass(alltags, "showstate")
if(!initialstate){
sweeptoggle('contract', 1)
document.getElementById('added').disabled=true
expandcontent(this,'<?php echo $row_rsTradesmen['tradeID']; ?>')
}
if (enablepersist=="on" && get_cookie(window.location.pathname)!="" && ccollect.length>0)
revivecontent()
if (ccollect.length>0 && statecollect.length>0)
revivestatus()
}

_Aerospace_Eng_
10-13-2006, 06:09 AM
Well you have the right idea, you just need to use window.onload with an anonymous function (function with no name).

window.onload = function()
{
var selectmenu = document.forms[0].tradeID.options;
expandcontent(selectmenu[selectmenu.selectedIndex].value);
}

john6767
10-13-2006, 06:11 AM
i'm using the one you wrote, i'll give it a try now and post back how it goes, cheers

john6767
10-13-2006, 06:22 AM
ok,this doesn't seem to work
i have put it in under the expandcontent()


<script type="text/javascript">
function expandcontent(what)
{
var theTables = document.getElementsByTagName('table');
for(x = 0; x < theTables.length; x++)
{
if(theTables[x].className == 'switchcontent')
{
theTables[x].style.display = 'none';
}
}
document.getElementById(what).style.display = 'block';
}

window.onload = onload_run
{
var selectmenu = document.forms[0].tradeID.options;
expandcontent(selectmenu[selectmenu.selectedIndex].value);
}
</script>

the drop down works onchange its just this doesn't on page load, here is my dropdown

<select name="tradeID" class="formDropDownField" id="tradeID" onChange="expandcontent(this.options[this.selectedIndex].value);">

-edit : the error i get doen the bottom of internet explorer is select menu is undefined, i have tried putting tradeID in there (the name of my dropdown) but that didn't work either, it just says tradID is undefined..

_Aerospace_Eng_
10-13-2006, 06:46 AM
You should reread what I posted in my last post mainly the part that says "an anonymous function (a function WITHOUT a name)". The code I posted there is exactly what you should use. As is. Don't change anything.

john6767
10-13-2006, 06:54 AM
my mistake i posted the wrong code, that was something i was playing with trying to get it to work..

this following code is the one that doesn't work, this is unchanged from your post.



<script type="text/javascript">
function expandcontent(what)
{
var theTables = document.getElementsByTagName('table');
for(x = 0; x < theTables.length; x++)
{
if(theTables[x].className == 'switchcontent')
{
theTables[x].style.display = 'none';
}
}
document.getElementById(what).style.display = 'block';
}

window.onload = function()
{
var selectmenu = document.forms[0].tradeID.options;
expandcontent(selectmenu[selectmenu.selectedIndex].value);
}
</script>

My form is called tradesmenForm does this matter? Should select menu be an array as it holds all the options? just looking at possibilities..

_Aerospace_Eng_
10-13-2006, 06:56 AM
That should work unless you have more than one form on the page. If you do have more than one form then change this

var selectmenu = document.forms[0].tradeID.options;
to this

var selectmenu = document.forms['tradesmenForm'].tradeID.options;

john6767
10-13-2006, 07:01 AM
mm.. i have already tried that with no success.. any other suggestions?

_Aerospace_Eng_
10-13-2006, 07:14 AM
Post your full code after it gets generated. It seems like there might be conflicting onloads. You can only have one. See it does work

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
form {
margin:0;
padding:0;
}
table.switchcontent {
display:none;
}
table.switchcontent th, table.switchcontent td {
vertical-align:top;
}
td {
vertical-align:top;
}
</style>
<script type="text/javascript">
function validate()
{
var menuLength = document.forms[0].tradeID.options.length;
var checkboxes;
var theid;
for(var j = 1; j <= menuLength; j++)
{
theid = new String('type'+j);
checkboxes = document.getElementById(theid).getElementsByTagName('input');
if(document.getElementById(theid).style.display == 'none')
{
for(var i = 0; i < checkboxes.length; i++)
{
if(checkboxes[i].type == 'checkbox' && checkboxes[i].checked == 1)
{
checkboxes[i].checked = 0;
}
}
}
}
}
function expandcontent(what)
{
var theTables = document.getElementsByTagName('table');
for(x = 0; x < theTables.length; x++)
{
if(theTables[x].className == 'switchcontent')
{
theTables[x].style.display = 'none';
}
}
document.getElementById(what).style.display = 'block';
}
window.onload = function()
{
var selectmenu = document.forms['tradesmenForm'].tradeID.options;
expandcontent(selectmenu[selectmenu.selectedIndex].value);
}
</script>
</head>
<body>
<form onsubmit="return validate()" name="tradesmenForm">
<select name="tradeID" class="formDropDownField" id="tradeID" onChange="expandcontent(this.options[this.selectedIndex].value);">
<option value="type3">Electrician</option>
<option value="type1" selected="selected">Plasterer</option>
<option value="type2">Plumber</option>
</select>
<table id="type3" class="switchcontent">
<tr>
<th>Types Of Work </th>
<td><table border="0" cellspacing="0" cellpadding="0" class="borderTop">
<tr >
<td width="179"></td>
<td width="179"><input name="typeOfWorkID[]" type="checkbox" value="10">
changing light bulbs<br>
<input name="typeOfWorkID[]" type="checkbox" value="2">
wiring boats<br>
<input name="typeOfWorkID[]" type="checkbox" value="1">
wiring houses<br>
</td>
</tr>
</table></td>
</tr>
</table>
<table id="type1" class="switchcontent">
<tr>
<th>Types Of Work </th>
<td><table border="0" cellspacing="0" cellpadding="0" class="borderTop">
<tr >
<td width="179"></td>
<td width="179"><input name="typeOfWorkID[]" type="checkbox" value="9">
sd<br>
<input name="typeOfWorkID[]" type="checkbox" value="4">
wall building<br>
</td>
</tr>
</table></td>
</tr>
</table>
<table id="type2" class="switchcontent">
<tr>
<th>Types Of Work </th>
<td><table border="0" cellspacing="0" cellpadding="0" class="borderTop">
<tr >
<td width="179"><input name="typeOfWorkID[]" type="checkbox" value="5">
digging holes<br>
</td>
<td width="179"><input name="typeOfWorkID[]" type="checkbox" value="3">
unblocking pipes<br>
</td>
</tr>
</table></td>
</tr>
</table>
<input type="submit" value="Submit">
</form>
</body>
</html>
but there is something in your code conflicting with it.

john6767
10-26-2006, 06:29 AM
ok i worked it out, thanks for all your help!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum