showing/hiding layers problem

[sambo80]

Hi

I have web page, with 3 radio buttons. Clicking on either will display 1 of 3 different forms.

I've got some javascript in my head tag, and then got "onClick" code on the radio buttons, then the 3 forms are each surrounded by div tags. It all works.

But I want to show and hide 2 tables in one of these forms.

Any ideas if I can have more of these div tags within the form div tags?

Its not working so far....

the code is shown below....I'm only showing selected bits form the page:

Javascript code in head tags:

<script type="text/javascript">
<!--

function changeDiv(the_div,the_change)
{
  var the_style = getStyleObject(the_div);
  if (the_style != false)
  {
    the_style.display = the_change;
  }
}

function hideAll()
{
  changeDiv("standalone","none");
  changeDiv("server","none");
  changeDiv("concurrent","none");
  changeDiv("ProjectRisk","none");
  changeDiv("RiskExpert","none");
}

function getStyleObject(objectId) {
  if (document.getElementById && document.getElementById(objectId)) {
    return document.getElementById(objectId).style;
  } else if (document.all && document.all(objectId)) {
    return document.all(objectId).style;
  } else {
    return false;
  }
}
// -->
</script>

In my body tags I have 3 separate forms - each enclosed within <div id...> tags. Beofore the first form div tag I have 3 radio buttons which are linked to the 3 forms.

Therefore the overview of the code is:

- radio button code where user will choosethe form:

<input type="radio" name="pet" onClick="hideAll(); changeDiv('standalone','block');" checked>Standalone Licence
<input type="radio" name="pet" onClick="hideAll(); changeDiv('server','block');">Server-named Licence
<input type="radio" name="pet" onClick="hideAll(); changeDiv('concurrent','block');">Concurrent Licence

- 1st form div tag:

<div id="standalone" style="margin:5px;display:block">

.... FORM CODE - normal stuff

</div>

- 2nd form div tag:

<div id="server" style="margin:5px;display:none">

...form code

</div>

- 3rd form - THE BIT I NEED HELP WITH. In this 3rd form, I want to implement the showing/hiding layers functionality. So its nested within the div tag so to speak.

I have the usual form tag, and then some input fields as well.

However, one particular drop down list needs to show/hide 2 different tables. I was thinking of having separate div tags around the 2 tables, and then have the div id's in the head code as you can see above:

changeDiv("ProjectRisk","none");
changeDiv("RiskExpert","none");

Therefore the code I has so far in this 3rd form for a particluar option is:

<select name="software">
    <Option value="ProjectRisk" onClick="hideAll(); changeDiv('ProjectRisk','block');">Project Risk</Option>
    <Option value="RiskExpert" onClick="hideAll(); changeDiv('concurrent','block');">Risk Expert</Option>
</select>

and then underneath I have 2 tables each with 2 div tags:

<div id="ProjectRisk" style="margin:5px;display:block">

   1st table goes here
</div>

repeat for 2nd table as well.

The main 3 forms work as they should. But the nested functionality with the drop down list does not. I can select the option, but the table code does not hide or show as it should.

Any ideas please?? I would really appreciate any help on this.....

I have found a lot of info on showing / hiding divs, but not showing/hiding data nested in one of these divs (if that makes sense?!?!)

Thanks

 

[BillyRayPreachersSon]

You should use the onchange event of the select element, rather than the onlick event of the option elements.

Hope this helps,
Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[sambo80]

Hi Dan

Thanks for your reply....Changing the onClick to onChange didn't work (unless I needed to do something else to that line as well).

But I've got a workaround.

In my 3rd form I put in some more javascript, just above the select tags...:

<SCRIPT LANGUAGE="JAVASCRIPT"> 

function showDropDownBox(ddbox) { 
   if ( ddbox.options[ddbox.selectedIndex].value == "" ) {
   	  document.getElementById("priceTable2").style.display = "none";
   	  document.getElementById("priceTable").style.display = "none";
	
	} else if ( ddbox.options[ddbox.selectedIndex].value == "ProjectRisk" ) { 
      document.getElementById("priceTable").style.display = "block"; 
	  document.getElementById("priceTable2").style.display = "none";
	  
   } else if ( ddbox.options[ddbox.selectedIndex].value == "RiskExpert" ) { 
      document.getElementById("priceTable").style.display = "none";
	  document.getElementById("priceTable2").style.display = "block"; 
   } 
} 

</SCRIPT>

In my select tags I had the following:

<select name="Software" ONCHANGE="showDropDownBox(this)">
   <option value=""></option>
   <Option value="ProjectRisk">Project Risk</Option>
   <Option value="RiskExpert">Risk Expert</Option>
</select>

then beneath I had 2 DIV ID tags each containing test lines for now, bit can easily contain my tables...

<DIV ID="priceTable" STYLE="display:none;">
<table>
  <tr>
    <td>test</td>
  </tr>
</table>
</DIV>

<DIV ID="priceTable2" STYLE="display:none;">
<table>
  <tr>
    <td>test 2</td>
  </tr>
</table>
</DIV>

I think that should be ok....I'll get back if I need to

 

[BillyRayPreachersSon]

But I've got a workaround.

Your workaround is exactly what I suggested! Anyway - good to see you got it working in the end.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]