title: Javascript to Select Multiple options with restrictions
body: <p>I need a form with multiple steps where the first step restricts options in the successive steps.</p>
  
  <p>So below is an example of use:</p>
  
  <ol>
  <li><p>User selects from 4 global options</p>
  
  <ul>
  <li>If user selects option 1
  
  <ul>
  <li>Then the user can only select 8 options (no more no less) from a multiple choice box.</li>
  </ul></li>
  <li>If user select option 2
  
  <ul>
  <li>Then the user can only select 10 options (no more no less) from a multiple choice box.</li>
  </ul></li>
  <li>Same is the case with options 3 and 4</li>
  </ul></li>
  <li><p>After all these selections, this form has to show a final price based on the options user selected in the FIRST STEP. No matter what choices were selected in successive steps.</p></li>
  <li><p>When this form shows final price, user has to click SUBMIT button and send this result with all these options through an email.</p></li>
  </ol>
  
  <p>Can someone help me in figuring out the javascript required to do this? Most important thing right now for me is to figure out 'restrictions codes' in multiple items choice boxes.</p>
  
  <p>This is the form I was thinking about:</p>
  
  <pre><code>&lt;form action="" id="menuform" onsubmit="return false;"&gt;
      &lt;fieldset&gt;
          &lt;legend&gt;Select one of this four menus&lt;/legend&gt;
          &lt;label &gt;Menu Option&lt;/label&gt;
              &lt;input type="radio"  name="selectedmenu" value="Menu1"
  onclick="calculateTotal()" /&gt;
          Menu 1 -  serves 8 courses ($20)
              &lt;input type="radio"  name="selectedmenu" value="Menu2"
  onclick="calculateTotal()" /&gt;
          Menu 2 - serves 12 courses ($25)
              &lt;input type="radio"  name="selectedmenu" value="Menu3"
  onclick="calculateTotal()" /&gt;
          Menu 3 - serves 16 courses ($35)
              &lt;input type="radio"  name="selectedmenu" value="Menu4"
  onclick="calculateTotal()" /&gt;
          Menu 4 - serves 30 courses ($75)
  
          &lt;label &gt;Filling&lt;/label&gt;
              &lt;select id="filling" name='filling'
  onchange="calculateTotal()"&gt;
                  &lt;option value="dish1"&gt;Dish 1 ($1)&lt;/option&gt;
                  &lt;option value="dish2"&gt;Dish 2 ($5)&lt;/option&gt;
                  &lt;option value="dish3"&gt;Dish 3 ($5)&lt;/option&gt;
                  (more...)
              &lt;/select&gt;
          &lt;br/&gt;
          &lt;div id="totalPrice"&gt;&lt;/div&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Then, for Javascript code I was trying with this to store and return some values but my problem is how to force to select an exact number of options in the SECOND STEP:</p>
  
  <pre><code>var menu_prices = new Array();
      menu_prices["Menu1"]=20;
      menu_prices["Menu2"]=25;
      menu_prices["Menu3"]=35;
      menu_prices["Menu4"]=75;
  
  function getMenuPrice()
  {
      var menuPrice=0;
      var theForm = document.forms["menuform"];
      var selectedMenu = theForm.elements["selectedmenu"];
      for(var i = 0; i &lt; selectedMenu.length; i++)
      {
          if(selectedMenu[i].checked)
          {
              menuPrice = menu_prices[selectedMenu[i].value];
              break;
          }
      }
      return menuPrice;
  }
  
  function getTotal()
  {
      var menuPrice = getMenuPrice() + getOtherOptionsPrices();
  
      document.getElementById('totalPrice').innerHTML =
                                        "Total Price For Menu $"+menuPrice;
  }
  </code></pre>