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: <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: <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: <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: <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: <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: <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: <!-- *************************** --> <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: <!-- *************************** --> <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">$ 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>