Toggling Hide/Show on Radio Selection

JavaScript
1

I have a calculator that I want users to be able to select a radio option that will display the coresponding calculator and hide it when the other radio button is selected in other words I want to only have one visible div at a time. How would I do this?

Here is my Javascript:

<html>

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

function toggle(value){
if(value==='radio1')
 document.getElementById('hideablearea').style.display='block';
else
 document.getElementById('hideit').style.display='block';
}
	

function Calculate(BlockCalculator) {

var select = Number(BlockCalculator.select.value);

var DimensionA = Number(BlockCalculator.DimensionA.value);

var DimensionB = Number(BlockCalculator.DimensionB.value);

var DimensionC = Number(BlockCalculator.DimensionC.value);

var X = Math.ceil(DimensionA * DimensionB * DimensionC * 0.7 * 8);

var Y = Math.ceil(DimensionA * DimensionB * DimensionC * 0.7 * 3.37);

//add the variables and update the total field value with the result.
if (select < 7)
{BlockCalculator.total.value = X;}
else
{BlockCalculator.total.value = Y;}
}

function runTotal(L_shape) {

var G = Number(L_shape.G.value);

var A = Number(L_shape.A.value);

var B = Number(L_shape.B.value);

var C = Number(L_shape.C.value);

var D = Number(L_shape.D.value);

var E = Number(L_shape.E.value);

var M = Math.ceil(((A * B * C) - ((A - D) * (C) * (B - E))) * 0.7 * 8);

var N = Math.ceil(((A * B * C) - ((A - D) * (C) * (B - E))) * 0.7 * 3.37);


//add the variables and update the total field value with the result.
if (G < 7)
{L_shape.total.value = M;}
else
{L_shape.total.value = N;
}
//-->
}
</script>

Here is my HTML:

</head>

<body>
<BR>
<BR>
<h3><font face="helvetica" size="5" color="043E4b">Foam Block Calculator</font></h3>
<form id="rectlsh" name="rectlsh" method="post" action="nextpage.asp">
 <ss:image source="$storeVersion.images['rectanglepitth.JPG']" height="150" width="200"/><label>
      <input type="radio" name="Block Calculator" value="radio1" onclick="toggle('radio1');"/> 
      Rectangle Pit 
    </label>&nbsp&nbsp&nbsp&nbsp
    <ss:image source="$storeVersion.images['L-shapepit.JPG']" height="150" width="200"/><label>
      <input type="radio" name="Block Calculator" value="radio2" onclick="toggle('radio2');"/> 
      L-Shape Pit 
    </label>
</form>
<div id='hideit' style='display:none'>
<form id="L_shape" name="L_shape" method="post" action="">
  
<h2>L-shape</h2>
<label>Cube Size
  <select name="G">
    <option value="6">6&quot; Cube</option>
    <option value="8">8&quot; Cube</option>
  </select>
  </label>
<p>&nbsp</p>
  <label>A 
  <input  name="A" size=3 maxlength=5  type="text" value="0">
  ft.
  </label>
 &nbsp&nbsp
    <label>B 
    <input  name="B" size=3 maxlength=5 type="text" value="0">
    ft.
</label>
  &nbsp&nbsp
    <label>C 
    <input name="C" size=3 maxlength=5 type="text" value="0">
    ft.
</label>
 &nbsp&nbsp
    <label>D  
    <input  name="D" size=3 maxlength=5 type="text" value="0">
    ft.
</label>
  &nbsp&nbsp
    <label>E  
    <input  name="E" size=3 maxlength=3 type="text" value="0">
    ft.
</label>
  <p>&nbsp</p>
    <label> 
    <input type=text size=3 maxlength=5 name="total">
    # of Blocks
</label>
&nbsp&nbsp&nbsp&nbsp<input name="Calculate" type="button" onClick="runTotal(this.form)" value="Calculate" >  

    <label>
    
    </label>
  </p>
 
</form>
</div>

<div id='hideablearea' style='display:none'>
<form id="BlockCalculator" name="BlockCalculator" method="post" action="nextpage.asp" align="left">
  
<h2>Rectangle</h2>
<label>Cube Size
  <select name="select">
    <option value="6">6&quot; Cube</option>
    <option value="8">8&quot; Cube</option>
  </select>
  </label>
<p>&nbsp</p>
  <label>A 
  <input name="DimensionA" size=3 maxlength=5  type="text" value="0">
ft.  
</label>
  &nbsp&nbsp
    <label>B 
    <input name="DimensionB" size=3 maxlength=5 type="text" value="0">
ft.    
</label>
 &nbsp&nbsp
    <label>C 
    <input name="DimensionC" size=3 maxlength=5 type="text" value="0">
ft.    
</label>
 <p>&nbsp</p>
    <label> 
    <input type=text size=3 maxlength=5 name="total">
# of Blocks    
</label>
&nbsp&nbsp&nbsp&nbsp<input name="Calculation" type="button" onClick="Calculate(this.form)" value="Calculate" > 
</p>
  <p>
    <label>
    </label>
  </p>
  <p>&nbsp;</p>
</form>
</div>
</body>

</html>
2

You’re almost there, in your toggle function you need to also hide the div that you don’t want to show.

In pseudo code:

function toggle(value) {
  if radio1:
    show hideablearea
    hide hideit
  else:
    hide hideablearea
    show hideit

}
3

wow! haha super easy solution, thanks though sometimes just can’t find something that easy by myself.