Javascript 计算购物车总数

Question

I currently have code for user to select shirt size, design, style and color. I am trying to get it to compute price based on user selection. If size is s,m,lg,xl the price is $10 but if they select 2x, 3x, the price is now $11, $12 respectively. The base price is for a t-shirt $10, but if the user selects long sleeve, then the base price is now $15. So then sizes 2x and 3x becomes $16, $17.

I also need be able to charge a flat shipping of $5 if order is have sizes from small to XL but charge if $8.00 order contains shirt with size 2xl or 3xl.

I hope this make sense. Any help editing the javascript is greatly appreciated.

<SCRIPT language=javascript>
function CalculateOrder(form)
{

if (form.os0.value == "S")
 {
 form.amount.value = 10.00;
 form.item_number.value = "Small";
 if (form.os2.value == "Store Pick-Up"){
 form.shipping.value = "0.00";
 }
 if (form.os2.value == "USPS Priority Mail"){
 form.shipping.value = "8.00";
 }
 }
 
if (form.os0.value == "M")
 {
 form.amount.value = 10.00;
 form.item_number.value = "W-T-Medium";
 if (form.os2.value == "Store Pick-Up"){
 form.shipping.value = "0.00";
 }
 if (form.os2.value == "USPS Priority Mail"){
 form.shipping.value = "8.00";
 }
 }

if (form.os0.value == "LG")
 {
 form.amount.value = 10.00;
 form.item_number.value = "W-T-LG";
 if (form.os2.value == "Store Pick-Up"){
 form.shipping.value = "0.00";
 }
 if (form.os2.value == "USPS Priority Mail"){
 form.shipping.value = "8.00";
 }
 }

if (form.os0.value == "XL")
 {
 form.amount.value = 10.00;
 form.item_number.value = "W-T-XL";
 if (form.os2.value == "Store Pick-Up"){
 form.shipping.value = "0.00";
 }
 if (form.os2.value == "USPS Priority Mail"){
 form.shipping.value = "8.00";
 }
 }
 
if (form.os0.value == "2XL")
 {
 form.amount.value = 11.00;
 form.item_number.value = "W-T-2XL";
 if (form.os2.value == "Store Pick-Up"){
 form.shipping.value = "0.00";
 }
 if (form.os2.value == "USPS Priority Mail"){
 form.shipping.value = "8.00";
 }
 }
 
if (form.os0.value == "3XL")
 {
 form.amount.value = 12.00;
 form.item_number.value = "W-T-3XL";
 if (form.os2.value == "Store Pick-Up"){
 form.shipping.value = "0.00";
 }
 if (form.os2.value == "USPS Priority Mail"){
 form.shipping.value = "8.00";
 }
 }
 
}  
</SCRIPT>

<form target="_self" action="https://www.paypal.com/cgi-bin/webscr" method="post">
             <div align="center">
                <p>
                  <input type="hidden" name="on0" value="Design">
                  Design:&nbsp;&nbsp;
                  <select name="os1">
                    <option value="Design1">Design1</option>
                    <option value="Design2">Design2</option>
                    <option value="Design3">Design3</option>
                    
                  </select>
                  <br><br>
                  <input type="hidden" name="on1" value="Style">
                  Style:&nbsp;&nbsp;
                  <select name="os1">
                    <option value="T-shirt">T-shirt</option>
                    <option value="Long Sleeve">Long Sleeve</option>
                    
                  </select>
                  <br><br>
                  <input type="hidden" name="on2" value="Size">
                  Size:&nbsp;&nbsp;
                  <SELECT name="os0">
                    <OPTION value="S">S</OPTION>
                    <OPTION value="M">M</OPTION>
                    <OPTION value="LG">LG</OPTION>
                    <OPTION value="XL">XL</OPTION>
                    <OPTION value="2XL">2XL</OPTION>
                    <OPTION value="3XL">3XL</OPTION>            
                                        
                  </SELECT>
                  <br><br>
                  <input type="hidden" name="on3" value="Color">
                  Color:&nbsp;&nbsp;
                  <select name="os1">
                    <option value="Black">Black</option>
                    <option value="White">White</option>                    
                  </select>
                  
                  <br>Select Delivery Method:&nbsp;&nbsp;
               <input type="hidden" name="on2" value="Delivery Method">
               <select name="os2">
               <option value="Pick Up" selected>Pick Up</option>
               <option value="USPS Priority Mail">USPS Priority Mail</option>
               </select>

                  <input type="hidden" name="add" value="1">
                  <input type="hidden" name="cmd" value="_cart">
                  <input type="hidden" name="business" value="test@gmail.com">
                  <input type="hidden" name="item_name" value="Widget - T-Shirt">
                  <input type="hidden" name="amount">
                  <input type="hidden" name="item_number">
                  <input type="hidden" name="no_shipping" value="2">
              <input type="hidden" name="shipping">
                  <input type="hidden" name="shipping2">
                  <INPUT onclick=CalculateOrder(this.form) type=image alt="Make payments with PayPal - it's fast, free and secure!" 
                 src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border=0 name="submit">
                  <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
                  <input type="hidden" name="shopping_url" value="http://abc123.com/store.html">
                  <input type="hidden" name="return" value="http://www.abc123.com/">
                  <input type="hidden" name="currency_code" value="USD">
                  <input type="hidden" name="lc" value="US">
                  <input type="hidden" name="bn" value="PP-ShopCartBF">
                </p>
              </div>
</FORM>

Answer 1

I'll try to clean up your code a little.

My changes and notes:

• added ID to form ( payment_form ), so we can search for it with document.getElementById
• you code is checking for form.os2.value == "Store Pick-Up" , but no such value in os2 selector, take a look: <option value="Pick Up" selected> (see? it has different value)
• your block of checking shipping is the same for all if's , so I will pu tit in the end
• I will not pass a form to function, but search for it inside with: const form = document.getElementById('payment_form');
• amount is not correct name for prices, because amount is how many of this items do you need, it is not the price, but this is just a note. not important for now
• added IDs for selects, note: ID must be unique
• now all values updated if any select is updated with: onchange="CalculateOrder()"
• I've added new function getOption to get values that are set inside the option elements in data-* attributes
• I've changed function on the button to be onclick="showTest(event)" - this is just for testing. In you real code you do not need any onclick here.

 function getOption(select, dataAttr) { const option = select.options[select.selectedIndex]; if (option) { return option.getAttribute(dataAttr); } return ''; } function CalculateOrder() { const form = document.getElementById('payment_form'); const os0 = document.getElementById('os0'); const os1 = document.getElementById('os1'); const os2 = document.getElementById('os2'); let price = parseFloat(getOption(os1, 'data-base-price')); let item_number = getOption(os0, 'data-item-number'); let shipping = getOption(os2, 'data-price'); if (os0.value == "2XL") { price = price + 1; } else if (os0.value == "3XL") { price = price + 2; } if (os1.value == "Long Sleeve") { shipping = 8; } form.shipping.value = shipping; form.item_number.value = item_number; form.amount.value = price; } CalculateOrder() function showTest(e) { e.preventDefault(); const form = document.getElementById('payment_form'); console.log('item number: ' + form.item_number.value, 'price: ' + form.amount.value, 'shipping: ' + form.shipping.value) }

 <form target="_self" action="https://www.paypal.com/cgi-bin/webscr" method="post" id="payment_form" onchange="CalculateOrder()"> <div align="center"> <p> <input type="hidden" name="on0" value="Design"> Design:&nbsp;&nbsp; <select name="os1"> <option value="Design1">Design1</option> <option value="Design2">Design2</option> <option value="Design3">Design3</option> </select> <br><br> <input type="hidden" name="on1" value="Style"> Style:&nbsp;&nbsp; <select name="os1" id="os1"> <option value="T-shirt" data-base-price="10">T-shirt</option> <option value="Long Sleeve" data-base-price="15">Long Sleeve</option> </select> <br><br> <input type="hidden" name="on2" value="Size"> Size:&nbsp;&nbsp; <SELECT name="os0" id="os0"> <OPTION value="S" data-item-number="Small">S</OPTION> <OPTION value="M" data-item-number="WT-Medium">M</OPTION> <OPTION value="LG" data-item-number="WT-LG">LG</OPTION> <OPTION value="XL" data-item-number="WT-XL">XL</OPTION> <OPTION value="2XL" data-item-number="WT-2XL">2XL</OPTION> <OPTION value="3XL" data-item-number="WT-3XL">3XL</OPTION> </SELECT> <br><br> <input type="hidden" name="on3" value="Color"> Color:&nbsp;&nbsp; <select name="os1"> <option value="Black">Black</option> <option value="White">White</option> </select> <br>Select Delivery Method:&nbsp;&nbsp; <input type="hidden" name="on2" value="Delivery Method"> <select name="os2" id="os2"> <option value="Pick Up" selected data-price="0">Pick Up</option> <option value="USPS Priority Mail" data-price="5">USPS Priority Mail</option> </select> <input type="hidden" name="add" value="1"> <input type="hidden" name="cmd" value="_cart"> <input type="hidden" name="business" value="test@gmail.com"> <input type="hidden" name="item_name" value="Widget - T-Shirt"> <input type="hidden" name="amount"> <input type="hidden" name="item_number"> <input type="hidden" name="no_shipping" value="2"> <input type="hidden" name="shipping"> <input type="hidden" name="shipping2"> <INPUT onclick="showTest(event)" type=image alt="Make payments with PayPal - it's fast, free and secure:" src="https.//www.paypalobjects.com/en_US/i/btn/btn_cart_LG:gif" border=0 name="submit"> <img alt="" border="0" src="https.//www.paypalobjects.com/en_US/i/scr/pixel:gif" width="1" height="1"> <input type="hidden" name="shopping_url" value="http.//abc123.com/store:html"> <input type="hidden" name="return" value="http.//www.abc123.com/"> <input type="hidden" name="currency_code" value="USD"> <input type="hidden" name="lc" value="US"> <input type="hidden" name="bn" value="PP-ShopCartBF"> </p> </div> </FORM>

If you need more explanation, just ask.

PS You can test code by clicking "Run code snippet", then select values in selects and press a button.