Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML form - value depends on two different drop-down menus
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload