JavaScript
Item List With Toggle

By David R. Tribble
Revision 1.2, 2007-12-22

Description

The JavaScript code below displays a list of selectable items. When the checkbox for an item is checked, a text line appears, into which the user can enter text. When the checkbox is unchecked, the text line disappears (but its contents remain unaffected).

A checkbox labeled "No items" is displayed at the top of the list, and when it is checked, the entire list of items is disabled and grayed-out.

A button labeled "Complete" is displayed at the end of the list. Clicking on it invokes the zComplete function, which validates the checked items in the list. A required item that is checked but which does not have entered text causes a warning window to be displayed, and the text line with the missing text receives focus, allowing the user to enter some text. The function also removes all trailing spaces from the text fields.

Notes

The zNItems variable specifies the number of items in the list.

The height of the window containing the item list is controlled by the height setting of the style attribute of the zItemList element.

The req attribute of each zCheck_nnn element specifies whether the item is required ('Y') or not ('N').

Each item in the list is assigned a unique parameter name zText_nnn that is independent of the position of its element in the displayed list. The maximum length of each text field is controlled by its maxlength attribute.

Rendered Appearance

No items
List item 1
 
List item 2
*
List item 3
List item 4
List item 5
List item 6
List item 7
List item 8
List item 9
List item 10
*

Source Code

<noscript>
 <font color='#CF0000'>
 <b>You do not have JavaScript enabled in your browser.</b>
 </font>
</noscript>
 
<script type='text/javascript' language='JavaScript'>
//<!--
// jsitemlist1.html
//
// This is known to work with:
//   MS Internet Explorer 6.0, 7.0
//
// Copyright ©2007 by David R. Tribble, all rights reserved.
// Permission is granted to anyone except members of organizations designated
// as terrorist organizations by the U.S. State Department to freely use,
// duplicate, and modify this source code.

  var zNItems = 10;		// Number of items in the list

  function zToggleItemList(box)
  {
    // Disable the item list when the 'No items' box is clicked
    var elem;
    elem = document.getElementById('zItemList');
    elem.style.background = (box.checked ? '#F0C0F0' : '');
    elem = document.getElementById('zItems');
    elem.style.color = (box.checked ? '#808080' : '');
    elem.style.background = (box.checked ? '#F0F0F0' : '');

    // Disable the item checkboxes and comment textboxes
    for (var j = 1; j <= zNItems; j++)
    {
      var b = document.getElementById('zSpan_' + j);
      if (b == null)
        continue;
      var i = b.e;
      b = document.getElementById('zCheck_' + i);
      b.disabled = box.checked;
      b = document.getElementById('zText_' + i);
      b.disabled = box.checked;
      b.style.color = (box.checked ? '#808080' : '');
      b.style.background = (box.checked ? '#F0F0F0' : '');
    }
  }

  function zToggleItem(o, box)
  {
    // Toggle the item comment textbox
    var elem = document.getElementById(o);
    elem.style.display = (box.checked ? 'block' : 'none');
  }

  function zComplete()
  {
    // Invoked by the 'Complete' button
    var box = document.getElementById('zNoItems');
    if (box.checked)
      return true;

    // Validate each required item
    var anyChecked = false;
    for (var j = 1; j <= zNItems; j++)
    {
      var b = document.getElementById('zSpan_' + j);
      if (b == null)
        continue;
      var i = b.e;

      box = document.getElementById('zCheck_' + i);
      if (box != null && !box.disabled)
      {
        var txt = document.getElementById('zText_' + i);
        var s = txt.value.replace(/ +$/, '');
        txt.value = s;
        if (box.checked)
          anyChecked = true;
        if (s == '' && box.checked && box.req == 'Y')
        {
          txt.focus();
          alert('Please provide a comment for each required item selected');
          return false;
        }
      }
    }

    if (!anyChecked)
    {
      alert('Please select at least one list item or "No Items"');
      return false;
    }
    return true;
  }
//-->
</script>
 
<!-- Text -->
<div id='ZItemBox'>
  <span title='No items selected'>
   <input name='zNoItems' type='checkbox' value='Y'
     onclick='zToggleItemList(this)'
   > No items</input>
  </span>

  <hr/>
  <span id='zItemList' style='overflow:auto; width=100%; height:200px'>
    <table id='zItems' cols='1' border='0' width='100%'
      cellpadding='0' cellspacing='0' style=''>

     <!-- Item 1. -->
     <tr><td>
      <input name='zCheck_101' type='checkbox' value='Y' req='N' checked
        onclick='zToggleItem("zSpan_1", this)'
        > List item 1</input>
      <span id='zSpan_1' style='display:block' e='101'>
        <table width='100%' cols='2'>
         <tr>
          <td><font color='#E00000'><tt>&nbsp;</tt></font></td>
          <td width='100%'>
           <input name='zText_101' type='text'
             style='width:100%; display:inline' maxlength='100'
             value='Some text (1).'>
           </input></td>
         </tr>
        </table>
      </span>
     </td></tr>

     <!-- Item 2. -->
     <tr><td>
      <input name='zCheck_102' type='checkbox' value='Y' req='Y' checked
        onclick='zToggleItem("zSpan_2", this)'
        > List item 2</input>
      <span id='zSpan_2' style='display:block' e='102'>
        <table width='100%' cols='2'>
         <tr>
          <td><font color='#E00000'><tt>*</tt></font></td>
          <td width='100%'>
           <input name='zText_102' type='text'
             style='width:100%; display:inline' maxlength='100'
             value='Some text (2).'>
           </input></td>
         </tr>
        </table>
      </span>
     </td></tr>

     <!-- Item 3. -->
     <tr><td>
      <input name='zCheck_103' type='checkbox' value='Y' req='N'
        onclick='zToggleItem("zSpan_3", this)'
        > List item 3</input>
      <span id='zSpan_3' style='display:none' e='103'>
        <table width='100%' cols='2'>
         <tr>
          <td><font color='#E00000'><tt>&nbsp;</tt></font></td>
          <td width='100%'>
           <input name='zText_103' type='text'
             style='width:100%; display:inline' maxlength='100'
             value=''>
           </input></td>
         </tr>
        </table>
      </span>
     </td></tr>

...SOME CONTENTS REMOVED FOR BREVITY...

     <!-- Item 10. -->
     <tr><td>
      <input name='zCheck_110' type='checkbox' value='Y' req='Y' checked
        onclick='zToggleItem("zSpan_10", this)'
        > List item 10</input>
      <span id='zSpan_10' style='display:block' e='110'>
        <table width='100%' cols='2'>
         <tr>
          <td><font color='#E00000'><tt>*</tt></font></td>
          <td width='100%'>
           <input name='zText_110' type='text'
             style='width:100%; display:inline' maxlength='100'
             value=''>
           </input></td>
         </tr>
        </table>
      </span>
     </td></tr>

    </table> <!-- 'zItems' -->
  </span> <!-- 'zItemList' -->

  <hr/>
  <input name='zIsComplete' type='button' value='Complete'
    title='Click when the list is complete'
    onclick='if (zComplete()) alert("List is complete")'>
  </input><br/>
</div> <!-- 'zItemBox' -->

Copyright ©2007 by David R. Tribble, all rights reserved.
Permission is granted to anyone to link to this document and to quote portions of it without restriction. Permission is granted to anyone except members of organizations designated as terrorist organizations by the U.S. State Department to freely use, duplicate, and modify this source code.