Tree list with checkboxes that can capture values of checked items and corresponding text areas

W

webstuff12345

The script so far collapses and expands correctly but feel free to
scrap what I have if you have a better way of accomplishing the same
result.
Basically, I would like the script to keep track of what is selected
and any corresponding values from text areas. I would also like the
user to be able to collapse/expand sections.

The hierarchy of information I'm working with looks like:

1. A file name (top level). The number of files is fed from an
external application and could be 1 to any number of files.
2. A set number (2 in my example) of categories for each file.
3. A set number (2 in my example) of subcategories for each
category. Each subcategory has a corresponding text area for user
input.

Visually this looks like:

FileName #1
---Category#1-1
------Subcategory#1-1-1
---------TextArea#1-1-1-1
------Subcategory#1-1-2
---------TextArea#1-1-2-1
---Category#1-2
------Subcategory#1-2-1
---------TextArea#1-2-1-1
------Subcategory#1-2-2
---------TextArea#1-2-2-1

FileName #2
---Category#2-1
------Subcategory#2-1-1
---------TextArea#2-1-1-1
------Subcategory#2-1-2
---------TextArea#2-1-2-1
---Category#2-2
------Subcategory#2-2-1
---------TextArea#2-2-1-1
------Subcategory#2-2-2
---------TextArea#2-2-2-1


The script must do the following:

- Keep track of what's selected (for each file) and corresponding text
area strings for subcategory selections.
- User can use filename and category checkboxes to collapse/expand sub-
sections with no effect on sub-selections if selected (unless you have
better way to do this).
- When a subcategory is checked the parent category will have a visual
identifier that a sub-selection exists. If no subcategories are
checked the visual identifier is hidden (unless you have better way to
do this).
- When a category is checked or a subcategory is checked, the filename
will have a visual identifier that a sub-selection exists. If no
categories are checked the visual identifier is hidden (unless you
have better way to do this).

The script I threw together (below) doesn't work properly. You will
see where it falls on its face as it doesn't scale for multiple files
with multiple categories with multiple subcategories. The purpose of
attaching is to give a better sense of what I'm trying to do.

=================================================================

<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style>
body
{
font-family:arial, verdana, sans-serif;
background-color:#FFF;
}
..Help_Text
{
margin:0px;
font-size:70%;
apdding-top:4px;
}
..Parent
{
margin:0px;
font-weight:bold;
}
..Child
{
margin:0px;
}

..File_Title
{
font-weight:bolder;
}

..File_Detail_Table
{
margin-left:17px;
}

..Notes_Div
{
margin-left:20px;
padding:3px;
}

..Table_Arrows_Vertical
{
background:url(1x1-black.png) repeat-y;
}

..Table_Arrow_Last
{
background:url(13x1-black.png);
background-repeat:no-repeat;
}

..Child_Text_Div
{
margin-left:30px;
margin-top:0px;
}

..Image_Arrow_Right
{
margin-left:9px;
margin-right:-5px;
float:left;
}
..Span_SubSelectionText
{
font-size:70%;
}

-->
</style>
<script language="JavaScript">



function toggleBackgroundColour(node,action)
{
node = node.parentNode;
if(action == 'select')
{
node.style.backgroundColor = "#E6E6E6";
node.style.borderStyle = "solid";
node.style.borderColor = "#999";
node.style.borderWidth = "1px";
}
else if(action == 'deselect')
{
node.style.backgroundColor = "";
node.style.borderStyle = "none";
}
}

function toggleNode(node,fileNumber,parentNumber,ChildNumber)
{
var formNodeType =
node.getAttribute('formNodeType');
var bTableEnd = false;

//If any checkboxes are checked update hidden value
respresnting what levels (parent, child) are selected
setCheckboxStatus(formNodeType,fileNumber);


//Update visual identifier (hidden span) for selected items.
setSelectedIndicator(fileNumber,parentNumber);

while(bTableEnd == false)
{
//If a table expand or collapse each row depending on
the nodes state
if(node.nodeType == '3')
{
// Expand the node
if (node.nextSibling.style.display == 'none')
{
node.nextSibling.style.display =
'';
if(formNodeType == 'child')
{
toggleBackgroundColour(node,'select');
}
}
// Collapse the node
else
{
node.nextSibling.style.display = 'none';
if(formNodeType == 'child')
{
toggleBackgroundColour(node,'deselect');
}
}
bTableEnd = true;
}
node = node.nextSibling;
}
}




function setCheckboxStatus(formNodeType,fileNumber)
{
var strChkIds =
eval('document.getElementsByTagName("INPUT");');
var strChkIdsLen = strChkIds.length;
var bFileChecked = false;
var bParentChecked = false;
var bChildChecked = false;

for(i=0; i<strChkIdsLen; i++)
{
//If this is a FILE that is being checked update hidden
value
if(strChkIds.getAttribute('formNodeType') == 'file')
{
var sFileHiddenName = 'bFileSelected' +
fileNumber;
if(strChkIds.checked == false && bFileChecked !
= true)
{

document.getElementById(sFileHiddenName).value = "false";
bFileChecked = false;
}
else
{

document.getElementById(sFileHiddenName).value = "true";
bFileChecked = true;
}
}
//If this is a PARENT that is being checked update
hidden value
else if(strChkIds.getAttribute('formNodeType') ==
'parent')
{
var sParentHiddenName = 'bParentSelected' +
fileNumber;
if(strChkIds.checked == false &&
bParentChecked != true)
{

document.getElementById(sParentHiddenName).value = "false";
bParentChecked = false;
}
else
{

document.getElementById(sParentHiddenName).value = "true";
bParentChecked = true;
}
}
//If this is a CHILD that is being checked update
hidden value
else if(strChkIds.getAttribute('formNodeType') ==
'child')
{
var sChildHiddenName = 'bChildSelected' +
fileNumber;
if(strChkIds.checked == false && bChildChecked !
= true)
{

document.getElementById(sChildHiddenName).value = "false";
bChildChecked = false;
}
else
{

document.getElementById(sChildHiddenName).value = "true";
bChildChecked = true;
}
}
}
}

function setSelectedIndicator(fileNumber,parentNumber)
{
var bChild = false;
var bParent = false;

//alert('fileNumber: ' + fileNumber + '\nparentNumber: ' +
parentNumber);

//Assign a parent number if var equal to zero as we must be
looking at a file level object
if(parentNumber == '')
parentNumber = '1'



if(document.getElementById('bChildSelected' +
fileNumber).value == 'true')
{
document.getElementById('Parent' + parentNumber +
'__Subselection_Span').style.display = '';
document.getElementById('Parent' + parentNumber +
'__Label_and_Subselection_Span').style.color = '#A80000';
bChild = true;
}
else
{
document.getElementById('Parent' + parentNumber +
'__Subselection_Span').style.display = 'none';
document.getElementById('Parent' + parentNumber +
'__Label_and_Subselection_Span').style.color = '#000';
bChild = false;
}

if(document.getElementById('bParentSelected' +
fileNumber).value == 'true' || bChild == true)
{
document.getElementById('File' + fileNumber +
'__Subselection_Span').style.display = '';
document.getElementById('File' + fileNumber +
'__Label_and_Subselection_Span').style.color = '#A80000';
}
else
{
document.getElementById('File' + fileNumber +
'__Subselection_Span').style.display = 'none';
document.getElementById('File' + fileNumber +
'__Label_and_Subselection_Span').style.color = '#000';
}
}

</script>
</head>
<body>

<input type="hidden" id="iNumberOfFiles" name="iNumberOfFiles"
value="1">

<input type="hidden" id="bFileSelected1" name="bFileSelected1"
value="false">
<input type="hidden" id="bParentSelected1" name="bParentSelected1"
value="false">
<input type="hidden" id="bChildSelected1" name="bChildSelected1"
value="false">
<input type="hidden" id="sFileErrors1" name="sFileErrors1" value="">

<input type="hidden" id="bFileSelected2" name="bFileSelected2"
value="false">
<input type="hidden" id="bParentSelected2" name="bParentSelected2"
value="false">
<input type="hidden" id="bChildSelected2" name="bChildSelected2"
value="false">
<input type="hidden" id="sFileErrors2" name="sFileErrors2" value="">

<input type="checkbox" formNodeType="file" name="File1__File_Name"
id="File1__File_Name" value="Filename #1"
onClick="toggleNode(this,'1','','')"><span
id="File1__Label_and_Subselection_Span" class="File_Title"><label
id="File1__File_Title" for="File1__File_Name">Filename #1</label><span
id="File1__Subselection_Span" style="display:none;"
class="Span_SubSelectionText"> (sub-selections)</span></span>
<div class="File_Detail" style="display:none;"><table border="0"
cellpadding="0" cellspacing="0" class="File_Detail_Table">
<!-- General Document -->
<tr>
<td>
<input type="checkbox" formNodeType="parent"
id="File1__Document" value="True"
onClick="toggleNode(this,'1','1','')"><span
id="Parent1__Label_and_Subselection_Span" class="Parent"><label
for="File1__Document">Document</label><span
id="Parent1__Subselection_Span" style="display:none;"
class="Span_SubSelectionText"> (sub-selections)</span></span>
<div style="display:none; margin-top:-3px;"
name="File1__Detail" id="File1__Detail">
<table border="0" cellpadding="2" cellspacing="0">
<!-- Title -->
<tr>
<td valign="top"
class="Table_Arrows_Vertical">
<img src="arrow-right.png"
class="Image_Arrow_Right">
<div class="Child_Text_Div">
<input type="checkbox"
formNodeType="child" name="File1__Document_Title"
id="File1__Document_Title" value="True"
onClick="toggleNode(this,'1','1','1');"><label class="Child"
for="File1__Document_Title">Add document title.</label>
<div class="Notes_Div"
style="display:none;">
<textarea cols="40" rows="5"
name="File1__Document_Title_TextArea"></textarea>
<p class="Help_Text">
Help: <a href="#">Internal</a>
<br />
Requirement Type: Internal
</p>
</div>
</div>
</td>
</tr>
<!-- THIS to THAT -->
<tr>
<td valign="top" class="Table_Arrow_Last">
<img src="arrow-right.png" style="margin-
left:9px; margin-right:-5px; float:left;">
<div class="Child_Text_Div">
<input type="checkbox"
formNodeType="child" name="File1__Document_THIS_to_THAT"
id="File1__Document_THIS_to_THAT" value="True"
onClick="toggleNode(this,'1','1','2');"><label class="Child"
for="File1__Document_THIS_to_THAT">Search and replace THIS with THAT.</
label>
<div class="Notes_Div"
style="display:none;">
<textarea cols="40" rows="5"
name="File1__Document_THIS_to_THAT_TA"></textarea>
<p class="Help_Text">
Help: <a href="#">Internal</a>
<br />
Requirement Type: Internal
</p>
</div>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
<!-- Templates and Library Items -->
<tr>
<td>
<input type="checkbox" formNodeType="parent"
name="File1__Templates_and_Library_Items"
id="File1__Templates_and_Library_Items" value="True"
onClick="toggleNode(this,'1','2','')"><span
id="Parent2__Label_and_Subselection_Span" class="Parent"><label
for="File1__Templates_and_Library_Items">Templates and Library Items</
label><span id="Parent2__Subselection_Span" style="display:none;"
class="Span_SubSelectionText"> (sub-selections)</span></span>
<div style="display:none; margin-top:-3px;">
<table border="0" cellpadding="2" cellspacing="0">
<!-- Template and/or Library Update required -->
<tr>
<td valign="top"
class="Table_Arrows_Vertical">
<img src="arrow-right.png"
class="Image_Arrow_Right">
<div class="Child_Text_Div">
<input type="checkbox" formNodeType="child"
name="File1__Templates_and_Library_Items_Update_Required"
id="File1__Templates_and_Library_Items_Update_Required" value="True"
onClick="toggleNode(this,'1','2','1');"><label class="Child"
for="File1__Templates_and_Library_Items_Update_Required">Template and/
or Library Item update required.</label>
<div style="display:none;"
class="Notes_Div">
<textarea cols="40" rows="5"
name="File1__Templates_and_Library_Items_Update_Required_TA"></
textarea>
<p class="Help_Text">
Help: <a href="#">Internal</a>
<br />
Requirement Type: Internal
</p>
</div>
</div>
</td>
</tr>
<!-- Use supplied library items -->
<tr>
<td valign="top" class="Table_Arrow_Last">
<img src="arrow-right.png" style="margin-
left:9px; margin-right:-5px; float:left;">
<div class="Child_Text_Div">
<input type="checkbox"
formNodeType="child"
name="File1__Templates_and_Library_Items_Use_Supplied"
id="File1__Templates_and_Library_Items_Use_Supplied" value="True"
onClick="toggleNode(this,'1','2','2');"><label class="Child"
for="File1__Templates_and_Library_Items_Use_Supplied">All caps in
text.</label>
<div class="Notes_Div"
style="display:none;">
<textarea cols="40" rows="5"
name="File1__Templates_and_Library_Items_Use_Supplied_TA"></textarea>
<p class="Help_Text">
Help: <a href="#">Internal</a>
<br />
Requirement Type: Internal
</p>
</div>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>

<!-- File#2 -->
<hr size="1">

<input type="checkbox" formNodeType="file" name="File2__File_Name"
id="File2__File_Name" value="Filename #2"
onClick="toggleNode(this,'2','','')"><span
id="File2__Label_and_Subselection_Span" class="File_Title"><label
id="File2__File_Title" for="File2__File_Name">Filename #2</label><span
id="File2__Subselection_Span" style="display:none;"
class="Span_SubSelectionText"> (sub-selections)</span></span>
<div class="File_Detail" style="display:none;"><table border="0"
cellpadding="0" cellspacing="0" class="File_Detail_Table">
<!-- General Document -->
<tr>
<td>
<input type="checkbox" formNodeType="parent"
id="File2__Document" value="True"
onClick="toggleNode(this,'2','1','')"><span
id="Parent2__Label_and_Subselection_Span" class="Parent"><label
for="File2__Document">Document</label><span
id="Parent2__Subselection_Span" style="display:none;"
class="Span_SubSelectionText"> (sub-selections)</span></span>
<div style="display:none; margin-top:-3px;"
name="File2__Detail" id="File2__Detail">
<table border="0" cellpadding="2" cellspacing="0">
<!-- Title -->
<tr>
<td valign="top"
class="Table_Arrows_Vertical">
<img src="arrow-right.png"
class="Image_Arrow_Right">
<div class="Child_Text_Div">
<input type="checkbox"
formNodeType="child" name="File2__Document_Title"
id="File2__Document_Title" value="True"
onClick="toggleNode(this,'2','1','1');"><label class="Child"
for="File2__Document_Title">Add document title.</label>
<div class="Notes_Div"
style="display:none;">
<textarea cols="40" rows="5"
name="File2__Document_Title_TextArea"></textarea>
<p class="Help_Text">
Help: <a href="#">Internal</a>
<br />
Requirement Type: Internal
</p>
</div>
</div>
</td>
</tr>
<!-- THIS to THAT -->
<tr>
<td valign="top" class="Table_Arrow_Last">
<img src="arrow-right.png" style="margin-
left:9px; margin-right:-5px; float:left;">
<div class="Child_Text_Div">
<input type="checkbox"
formNodeType="child" name="File2__Document_THIS_to_THAT"
id="File2__Document_THIS_to_THAT" value="True"
onClick="toggleNode(this,'2','1','2');"><label class="Child"
for="File2__Document_THIS_to_THAT">Search and replace THIS with THAT.</
label>
<div class="Notes_Div"
style="display:none;">
<textarea cols="40" rows="5"
name="File2__Document_THIS_to_THAT_TA"></textarea>
<p class="Help_Text">
Help: <a href="#">Internal</a>
<br />
Requirement Type: Internal
</p>
</div>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
<!-- Templates and Library Items -->
<tr>
<td>
<input type="checkbox" formNodeType="parent"
name="File2__Templates_and_Library_Items"
id="File2__Templates_and_Library_Items" value="True"
onClick="toggleNode(this,'2','2','')"><span
id="Parent2__Label_and_Subselection_Span" class="Parent"><label
for="File2__Templates_and_Library_Items">Templates and Library Items</
label><span id="Parent2__Subselection_Span" style="display:none;"
class="Span_SubSelectionText"> (sub-selections)</span></span>
<div style="display:none; margin-top:-3px;">
<table border="0" cellpadding="2" cellspacing="0">
<!-- Template and/or Library Update required -->
<tr>
<td valign="top"
class="Table_Arrows_Vertical">
<img src="arrow-right.png"
class="Image_Arrow_Right">
<div class="Child_Text_Div">
<input type="checkbox" formNodeType="child"
name="File2__Templates_and_Library_Items_Update_Required"
id="File2__Templates_and_Library_Items_Update_Required" value="True"
onClick="toggleNode(this,'2','2','1');"><label class="Child"
for="File2__Templates_and_Library_Items_Update_Required">Template and/
or Library Item update required.</label>
<div style="display:none;"
class="Notes_Div">
<textarea cols="40" rows="5"
name="File2__Templates_and_Library_Items_Update_Required_TA"></
textarea>
<p class="Help_Text">
Help: <a href="#">Internal</a>
<br />
Requirement Type: Internal
</p>
</div>
</div>
</td>
</tr>
<!-- Use supplied library items -->
<tr>
<td valign="top" class="Table_Arrow_Last">
<img src="arrow-right.png" style="margin-
left:9px; margin-right:-5px; float:left;">
<div class="Child_Text_Div">
<input type="checkbox"
formNodeType="child"
name="File2__Templates_and_Library_Items_Use_Supplied"
id="File2__Templates_and_Library_Items_Use_Supplied" value="True"
onClick="toggleNode(this,'2','2','2');"><label class="Child"
for="File2__Templates_and_Library_Items_Use_Supplied">All caps in
text.</label>
<div class="Notes_Div"
style="display:none;">
<textarea cols="40" rows="5"
name="File2__Templates_and_Library_Items_Use_Supplied_TA"></textarea>
<p class="Help_Text">
Help: <a href="#">Internal</a>
<br />
Requirement Type: Internal
</p>
</div>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Filter table rows based on multiple checkboxes value 2
HCaptcha - How to stop page from refreshing on submit if captcha is not checked/validated 1
How can I hide a div using an event listener on multiple checkboxes? 6
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
"input-group-text" help 7
Hey can anyone tell me why input data wont save in my database? 0
How can I calculate the last payment of the year to be the sum of all previous payments for that year and subtracting it from Research Costs value? 7
How can I arrange a series of radio buttons? 2

Members online

No members online now.
Total: 61 (members: 1, guests: 60)
Robots: 177

Forum statistics

Threads
473,982
Messages
2,570,190
Members
46,736
Latest member
zacharyharris

Latest Threads

Top