SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Toggling Hide/Show on Radio Selection

    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 Code:
    <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:
    HTML Code:
    </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>
    Last edited by Mittineague; Aug 15, 2011 at 12:29. Reason: reformatting bbcode tags

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    function toggle(value) {
      if radio1:
        show hideablearea
        hide hideit
      else:
        hide hideablearea
        show hideit
    
    }
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow! haha super easy solution, thanks though sometimes just can't find something that easy by myself.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •