JavaScript Forum

**kansurr** · 07-10-2007, 12:13 PM

hey i have this code i am trying to get to work and i don't get why its not working so i am going to post it here and if someone who is smarter then me could come on and let me know why its not working and how i can fix it i would greatly appreciate it. if you have any questions let me know and i would be glad to answer them. thanks so much for your help.

-------------------------------------------------------------

Code:

<html lang="en">
    <title>Sysplex Quickcheck</title>
    <head>
        <script language = "JavaScript">
            function showMe (it, box)
            {
                var vis = (box.checked) ? "block" : "none";
                document.getElementById(it).style.display = vis;
            }
            show11(form)
            {
                if(form.Question11.value=="1")
                {
                    showMe('div111', form)
                }
                if(form.Question11.value=="2")
                {
                    showMe('div112', form)
                }
                if(form.Question11.value=="3")
                {
                    showMe('div113', form)
                }
            }
        </script>
    </head>
    <body>
        <form name="form" method="post">
            <table>
                <tbody>
                    <tr>
                        <td>
                            How many here you go's?
                            <select name="Question11" onChange="show11(this)">
                                <option SELECTED="" value=""></option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div id="div111" style="display:none">
                                <table>
                                    <tbody>
                                        <tr>
                                            <td>
                                                Here you go 1
                                                <INPUT TYPE="text" name="Question11a"></INPUT>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div id="div112" style="display:none">
                                <table>
                                    <tbody>
                                        <tr>
                                            <td>
                                                Here you go 1
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                Here you go 2
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div id="div113" style="display:none">
                                <table>
                                    <tbody>
                                        <tr>
                                            <td>
                                                Here you go 1    
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                Here you go 2
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                Here you go 3
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </form>
    </body>
</html>

**URLhost arvo** · 04:16 PM

I rewrote the code a little, I hope it still functions as you need. Take a look at this and let me know if it does what you want. If not, we'll try again...

Here goes...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>How Many?</title>
</head>
<body>
<script type="text/javascript">
<!--
var divNum=0;
var howMany=3; // set how many divs you have
function showDivs(obj) {
 var i, num;
 divNum = parseInt(obj.options[obj.selectedIndex].value);
 
 for(i=1; i<=howMany; i++) {
  num = (i<howMany+1) ? "0"+i : i;
 
  if(document.getElementById('div'+num)) { // if the div exists.
   if(i<=divNum) {// display.
    document.getElementById('div'+num).style.display="block";
   } else { // hide.
    document.getElementById('div'+num).style.display="none";
   }
  }
 }
}
function hideAllDivsOnLoad(){
 showDivs(document.getElementById("howmany"));
}
addLoadEvent(hideAllDivsOnLoad);
// add an onload event without destroying any previously set onload functions.
function addLoadEvent(func) {
 var oldonload = window.onload;
 if (typeof window.onload != 'function') {
  window.onload = func;
 } else {
  window.onload = function() {
   if (oldonload) {
    oldonload();
   }
   func();
  }
 }
}
//-->
</script>
  <table id="topTable" border="0" width="100%">
      <tr>
        <td>
        How Many?
        <select size="1" id="howmany" onchange="showDivs(this)">
        <option value="0" selected>-Select-</option>
        <option value="01">1</option>
        <option value="02">2</option>
        <option value="03">3</option>
        </select></td>
      </tr>
  </table>
<div id="div01">
  <table id="1st" border="0" width="100%">
      <tr>
        <td>1</td>
      </tr>
  </table>
</div>
<div id="div02">
  <table id="2nd" border="0" width="100%">
      <tr>
        <td>2</td>
      </tr>
  </table>
</div>
<div id="div03">
  <table id="3rd" border="0" width="100%">
      <tr>
        <td>3</td>
      </tr>
  </table>
</div>
</body>
</html>