Link to home
Start Free TrialLog in
Avatar of Steven
StevenFlag for United States of America

asked on

hide tables based on selection boxes

User generated image
i have a form created that i need help with hiding tables unless a selection box is checked

the attached screenshot will give you a better idea of what i'm trying to achieve

in the screenshot you see 5 rows of selection boxes

let's begin with the first row (highlighted in yellow)
IF manager 1 is checked, then the table below titled 'management 1' needs to appear
we also have a javascript function (marked with red X) that must be required (but only IF this table is shown)

IF manager 2 is checked, then the table below titled 'management 2' needs to appear
same as above, the red X will be required


the red X is a javascript button which pops open a window for us to select something.  that selection is then inserted into the text box to the left of the red X - this should only be required if the table is unhidden by using the selection boxes above.



once we figure out row one 'managers required', i can manipulate the code for the remaining selection rows.

any ideas?  or direction?
 
ASKER CERTIFIED SOLUTION
Avatar of CCSOFlag
CCSOFlag
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Sorry from <input... down put in your html body section.

and also be sure the javascript is in a script tag in the head section.
Avatar of Steven

ASKER

thanks!  another thing i need to get working is the order these boxes are allowed to be selected.

for example, if they select box 4, then box 1,2,3 should be selected together

you just cant select box 4 and get table 4.  make sense?
Put this script in header:    
<script type="text/javascript">
        function ShowTable(vTable,vChecked)
        {
          if (vChecked == true)
          {
            document.getElementById(vTable).style.display = 'block';
          }
          else
          {
            document.getElementById(vTable).style.display = 'none';
          }
        }
       
        function CheckSelection(vText,vNum,vChecked)
        {
            if (vChecked == true)
            {
                for(i=vNum; i>0; i--)
                {
                    document.getElementById(vText+i).checked = true;
                    ShowTable(vText+i+'Table',true);
                }
            }
            else
            {
                var maxCount = document.getElementsByName(vText).length;
                alert(maxCount);
                for(i=vNum; i<maxCount+1; i++)
                {
                    document.getElementById(vText+i).checked = false;
                    ShowTable(vText+i+'Table',false);
                }
            }
        }
    </script>

Put this in your body:
<input type="checkbox" id="Manager1" onclick="ShowTable('Manager1Table',this.checked);CheckSelection('Manager',1,this.checked);" name="Manager" />
<input type="checkbox" id="Manager2" onclick="ShowTable('Manager2Table',this.checked);CheckSelection('Manager',2,this.checked);" name="Manager" />
<input type="checkbox" id="Manager3" onclick="ShowTable('Manager3Table',this.checked);CheckSelection('Manager',3,this.checked);" name="Manager" />
<input type="checkbox" id="Manager4" onclick="ShowTable('Manager4Table',this.checked);CheckSelection('Manager',4,this.checked);" name="Manager" />

<table id="Manager1Table" style="display: none;">
...
</table>
<table id="Manager2Table" style="display: none;">
...
</table>
<table id="Manager3Table" style="display: none;">
...
</table>
<table id="Manager4Table" style="display: none;">
...
</table>

Repeat this for all your different types of checkboxes/Tables.  Also of course just number them up to what you are using.  Be sure to name the checkboxes with the same beginning text as your tables.  In this case both Start with 'Manager'.  Otherwise you'd need to add more code to compensate for that.  Also be sure to have a name attribute for the checkboxes so javascript can get the count of how many checkboxes you have for that type of sign off.
Avatar of Steven

ASKER

hey thanks greatly, i will be awarding you points for sure

small request, to avoid the validation of which order stuff was checked, etc - we are switching things up

so now instead of selection boxes we will be using drop downs.

so from the manager selection, if they select 2 from the drop down then two tables will be shown

what do you think?  how can i change it up, slightly?
       function ShowTable(vTable,vValue)
        {
            vValue = parseInt(vValue);
            var mySelect = document.getElementById(vTable);
            var maxCount = mySelect.getElementsByTagName("option").length - 1;
            if (vValue > 0)
            {
                for(i=vValue; i>0; i--)
                {
                    document.getElementById(vTable+i+'Table').style.display = 'block';
                }
               
                for(j=vValue+1; j<maxCount+1; j++)
                {
                    document.getElementById(vTable+j+'Table').style.display = 'none';
                }
            }
            else
            {
                for(k=vValue+1; k<maxCount+1; k++)
                {
                    document.getElementById(vTable+k+'Table').style.display = 'none';
                }
            }
        }



<select id="Manager" onclick="ShowTable('Manager', this.options[this.selectedIndex].value);" >
    <option value="0">...Manager...</option>
    <option value="1">Manager 1</option>
    <option value="2">Manager 2</option>
    <option value="3">Manager 3</option>
    <option value="4">Manager 4</option>
</select>


Avatar of Steven

ASKER

okay i'm trying to use that but having a few problems

do i need to piece in code from the table elements above?
above is what should be in your javascript.  You don't need prior posts javascript.

then for each drop down (Manager, Technical Assistance, etc) you'll hav eit look like the last post.  Then all the tables should be IDed the same as in previous posts (ie Manager1Table if the select id is Manager).  So in this case yes your tables would be like this:

<table id="Manager1Table" style="display: none;">
...
</table>
<table  id="Manager2Table" style="display: none;">
...
</table>
<table  id="Manager3Table" style="display: none;">
...
</table>
<table  id="Manager4Table" style="display: none;">
...
</table>

Avatar of Steven

ASKER

okay, having some problems with that javascript

im using dreamweaver and its not lighting up like it should (validating the code)
<script type='text/javascript">
function ShowTable(vTable,vValue)
       {
           vValue = parseInt(vValue);
           var mySelect = document.getElementById(vTable);
           var maxCount = mySelect.getElementsByTagName("option").length - 1;
           if (vValue > 0)
           {
               for(i=vValue; i>0; i--)
               {
                   document.getElementById(vTable+i+'Table').style.display = 'block';
               }
               
               for(j=vValue+1; j<maxCount+1; j++)
               {
                   document.getElementById(vTable+j+'Table').style.display = 'none';
               }
           }
           else
           {
               for(k=vValue+1; k<maxCount+1; k++)
               {
                   document.getElementById(vTable+k+'Table').style.display = 'none';
               }
           }
       }
</script>

Open in new window

<script type="text/javascript">

You have a single quote on the beginning instead of a double quote.
Avatar of Steven

ASKER

awesooooooome - so things are working, almost

when i select manager 2, both table 1 & 2 appear ONLY IF i click the drop down box

it's like i have to put the dropdown box on focus for the tables to appear

here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function ShowTable(vTable,vValue)
       {
           vValue = parseInt(vValue);
           var mySelect = document.getElementById(vTable);
           var maxCount = mySelect.getElementsByTagName("option").length - 1;
           if (vValue > 0)
           {
               for(i=vValue; i>0; i--)
               {
                   document.getElementById(vTable+i+'Table').style.display = 'block';
               }
               
               for(j=vValue+1; j<maxCount+1; j++)
               {
                   document.getElementById(vTable+j+'Table').style.display = 'none';
               }
           }
           else
           {
               for(k=vValue+1; k<maxCount+1; k++)
               {
                   document.getElementById(vTable+k+'Table').style.display = 'none';
               }
           }
       }
</script>

</head>

<body>

<p>
  <select id="Manager" onclick="ShowTable('Manager', this.options[this.selectedIndex].value);" >
    <option value="0">...Manager...</option>
     <option value="1">Manager 1</option>
     <option value="2">Manager 2</option>
     <option value="3">Manager 3</option>
     <option value="4">Manager 4</option>
  </select>
</p>
<p>&nbsp;</p>
<table id="Manager1Table" width="400" border="1" cellspacing="3" cellpadding="3">
  <tr>
    <td>can you see me? my name is table 1</td>
  </tr>
</table>
<p>&nbsp;</p>
<table id="Manager2Table" width="400" border="1" cellspacing="3" cellpadding="3">
  <tr>
    <td>hi, i'm table 2</td>
  </tr>
</table>
<p>&nbsp;</p>
<table id="Manager3Table" width="400" border="1" cellspacing="3" cellpadding="3">
  <tr>
    <td>w00t! w00t! you made it to table 3</td>
  </tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>

Open in new window

Right, that's how it's designed.  When are you wanting them to show?  By default?
Avatar of Steven

ASKER

when you select manager3 i want the three tables to appear immediately

im having to select manager3 then click the dropdown to regain focus and then the three tables are displayed
are you using the keyboard to select?  you can change the onclick attributes to onchange instead if that works better for you.  Just depend son when you want it to fire.
Avatar of Steven

ASKER

ahhh onclick is working perfectly

so when you goto the page i need the tables hidden UNTIL you select from the dropdown

right now all tables are visible on the first page load
It's because you didn't put the style in.

be sure this is in each table tag:
 style="display: none;"

OR
you can do it via CSS file:
table
{
  display:none;
}
Avatar of Steven

ASKER

brilliant!!!!! that worked

okay, i've got one more wild request.  let me build this out real quick so i can better explain myself.

you're a huge help, much much appreciated
Avatar of Steven

ASKER

okay, i thought i could drum up an example but ill just try explaining myself

attached is my working code

there are four drop down boxes and several hidden tables

lets say we have the following drop downs:
dropdown1
dropdown2
dropdown3
dropdown4

then we have four tables

IF dropdown3 is selected, table3 is displayed
BUT its displayed where i placed the table

i want the table moved directly above the others IF table1 or table2 are not selected

does that make sense?

thats the final piece to this project!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function ShowTable(vTable,vValue)
       {
           vValue = parseInt(vValue);
           var mySelect = document.getElementById(vTable);
           var maxCount = mySelect.getElementsByTagName("option").length - 1;
           if (vValue > 0)
           {
               for(i=vValue; i>0; i--)
               {
                   document.getElementById(vTable+i+'Table').style.display = 'block';
               }
               
               for(j=vValue+1; j<maxCount+1; j++)
               {
                   document.getElementById(vTable+j+'Table').style.display = 'none';
               }
           }
           else
           {
               for(k=vValue+1; k<maxCount+1; k++)
               {
                   document.getElementById(vTable+k+'Table').style.display = 'none';
               }
           }
       }
</script>

</head>

<body>


  <select id="Manager" onchange="ShowTable('Manager', this.options[this.selectedIndex].value);" >
    <option value="0">...Manager...</option>
     <option value="1">Manager 1</option>
     <option value="2">Manager 2</option>
     <option value="3">Manager 3</option>
  </select>
  <br />
  <br />

<table id="Manager1Table" style="display:none;" width="400" border="1" cellspacing="3" cellpadding="3">
  <tr>
    <td>can you see me? my name is table 1</td>
  </tr>
</table>

<table id="Manager2Table"  style="display:none;" width="400" border="1" cellspacing="3" cellpadding="3">
  <tr>
    <td>hi, i'm table 2</td>
  </tr>
</table>

<table id="Manager3Table"  style="display:none;" width="400" border="1" cellspacing="3" cellpadding="3">
  <tr>
    <td>w00t! w00t! you made it to table 3</td>
  </tr>
</table>
  <select id="Technical" onchange="ShowTable('Technical', this.options[this.selectedIndex].value);" >
    <option value="0">...Technical...</option>
     <option value="1">Technical 1</option>
     <option value="2">Technical 2</option>
     <option value="3">Technical 3</option>
  </select>
  <br />
  <br />
<table id="Technical1Table" style="display:none;" width="400" border="1" cellspacing="3" cellpadding="3">
  <tr>
    <td>can you see me? my name is table 1</td>
  </tr>
</table>

<table id="Technical2Table"  style="display:none;" width="400" border="1" cellspacing="3" cellpadding="3">
  <tr>
    <td>hi, i'm table 2</td>
  </tr>
</table>

<table id="Technical3Table"  style="display:none;" width="400" border="1" cellspacing="3" cellpadding="3">
  <tr>
    <td>w00t! w00t! you made it to table 3</td>
  </tr>
</table>
  <select id="Reviewer" onchange="ShowTable('Reviewer', this.options[this.selectedIndex].value);" >
    <option value="0">...Reviewer...</option>
     <option value="1">Reviewer 1</option>
     <option value="2">Reviewer 2</option>
     <option value="3">Reviewer 3</option>
</select>
<table id="Reviewer1Table" style="display:none;" width="400" border="1" cellspacing="3" cellpadding="3">
  <tr>
    <td>can you see me? my name is table 1</td>
  </tr>
</table>

<table id="Reviewer2Table"  style="display:none;" width="400" border="1" cellspacing="3" cellpadding="3">
  <tr>
    <td>hi, i'm table 2</td>
  </tr>
</table>

<table id="Reviewer3Table"  style="display:none;" width="400" border="1" cellspacing="3" cellpadding="3">
  <tr>
    <td>w00t! w00t! you made it to table 3</td>
  </tr>
</table>
  <br />
  <br />
<select id="Executive" onchange="ShowTable('Executive', this.options[this.selectedIndex].value);" >
    <option value="0">...Executive...</option>
     <option value="1">Executive 1</option>
     <option value="2">Executive 2</option>
     <option value="3">Executive 3</option>
</select>
<table id="Executive1Table" style="display:none;" width="400" border="1" cellspacing="3" cellpadding="3">
  <tr>
    <td>can you see me? my name is table 1</td>
  </tr>
</table>

<table id="Executive2Table"  style="display:none;" width="400" border="1" cellspacing="3" cellpadding="3">
  <tr>
    <td>hi, i'm table 2</td>
  </tr>
</table>

<table id="Executive3Table"  style="display:none;" width="400" border="1" cellspacing="3" cellpadding="3">
  <tr>
    <td>w00t! w00t! you made it to table 3</td>
  </tr>
</table>
</body>
</html>

Open in new window

just place the tables where you want them to show up.  Maybe I don't understand what you are asking.  Where do you want the tables?  At the bottom of the page?  At the top?  I figured you wanted them like the image you posted.  If so just move all the tables below the drop downs in your html code.
Avatar of Steven

ASKER

all the tables are stacked on top of each other

if table four is selected to be displayed theres a huge gap because of the three tables that are above it and hidden

i would like table four to move to the top
I'm not seeing gaps except where you have <br />.  display: none; is different than visibility: hidden.  Visibility still leaves the space there, it just does not show the contents.  display: none actually removes everything as if the code wasn't there including space.  

Try only having one <br /> after the selects and see if that's what you want.  There are also two <br /> tags before your executive select.  In reality I don't think you need the <br /> tags because the tables are block elements.
Avatar of Steven

ASKER

okay, as i implement this javascript into what ive been handed, i run across a few problems

i believe my problems are caused by vValue = parseInt(vValue)
but possibly not

ive been given selection boxes to use which already have an id

so, for example here is one of my selection boxes:

<SELECT CLASS="selectMenu" ID="_1_1_76_1" NAME="_1_1_76_1" ONCHANGE="ShowTable('Manager', this.options[this.selectedIndex].value);">
<OPTION VALUE="" ><None></OPTION>
<OPTION VALUE="1" >1</OPTION>
<OPTION VALUE="2" >2</OPTION>
</SELECT>


and here is the table i would like to show upon selecting value 1:

<table id="_1_1_76_1" style="display:none" width="800" border="0" cellspacing="3" cellpadding="3">
  <tr>
    <th class="style1" width="277" valign="bottom"><div align="left"><br>
    Management 1:</div></th>
    <th class="style1" width="436" valign="bottom"><div align="left"><br>
    Management 1 Comments:</div></th>
  </tr>


i also have a second table to show if option 2 is selected, but since option 1 isnt working i really havent gotten much further

as you can see i already tried piecing a few things in there that worked on our simple proof of concept

so again, i've been handed 6 selection boxes each with a predetermined ID.  any ideas?

change the ID in the code view.  You can do a search on in that document and replace every instance of that specific id to how we named things.  And also there is a big issue if it is giving the select tag the same id as the table tag.  There cannot be duplicate ids on a page.  Your other option is to put the select id into the first passed variable for the ShowTable function and then change the table IDs to that id plus the 1 and Table.
Avatar of Steven

ASKER

so do i need to modify the javascript at all?
no.  It's dynamic javascript.  It will use whatever you pass in as long as you use the naming scheme that I show you.  As long as the table id is like this:  <Select id>+ # + "Table"   you are ok with the javascript.
Avatar of Steven

ASKER

man, having troubles

okay, this is what i've been given:
<SELECT CLASS="selectMenu" ID="_1_1_79_1" NAME="_1_1_79_1" ONCHANGE="markDirty();">
<OPTION VALUE="" ><None></OPTION>
<OPTION VALUE="1" >1</OPTION>
<OPTION VALUE="2" >2</OPTION>
<OPTION VALUE="3" >3</OPTION>
<OPTION VALUE="4" >4</OPTION>
</SELECT>

(dont mind the onchange, markdirty function - i will replace that with showtable)


so here is the table i need to hide/unhide IF option 1 is selected:
<table width="800" border="0" cellspacing="3" cellpadding="3">
  <tr>
    <th class="style1" width="277" valign="bottom"><div align="left"><br>
    Management 2:</div></th>
    <th class="style1" width="436" valign="bottom"><div align="left"><br>
    Management 2 Comments:</div></th>
  </tr>
</table>


if you could kindly show me, based on the above - i should be able to take it from there.....i hope
Make the bolded changes:

<SELECT CLASS="selectMenu" ID="Manager" NAME="_1_1_79_1"  ONCHANGE="ShowTable();">
<OPTION VALUE="0"  ><None></OPTION>
<OPTION VALUE="1"  >1</OPTION>
<OPTION VALUE="2" >2</OPTION>
<OPTION  VALUE="3" >3</OPTION>
<OPTION VALUE="4"  >4</OPTION>
</SELECT>


<table id="Manager1Table" width="800" border="0" cellspacing="3" cellpadding="3">
   <tr>
    <th class="style1" width="277"  valign="bottom"><div align="left"><br>
    Management  2:</div></th>
    <th class="style1" width="436"  valign="bottom"><div align="left"><br>
    Management 2  Comments:</div></th>
  </tr>
</table>
Avatar of Steven

ASKER

woohoo!

standby
put a <div id="table1"> .. </div> around each table changing the id of course and then set the display to none as mentioned above.  the divs when hidden will take no space.  
<div id="table1"> .. </div>
<div id="table2"> .. </div>
<div id="table3"> .. </div>
<div id="table4"> .. </div>
<div id="table5"> .. </div>
GT,

tables are block elements just like divs so adding a div here just adds more text to the page that is not needed.
Avatar of Steven

ASKER

thanks for all the help - much appreciated!
ah .. true.. I just like divs. :)