Skip to content
Advertisement

Display price based on User selection

I can’t seem to get the price to display on the page with image. The correct image displays and the correct price is passed to PayPal, but I can’t get price based on the selection to display with the image.

   
$(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>

I can not seem to get the price to display on the page with image. The correct image displays and the correct price is passed to PayPal, but I can’t get price based on the selection to display with the image.

Advertisement

Answer

The price is stored in $(“input[name=’amount’]” ).val()

You put the function CalculateOrder() in the JQuery .change(). So, when a select in changing, it calculate the new price.

And you apply the class “payment_form” to all the < select > you want that trigger the calculation.

King regards.

_Teddy_

$(function() {
    $('.payment_form').change(function() {
// ***************************
CalculateOrder()
// ***************************
        var filename = $('#dlist').val() + '-' + $('#os1').val() + '.png';
        console.log(filename);
        $('#imgToChange').prop('src', filename);
// ***************************
$('#priceP').html('Price : $ '+$("input[name='amount']" ).val());
// ***************************

    });
});
</script>

<script language=javascript>


function swapImage(){
   var image = document.getElementById("imageToSwap");
   var dropd = document.getElementById("dlist");
   image.src = dropd.value;   
};

 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" class="payment_form">
<!-- *************************** -->
<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" class="payment_form">
<!-- *************************** -->
        <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 id="priceP">$&nbsp;10</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>
User contributions licensed under: CC BY-SA
4 People found this is helpful
Advertisement