Question

我似乎无法获得要显示在带有图像的页面上的价格。显示正确的图像，并且正确的价格已传递给PayPal，但是我无法根据选择显示的价格来显示图像。

   
$(function() {
    $('.payment_form').change(function() {
        var filename = $('#dlist').val() + '-' + $('#os1').val() + '.png';
        console.log(filename);
        $('#imgToChange').prop('src', filename);
    });
});
</script>

<script language=javascript>

 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');
  const os3 = document.getElementById('os3');

  let price = parseFloat(getOption(os1, 'data-base-price'));

  if (os0.value == "2XL") {
    price = price + 1;
  } else if (os0.value == "3XL") {
    price = price + 2;
  } else if (os0.value == "4XL") {
    price = price + 3;
  } else if (os0.value == "5XL") {
    price = price + 4;
  }

  form.amount.value = price;
}

CalculateOrder()

function showTest(e) {
  e.preventDefault();
  const form = document.getElementById('payment_form');
  console.log('price: ' + form.amount.value)
}

<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>


<form target="_self" action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" id="payment_form" onchange="CalculateOrder()">
  <div align="center">
    <h2>Make selection below:<br />
      <br />
    </h2>
    <p>
      <input type="hidden" name="on0" value="Design"> 
      Design:&nbsp;&nbsp;
      <select name="os0" id="dlist" class="payment_form">
        <option value="Designer1">Designer1</option>
        <option value="Designer2">Designer2</option>
        <option value="Designer3">Designer3</option>
      </select>
      <br><br>
      <input type="hidden" name="on1" value="Style"> Style:&nbsp;&nbsp;
      <select name="os1" id="os1" class="payment_form">
        <option value="Tshirt" data-base-price="10">T-shirt</option>
        <option value="LSleeve" data-base-price="15">L Sleeve</option>
        <option value="Sweater" data-base-price="20">Sweater</option>
      </select>
      <br><br>
      <input type="hidden" name="on2" value="Size"> Size:&nbsp;&nbsp;
      <SELECT name="os2" 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>
        <OPTION value="4XL" data-item-number="W-T-4XL">4XL</OPTION>
        <OPTION value="5XL" data-item-number="W-T-5XL">5XL</OPTION>
      </SELECT>
      <br><br>
      <input type="hidden" name="on3" value="Color"> Color:&nbsp;&nbsp;
      <select name="os3">
        <option value="Gray">Gray</option>
        <option value="White">White</option>
      </select>
      
      <input type="hidden" name="add" value="1">
      <input type="hidden" name="cmd" value="_cart">
      <input type="hidden" name="business" value="abc.com">
      <input type="hidden" name="item_name" value="Shirts">
      <input type="hidden" name="amount">
      <input type="hidden" name="item_number">
      <input type="hidden" name="no_shipping" value="2">
      <input type="hidden" name="shipping">
      <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://example.com/store.html">
      <input type="hidden" name="return" value="http://www.example.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>
  </p>
    <p>      <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">
  </p>
  </div>
</FORM>

我似乎无法获得要显示在带有图像的页面上的价格。显示正确的图像，并且正确的价格已传递给PayPal，但是我无法根据选择显示的价格来显示图像。

Answer 1

价格存储在$（“ input [name ='amount']”））.val（）

您将函数CalculateOrder（）放在JQuery .change（）中。所以，当一个在改变选择，它计算新的价格。

然后将“ payment_form”类应用于要触发计算的所有

根据用户选择显示价格

2 个答案: