Question

Hello javascript experts!

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.

I used this website: http://www.javascript-coder.com/javascript-form/javascript-calculator-script.phtml to set up my html.

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).

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.

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….

---

    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;

    <!-- this is the part that needs work: Edited since original post -->
       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;
   <!-- end of what I believe needs work -->

Here is the rest of the 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;
        }

In the drop-down menus themselves I have this kind of code inside the brackets for each drop-down menu:

   select name="membership_type" id="membership_type" onchange="getAmountDue()"
   select name="country" id="country" onchange="getAmountDue()"     

Answer 1

I assume the country drop down is defaulted to USA. If this is the case, simply add an “onchange” event listener to the dropdowns that call a function to update the extra charge.

So instead of having an array object for extra postage, just have a variable extraPostage initially set to zero and update it when the drop downs change.

    var extraPostage = 0;

    function onSelectChange(){
      var countrySelect = document.getElementById('countrySelect'); 
      var typeSelect = document.getElementById('membership_type');
      if(countrySelect.value != "Other Country"){
        extraPostage = 0;
        return;
      }
      else{
        var type = typeSelect.value;
        switch(type){
          case "regular":
            extraPostage = 8;
            break;
          case "student":
            extraPostage = 8;
            break;
          case "emeritus":
            extragPostage = 8;
            break;
          //keep going for each different possibility
        }

    }