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

Discussion in 'Javascript' started by webstuff12345@hotmail.com, Jan 31, 2007.

  1. Guest

    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>
     
    , Jan 31, 2007
    #1
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Jim in Arizona
    Replies:
    4
    Views:
    7,969
    Jim in Arizona
    Aug 24, 2005
  2. David Méndez
    Replies:
    9
    Views:
    501
    Dave Vandervies
    Nov 16, 2004
  3. John Dalberg
    Replies:
    0
    Views:
    509
    John Dalberg
    Jan 19, 2007
  4. David Méndez
    Replies:
    10
    Views:
    573
    Dave Vandervies
    Nov 16, 2004
  5. cindy
    Replies:
    1
    Views:
    1,101
    Phillip Williams
    May 8, 2006
Loading...

Share This Page