title: HTML form - value depends on two different drop-down menus
body: <p>Hello javascript experts!</p>
  
  <p>I'm a novice here, trying to create a script to add up membership fees on a website (I'm a volunteer). Any help is greatly appreciated.</p>
  
  <p>I used this website: <a href="http://www.javascript-coder.com/javascript-form/javascript-calculator-script.phtml" rel="nofollow">http://www.javascript-coder.com/javascript-form/javascript-calculator-script.phtml</a> to set up my html.</p>
  
  <p>It worked just fine  (I set up 3 functions, one to calculate the membership price, another for the postage and the other the total amount due - I have not included them below but know they work fine).</p>
  
  <p>UNTIL I realized that the value of postage (which I had calculated only using the first drop-down menu: id=country) was also dependant on the amount in the second drop down menu (the second drop-down menu's id: membership_type). That is to say, the postage is not only determined by country but also by membership type. I tried to set up a script that would vary the value of the postage depending on the value of the membership type but it isn't working.</p>
  
  <p>I'm not a coder as you can tell so I've spent a lot of time looking for the correct way to do this but have come to a deadend....</p>
  
  <hr>
  
  <pre><code>    var membership_prices = new Array();
      membership_prices["regular"]=40;
      membership_prices["student"]=24;
      membership_prices["emeritus"]=24;
      membership_prices["regularplus"]=62;
      membership_prices["studentplus"]=46;
      membership_prices["emeritusplus"]=46;
  
      var extra_postage_cost = new Array();
      extra_postage_cost["USA"]=0;
      extra_postage_cost["Canada"]=0;
  
      &lt;!-- this is the part that needs work: Edited since original post --&gt;
         extra_postage_cost["Other_Country"]
     if (document.getElementById('membership_type').value =="regular")
         extra_postage_cost["Other_Country"]=8;
     else if (document.getElementById('membership_type').value =="student")
         extra_postage_cost["Other_Country"]=8;
     else if (document.getElementById('membership_type').value =="emeritus")
         extra_postage_cost["Other_Country"]=8; 
     else if (document.getElementById('membership_type').value =="regularplus")
         extra_postage_cost["Other_Country"]=16;
     else if (document.getElementById('membership_type').value =="studentplus")
         extra_postage_cost["Other_Country"]=16;
     else if (document.getElementById('membership_type').value =="emeritusplus")
         extra_postage_cost["Other_Country"]=16;
     else 
         extra_postage_cost["Other_Country"]=0;
     &lt;!-- end of what I believe needs work --&gt;
  </code></pre>
  
  <p>Here is the rest of the code:</p>
  
  <pre><code>    function getMembershipPrice ()
          {
          var membershipPrice=0;
          var theForm = document.forms["membershipform"];
          var selectedMembership = theForm.elements["membership_type"];
          membershipPrice = membership_prices[selectedMembership.value];
          return membershipPrice;
          }
  
      function getExtraPostagePrice ()
          {
          var extraPostagePrice = 0;
          var theForm = document.forms["membershipform"];
          var selectedPostage = theForm.elements["country"];
          extraPostagePrice = extra_postage_cost[selectedPostage.value];
          return extraPostagePrice;
          }
  
      function getAmountDue()
          {
          var amountDue = getMembershipPrice() + getExtraPostagePrice();
          document.getElementById('amountDue').innerHTML ="Amount Due $"+amountDue;
          }
  </code></pre>
  
  <p>In the drop-down menus themselves I have this kind of code inside the brackets for each drop-down menu:</p>
  
  <pre><code>   select name="membership_type" id="membership_type" onchange="getAmountDue()"
     select name="country" id="country" onchange="getAmountDue()"     
  </code></pre>