www.webdeveloper.com
Results 1 to 2 of 2

Thread: Radio buttons to open list of more radio buttons

  1. #1
    Join Date
    Nov 2013
    Posts
    1

    Radio buttons to open list of more radio buttons

    I'm new to JavaScript and I'm trying to create an order form on an ecommerce store. I'm familiar with HTML but I'm not really sure where to start with scripting.

    I'm trying to make a set of radio buttons open up another menu of radio buttons.

    The order form is for custom decals and I need customers to be able to choose a decal shape

    I want one set of radio buttons per shape of decals: circle decals, square, custom shape, rectangle, oval etc...

    This way when a customer picks lets say... circle decals... another menu displaying the available sizes of circle decals will appear where they can then use radio buttons to select sizes, material type, and quanitity

    I would then like the choices they select to calculate the total cost of the order.

    I know it will probably be complicated and require a lot of coding but any help would be much appreciated.
    Thanks!

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,437

    Wink

    Most of this is HTML and CSS with a little JS thrown in, so you should be able to modify it easily...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> Untitled </title>
    <script type="text/javascript">
     function getRBtnName(GrpName) {
      var sel = document.getElementsByName(GrpName);
      var fnd = -1;
      var str = '';
      for (var i=0; i<sel.length; i++) {
        if (sel[i].checked == true) { str = sel[i].value;  fnd = i; }
      }
    //  return fnd;   // return option index of selection
    // comment out next line if option index used in line above  
      return str;
     } 
     function toggleIDS(IDS) {
      var CState = document.getElementById(IDS);
      if (CState.style.display != "block") { CState.style.display = "block"; }
                                      else { CState.style.display = "none"; }
     }
     function toggleDecals(IDS) {
      var sel = document.getElementsByName('shape');
      for (var i=0; i<sel.length; i++) {
        document.getElementById(sel[i].value).style.display = 'none';
      }
      toggleIDS(IDS);
     }
    </script>
    
    <style type="text/css">
     fieldset { width:25%; }
     fieldset div { display:none; }
     fieldset li { list-style-type:none; }
    </style>
    
    </head>
    <body>
    <fieldset>
     <legend> 
      <label> <input type="radio" name="shape" value="cir" onclick="toggleDecals(this.value)"> Circle Decals </label>
     </legend>
     <div id="cir">
     <li>Size: 
      <input type="radio" name="cirSize" value="CS1"> 1
      <input type="radio" name="cirSize" value="CS2"> 2
      <input type="radio" name="cirSize" value="CS3"> 3
      <input type="radio" name="cirSize" value="CS4"> 4
     </li>
     <li> Material: 
      <input type="radio" name="cirMat" value="CM1"> Gold
      <input type="radio" name="cirMat" value="CM2"> Silver
      <input type="radio" name="cirMat" value="CM3"> Bronze
      <input type="radio" name="cirMat" value="CM4"> Nickle
     </li>
     <li> Quantity: 
      <input type="radio" name="cirQuan" value="CQ1"> 1
      <input type="radio" name="cirQuan" value="CQ2"> 2
      <input type="radio" name="cirQuan" value="CQ3"> 3
      <input type="radio" name="cirQuan" value="CQ4"> 4
     </li>
     </div>
    </fieldset>
    
    <fieldset>
     <legend>
      <label> <input type="radio" name="shape" value="sqr" onclick="toggleDecals(this.value)"> Square Decals </label>
     </legend>
     <div id="sqr">
     <li>Size: 
      <input type="radio" name="sqrSize" value="SS1"> 1
      <input type="radio" name="sqrSize" value="SS2"> 2
      <input type="radio" name="sqrSize" value="SS3"> 3
      <input type="radio" name="sqrSize" value="SS4"> 4
     </li>
     <li> Material: 
      <input type="radio" name="sqrMat" value="SM1"> Gold
      <input type="radio" name="sqrMat" value="SM2"> Silver
      <input type="radio" name="sqrMat" value="SM3"> Bronze
      <input type="radio" name="sqrMat" value="SM4"> Nickle
     </li>
     <li> Quantity: 
      <input type="radio" name="sqrQuan" value="SQ1"> 1
      <input type="radio" name="sqrQuan" value="SQ2"> 2
      <input type="radio" name="sqrQuan" value="SQ3"> 3
      <input type="radio" name="sqrQuan" value="SQ4"> 4
     </li>
     </div>
    </fieldset>
    
    <fieldset>
     <legend> 
      <label> <input type="radio" name="shape" value="rec" onclick="toggleDecals(this.value)"> Rectangle Decals </label>
     </legend>
     <div id="rec">
     <li>Size: 
      <input type="radio" name="recSize" value="RS1"> 1
      <input type="radio" name="recSize" value="RS2"> 2
      <input type="radio" name="recSize" value="RS3"> 3
      <input type="radio" name="recSize" value="RS4"> 4
     </li>
     <li> Material: 
      <input type="radio" name="retMat" value="RM1"> Gold
      <input type="radio" name="retMat" value="RM2"> Silver
      <input type="radio" name="retMat" value="RM3"> Bronze
      <input type="radio" name="retMat" value="RM4"> Nickle
     </li>
     <li> Quantity: 
      <input type="radio" name="retQuan" value="RQ1"> 1
      <input type="radio" name="retQuan" value="RQ2"> 2
      <input type="radio" name="retQuan" value="RQ3"> 3
      <input type="radio" name="retQuan" value="RQ4"> 4
     </li>
     </div>
    </fieldset>
    
    <fieldset>
     <legend> 
      <label> <input type="radio" name="shape" value="oval" onclick="toggleDecals(this.value)"> Oval Decals </label>
     </legend>
     <div id="oval">
     <li>Size: 
      <input type="radio" name="ovalSize" value="OS1"> 1
      <input type="radio" name="ovalSize" value="OS2"> 2
      <input type="radio" name="ovalSize" value="OS3"> 3
      <input type="radio" name="ovalSize" value="OS4"> 4
     </li>
     <li> Material: 
      <input type="radio" name="ovalMat" value="OM1"> Gold
      <input type="radio" name="ovalMat" value="OM2"> Silver
      <input type="radio" name="ovalMat" value="OM3"> Bronze
      <input type="radio" name="ovalMat" value="OM4"> Nickle
     </li>
     <li> Quantity: 
      <input type="radio" name="ovalQuan" value="OQ1"> 1
      <input type="radio" name="ovalQuan" value="OQ2"> 2
      <input type="radio" name="ovalQuan" value="OQ3"> 3
      <input type="radio" name="ovalQuan" value="OQ4"> 4
     </li>
     </div>
    </fieldset>
    
    <fieldset>
     <legend>
      <label> <input type="radio" name="shape" value="custom" onclick="toggleDecals(this.value)"> Custom Decals </label>
     </legend>
     <div id="custom">
     <li>Size: 
      <input type="radio" name="custSize" value="US1"> 1
      <input type="radio" name="custSize" value="US2"> 2
      <input type="radio" name="custSize" value="US3"> 3
      <input type="radio" name="custSize" value="US4"> 4
     </li>
     <li> Material: 
      <input type="radio" name="custMat" value="UM1"> Gold
      <input type="radio" name="custMat" value="UM2"> Silver
      <input type="radio" name="custMat" value="UM3"> Bronze
      <input type="radio" name="custMat" value="UM4"> Nickle
     </li>
     <li> Quantity: 
      <input type="radio" name="custQuan" value="UQ1"> 1
      <input type="radio" name="custQuan" value="UQ2"> 2
      <input type="radio" name="custQuan" value="UQ3"> 3
      <input type="radio" name="ovalQuan" value="UQ4"> 4
     </li>
     </div>
    </fieldset>
    
    </body>
    </html>
    Personally I would use checkboxes for the shapes so that more than one decal shape
    could be ordered at a time, but the code is for your particular request.
    Last edited by JMRKER; 11-15-2013 at 11:15 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles