i have written some static code to display a menu tree and checkboxes for each option in the menu.
I want the javascript below to check and decheck the values according to what is paaed through. it partly works at the moment.
example of how its to work:
if i click UK link i get a list of LOCATIONS. if i check the box for lets say 'North London' LOCATION all the SCHOOLS and STUDENTS relating
to 'north London' are checked. If decheck a school, lets say 'School 1' i want 'School 1' and the Students related to decheck.
The information on the page will be database driven, in the javascript below to select and deselect i am using the 'id' parameter in the <input type="checkbox">. Each id is given 'm' and then a number.
For example.....Location 'North London' is given 'm3' and School 1 is given 'm32', all students related to school 1 are given 'm32' also.
this is the code i am currently working on. it is static and i would like the code to work dynamically. How can i achieve this and the scenario above.
<html>
<head>
<title></title>
<meta http-equiv="Cache-Control" content="max-age=0"/ forua="true">
<link rel="stylesheet" href="../style.css" type="text/css">
<script type="text/javascript">
function showSubMenu(e,o) {
// e = event object in W3C DOM compatible browsers (Ex. Mozilla)
// o = div object clicked by user
// Parsing all children of the clicked div
for (i=0;i<o.childNodes.length;i++) {
// Find all div having the CSS class sItem
if (o.childNodes.className=="sItem") {
// If the div is hidden, make it visible
if (o.childNodes.style.display=="none") {
o.childNodes.style.display="block"
} else if (o.childNodes.style.display=="block") {
// If the div is visible, hide it
o.childNodes.style.display="none"
}
}
}
// Stop click event propagation in upper div hierarchy
if (document.all) {
// Code for IE browsers
window.event.cancelBubble=true
} else if (!document.all && document.getElementById) {
// Code for Mozilla browsers
e.stopPropagation()
}
}
</script>
<script language="JavaScript">
function clickall() {
if (form1['lid[]'].checked = true) {
var m3 = document.getElementById("m3")
disable = false
if (m3.checked == false) disable = true
var allInputs = document.getElementById("form1").getElementsByTagName("input")
for (var i = 0; i < allInputs.length; i++) {
if (allInputs.type == "checkbox" && allInputs.id.substring(0,10) == 'm32') {
allInputs.disabled = disable
allInputs.checked = false
if (disable == false) allInputs.checked = true
}
if (allInputs[i].type == "checkbox" && allInputs[i].id.substring(0,10) == 'm33') {
allInputs[i].disabled = disable
allInputs[i].checked = false
if (disable == false) allInputs[i].checked = true
}
}
}
}
function unclick() {
var m32 = document.getElementById("m32")
if (m32.checked == false) disable = true
var allInputs = document.getElementById("form1").getElementsByTagName("input")
for (var i = 0; i < allInputs.length; i++) {
if (allInputs[i].type == "checkbox" && allInputs[i].id.substring(0,10) == 'm32') {
allInputs[i].disabled = disable
allInputs[i].checked = false
if (disable == false) allInputs[i].checked = true
}
}
}
</script>
<style type="text/css">
div.sItem{margin-left:10px;cursor:pointer;cursor:hand}
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#000000" vlink="#000000" alink="#000000" leftmargin="0"
<table width="420" border="0">
<tr>
<td colspan="6" class="minitext">Please Pick who the mail merge is for:</td>
</tr>
<form action="mailmerge_create_menu.php" method="post" name="form1">
<tr>
<td colspan="6" class="bodytext">
<div class="sItem" style="display:block" onclick="showSubMenu(event,this)">
<a href="#" onclick="showSubMenu(event,this);">+</a> Gibraltar
<div class="sItem" style="display:none" onclick="showSubMenu(event,this)">
<input id="m1" onclick="clickall();" type="Checkbox" name="lid[]" value="1"> Gibraltar Stagecoach School
<div class="sItem" style="display:none" onclick="showSubMenu(event,this)">
<input id="m11" type="Checkbox" name="scid[]" value="1"> Early 1
<div class="sItem" style="display:none" onclick="showSubMenu(event,this)">
</div>
</div>
<div class="sItem" style="display:none" onclick="showSubMenu(event,this)">
<input id="m12" type="Checkbox" name="scid[]" value="2"> Early 2
<div class="sItem" style="display:none" onclick="showSubMenu(event,this)">
</div>
</div>
<div class="sItem" style="display:none" onclick="showSubMenu(event,this)">
<input id="m13" type="Checkbox" name="scid[]" value="3"> Main 1
<div class="sItem" style="display:none" onclick="showSubMenu(event,this)">
</div>
</div>
</div>
</div>
<div class="sItem" style="display:block" onclick="showSubMenu(event,this)">
<a href="#" onclick="showSubMenu(event,this);">+</a> Spain
<div class="sItem" style="display:none" onclick="showSubMenu(event,this)">
<input id="m2" onclick="clickall();" type="Checkbox" name="lid[]" value="2"> Marbella Stagecoach School
<div class="sItem" style="display:none" onclick="showSubMenu(event,this)">
<input id="m21" type="Checkbox" name="scid[]" value="4"> Early 1
<div class="sItem" style="display:none" onclick="showSubMenu(event,this)">
</div>
</div>
<div class="sItem" style="display:none" onclick="showSubMenu(event,this)">
<input id="m22" type="Checkbox" name="scid[]" value="5"> First 1
<div class="sItem" style="display:none" onclick="showSubMenu(event,this)">
</div>
</div>
</div>
</div>
<div class="sItem" style="display:block" onclick="showSubMenu(event,this)">
<a href="#" onclick="showSubMenu(event,this);">+</a> UK
<div class="sItem" style="display:none" onclick="showSubMenu(event,this)">
<input id="m3" onclick="clickall();" type="Checkbox" name="lid[]" value="10"> North London
<div class="sItem" style="display:none" onclick="showSubMenu(event,this)">
<input id="m31" type="Checkbox" name="scid[]" value="13"> Early 1
<div class="sItem" style="display:none" onclick="showSubMenu(event,this)">
</div>
</div>
<div class="sItem" style="display:none" onclick="showSubMenu(event,this)">
<input onclick="unclick()" id="m32" type="Checkbox" name="scid[]" value="14"> School 1
<div class="sItem" style="display:none" onclick="showSubMenu(event,this)">
<input id="m32" type="Checkbox" name="stuid[]" value="1"> Gurjit Singh Pawar <br>
<input id="m32" type="Checkbox" name="stuid[]" value="3"> Micheal George Smith <br>
</div>
</div>
<div class="sItem" style="display:none" onclick="showSubMenu(event,this)">
<input onclick="unclick();" id="m33" type="Checkbox" name="scid[]" value="15"> School 2
<div class="sItem" style="display:none" onclick="showSubMenu(event,this)">
<input id="m33" type="Checkbox" name="stuid[]" value="7"> John Davies Hamilton <br>
</div>
</div>
</div>
</div>
<div class="sItem" style="display:block" onclick="showSubMenu(event,this)">
<a href="#" onclick="showSubMenu(event,this);">+</a> USA
<div class="sItem" style="display:none" onclick="showSubMenu(event,this)">
<input id="m4" onclick="clickall();" type="Checkbox" name="lid[]" value="7"> EDI Schools
</div>
<div class="sItem" style="display:none" onclick="showSubMenu(event,this)">
<input id="m5" onclick="clickall();" type="Checkbox" name="lid[]" value="5"> Maplewood
<div class="sItem" style="display:none" onclick="showSubMenu(event,this)">
<input id="m51" type="Checkbox" name="scid[]" value="12"> MAP EarlyStages
<div class="sItem" style="display:none" onclick="showSubMenu(event,this)">
</div>
</div>
</div>
<div class="sItem" style="display:none" onclick="showSubMenu(event,this)">
<input id="m6" onclick="clickall();" type="Checkbox" name="lid[]" value="8"> MTK Schools
</div>
<div class="sItem" style="display:none" onclick="showSubMenu(event,this)">
<input id="m7" onclick="clickall();" type="Checkbox" name="lid[]" value="9"> ROC Schools
</div>
<div class="sItem" style="display:none" onclick="showSubMenu(event,this)">
<input id="m8" onclick="clickall();" type="Checkbox" name="lid[]" value="6"> SPS Schools
</div>
</div>
</td>
</tr>
</form>
<tr>
<td colspan="12" background="../assets/dotted_line_tile.gif" height="2"> </td>
</tr>
<tr>
<td colspan="11"> </td>
</tr>
</table>
</body>
</html>
THANKS IN ADVANCE
make this dynamic - FOR JAVASCRIPT DONS
Moderator: General Moderators