Javascript计算购物车总数

Question

我目前有代码供用户选择衬衫尺寸、设计、款式和颜色。我试图让它根据用户选择来计算价格。如果尺寸为 s,m,lg,xl，价格为 10 美元，但如果他们选择 2x、3x，则价格现在分别为 11 美元、12 美元。 T 恤的底价是 10 美元，但如果用户选择长袖，那么底价现在是 15 美元。因此，尺寸 2x 和 3x 变为 16 美元、17 美元。

如果订单的尺寸从小到 XL，我还需要收取 5 美元的固定运费，但如果 8.00 美元的订单包含尺寸为 2xl 或 3xl 的衬衫，则收费。

我希望这是有道理的。非常感谢您对编辑 javascript 的任何帮助。

<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

我会试着清理一下你的代码。

我的更改和注释：

• 在表单中添加了ID（payment_form），所以我们可以用document.getElementById搜索它
• 您的代码正在检查form.os2.value == "Store Pick-Up"，但os2 选择器中没有这样的值，看看：<option value="Pick Up" selected>（看到了吗？它有不同的值）
• 你检查shipping的块对所有if's都是一样的，所以我会把tit放在最后
• 我不会将表单传递给函数，而是在内部搜索它：const form = document.getElementById('payment_form');
• amount 不是正确的价格名称，因为amount 是您需要多少此商品，不是价格，但这只是一个说明。暂时不重要
• 为选择添加了 ID，注意：ID 必须是唯一的
• 现在所有值都更新，如果任何选择更新为：onchange="CalculateOrder()"
• 我添加了新函数getOption 来获取在data-* 属性中的option 元素内设置的值
• 我已将按钮上的功能更改为onclick="showTest(event)" - 这只是为了测试。在您的真实代码中，您不需要任何onclick。

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="W-T-Medium">M</OPTION>
        <OPTION value="LG" data-item-number="W-T-LG">LG</OPTION>
        <OPTION value="XL" data-item-number="W-T-XL">XL</OPTION>
        <OPTION value="2XL" data-item-number="W-T-2XL">2XL</OPTION>
        <OPTION value="3XL" data-item-number="W-T-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>

如果您需要更多解释，尽管问。

附：您可以通过单击“运行代码 sn-p”来测试代码，然后在 selects 中选择值并按下按钮。