#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    17
    Rep Power
    0

    My Simple function toggle does not work (newbie here)


    Hello Java GURU's

    I got this basic form that has a validation procedure when selecting on the 1st selection box the valid table should only appear. I got no problems when selecting "Homeroom" and "Science" even if i change the selection on the two topics it shows the valid table but when I choose "Math", "laboratory", "Diff" and "others" the tables keep appending
    downwards. Is there something missing on the script?

    Code:
    <html>
    <head>
    <title>OHAB SCHOOL</title>
    <script type='text/javascript'>
    var carrierslist=document.pogi.carriers
    var hostslist=document.pogi.hosts
    var hosts=new Array()
    
    function toggle(tbl_show,total_tbl)
         {
             for (i=1;i<total_tbl+1;i++)
             {
            eval("document.getElementById(\"thetbl"+i+"\").style.display='none'");
            }
             if (tbl_show!="") {     
                 obj=document.getElementById("thetbl"+tbl_show);
                 obj.style.display='';
                 }
         }
    
    </script>
    </head>
    <body >
    <form name="pogi">
    <table border="1">
      <tr>
        <td width="50%">
          <p>Select task</p>
        </td>
        <td>
         <select name="select_task" onchange="toggle(this.value,2)"> 
      <option value="">---SELECT ONE---</option>
      <option value="1">1 - Homeroom</option>
      <option value="2">2 - Science</option>
      <option value="3">3 - Math</option>
      <option value="4">4 - Laboratory</option>
      <option value="5">5 - DIFF</option>
      <option value="6">6 - Others</option>
      </select>
        </td>
    </tr>
    </table>
    </br>
    
    <!-- Homeroom--> 
     
    <table border="1" id="thetbl1" style="display:none">
    <tr>
       <td width="50%"><p>Select a topic</p></td>
       <td>
      <td ><select size="3" multiple="yes" > 
      <option selected >Select item</option>
      </select></td>
       </td>   
    </tr>
       </table>     
    
    
    <!-- Science-->
    
    <table border="1" id="thetbl2" style="display:none">
    
    <tr>
       <td><p>Select a topic1</p></td>
       <td><p>Select a topic2</p></td>
       <td><p>Select topic3</p></td>   
    </tr>
    <tr>
      <td ><select multiple="yes" > 
    <option selected >Select item</option>
      
      </select></td>
       <td>
      <select size="3" name="carriers"> 
    <option selected >Select item</option>
       </select> 
      </td>
      <td ><select select name="hosts"> 
    <option selected >Select item</option>
      </select>
      </td>
      </tr>
    </table>
    
    <!-- Math-->
    
    <table border="1" id="thetbl3" style="display:none">
       <tr >
     <td><p>Select Math topic1</p></td>
       <td><p>Select Math topic2</p></td>
       <td><p>Select Math topic3</p></td>
       <td><p>Select Math topic4</p></td>   
    </tr>
    <tr>
       <td><select size="3"  multiple="yes" ></td>
       <td><select size="3"  multiple="yes" ></td>
       <td><select size="3"  multiple="yes" ></td>
       <td><select size="3"  multiple="yes" ></td>
    </tr>
    </table>
    
    <!-- Laboratory-->
    
    <table border="1" id="thetbl4" style="display:none">
       <tr >
     <td><p>Select Lab topic1</p></td>
       <td><p>Select Lab topic2</p></td>
       <td><p>Select Lab topic3</p></td>
       <td><p>Select Lab topic4</p></td>   
    </tr>
    <tr>
       <td><select size="3"  multiple="yes" ></td>
       <td><select size="3"  multiple="yes" ></td>
       <td><select size="3"  multiple="yes" ></td>
       <td><select size="3"  multiple="yes" ></td>
    </tr>
    </table>
    
    <!-- DIFF-->
    
    <table border="1" id="thetbl5" style="display:none">
       <tr >
     <td><p>Select DIFF topic1</p></td>
       <td><p>Select DIFF topic2</p></td>
       <td><p>Select DIFF topic3</p></td>
       <td><p>Select DIFF topic4</p></td>   
    </tr>
    <tr>
       <td><select size="3"  multiple="yes" ></td>
       <td><select size="3"  multiple="yes" ></td>
       <td><select size="3"  multiple="yes" ></td>
       <td><select size="3"  multiple="yes" ></td>
    </tr>
    </table>
    
    <!-- Others-->
    
    <table border="1" id="thetbl6" style="display:none">
       <tr >
     <td><p>Select Others topic1</p></td>
       <td><p>Select Others topic2</p></td>
       <td><p>Select Others topic3</p></td>
       <td><p>Select Others topic4</p></td>   
    </tr>
    <tr>
       <td><select size="3"  multiple="yes" ></td>
       <td><select size="3"  multiple="yes" ></td>
       <td><select size="3"  multiple="yes" ></td>
       <td><select size="3"  multiple="yes" ></td>
    </tr>
    </table>
    
    <form>
    </body>
    </html>
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,173
    Rep Power
    184
    Because you only have 2 tables and you are calling for 4 tables, that do not exist, to display. If your only wanting to display those 2 tables, based on your 6 options; then the option values should either be 1 or 2. This way your only displaying your 2 tables with the ids "thetbl1" and "thetbl2".

    Comments on this post

    • javbegginer agrees : thanks!!
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    17
    Rep Power
    0
    Originally Posted by web_loone08
    Because you only have 2 tables and you are calling for 4 tables, that do not exist, to display. If your only wanting to display those 2 tables, based on your 6 options; then the option values should either be 1 or 2. This way your only displaying your 2 tables with the ids "thetbl1" and "thetbl2".
    Thanks, I just changed from "2" to "6" this from this line

    Code:
    <select name="select_task" onchange="toggle(this.value,6)">

IMN logo majestic logo threadwatch logo seochat tools logo