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.
JavaScript
x
50
50
1
2
$(function() {3
$('.payment_form').change(function() {4
var filename = $('#dlist').val() + '-' + $('#os1').val() + '.png';5
console.log(filename);6
$('#imgToChange').prop('src', filename);7
});8
});9
</script>10
11
<script language=javascript>12
13
function getOption(select, dataAttr) {14
const option = select.options[select.selectedIndex];15
if (option) {16
return option.getAttribute(dataAttr);17
}18
return '';19
}20
21
function CalculateOrder() {22
const form = document.getElementById('payment_form');23
const os0 = document.getElementById('os0');24
const os1 = document.getElementById('os1');25
const os2 = document.getElementById('os2');26
const os3 = document.getElementById('os3');27
28
let price = parseFloat(getOption(os1, 'data-base-price'));29
30
if (os0.value == "2XL") {31
price = price + 1;32
} else if (os0.value == "3XL") {33
price = price + 2;34
} else if (os0.value == "4XL") {35
price = price + 3;36
} else if (os0.value == "5XL") {37
price = price + 4;38
}39
40
form.amount.value = price;41
}42
43
CalculateOrder()44
45
function showTest(e) {46
e.preventDefault();47
const form = document.getElementById('payment_form');48
console.log('price: ' + form.amount.value)49
}50
JavaScript
1
64
64
1
<script src="https://code.jquery.com/jquery-3.5.1.min.js"2
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>3
4
5
<form target="_self" action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" id="payment_form" onchange="CalculateOrder()">6
<div align="center">7
<h2>Make selection below:<br />8
<br />9
</h2>10
<p>11
<input type="hidden" name="on0" value="Design"> 12
Design: 13
<select name="os0" id="dlist" class="payment_form">14
<option value="Designer1">Designer1</option>15
<option value="Designer2">Designer2</option>16
<option value="Designer3">Designer3</option>17
</select>18
<br><br>19
<input type="hidden" name="on1" value="Style"> Style: 20
<select name="os1" id="os1" class="payment_form">21
<option value="Tshirt" data-base-price="10">T-shirt</option>22
<option value="LSleeve" data-base-price="15">L Sleeve</option>23
<option value="Sweater" data-base-price="20">Sweater</option>24
</select>25
<br><br>26
<input type="hidden" name="on2" value="Size"> Size: 27
<SELECT name="os2" id="os0">28
<OPTION value="S" data-item-number="Small">S</OPTION>29
<OPTION value="M" data-item-number="W-T-Medium">M</OPTION>30
<OPTION value="LG" data-item-number="W-T-LG">LG</OPTION>31
<OPTION value="XL" data-item-number="W-T-XL">XL</OPTION>32
<OPTION value="2XL" data-item-number="W-T-2XL">2XL</OPTION>33
<OPTION value="3XL" data-item-number="W-T-3XL">3XL</OPTION>34
<OPTION value="4XL" data-item-number="W-T-4XL">4XL</OPTION>35
<OPTION value="5XL" data-item-number="W-T-5XL">5XL</OPTION>36
</SELECT>37
<br><br>38
<input type="hidden" name="on3" value="Color"> Color: 39
<select name="os3">40
<option value="Gray">Gray</option>41
<option value="White">White</option>42
</select>43
44
<input type="hidden" name="add" value="1">45
<input type="hidden" name="cmd" value="_cart">46
<input type="hidden" name="business" value="abc.com">47
<input type="hidden" name="item_name" value="Shirts">48
<input type="hidden" name="amount">49
<input type="hidden" name="item_number">50
<input type="hidden" name="no_shipping" value="2">51
<input type="hidden" name="shipping">52
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">53
<input type="hidden" name="shopping_url" value="http://example.com/store.html">54
<input type="hidden" name="return" value="http://www.example.com/">55
<input type="hidden" name="currency_code" value="USD">56
<input type="hidden" name="lc" value="US">57
<input type="hidden" name="bn" value="PP-ShopCartBF">58
59
</p>60
</p>61
<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">62
</p>63
</div>64
</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_
JavaScript
1
62
62
1
$(function() {2
$('.payment_form').change(function() {3
// ***************************4
CalculateOrder()5
// ***************************6
var filename = $('#dlist').val() + '-' + $('#os1').val() + '.png';7
console.log(filename);8
$('#imgToChange').prop('src', filename);9
// ***************************10
$('#priceP').html('Price : $ '+$("input[name='amount']" ).val());11
// ***************************12
13
});14
});15
</script>16
17
<script language=javascript>18
19
20
function swapImage(){21
var image = document.getElementById("imageToSwap");22
var dropd = document.getElementById("dlist");23
image.src = dropd.value; 24
};25
26
function getOption(select, dataAttr) {27
const option = select.options[select.selectedIndex];28
if (option) {29
return option.getAttribute(dataAttr);30
}31
return '';32
}33
34
function CalculateOrder() {35
const form = document.getElementById('payment_form');36
const os0 = document.getElementById('os0');37
const os1 = document.getElementById('os1');38
const os2 = document.getElementById('os2');39
const os3 = document.getElementById('os3');40
41
let price = parseFloat(getOption(os1, 'data-base-price'));42
43
if (os0.value == "2XL") {44
price = price + 1;45
} else if (os0.value == "3XL") {46
price = price + 2;47
} else if (os0.value == "4XL") {48
price = price + 3;49
} else if (os0.value == "5XL") {50
price = price + 4;51
}52
53
form.amount.value = price;54
}55
56
CalculateOrder()57
58
function showTest(e) {59
e.preventDefault();60
const form = document.getElementById('payment_form');61
console.log('price: ' + form.amount.value)62
}JavaScript
1
71
71
1
<script src="https://code.jquery.com/jquery-3.5.1.min.js"2
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>3
4
5
<form target="_self" action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" id="payment_form" onchange="CalculateOrder()">6
<div align="center">7
<h2>Make selection below:<br />8
<br />9
</h2>10
<p>11
<input type="hidden" name="on0" value="Design"> 12
Design: 13
<select name="os0" id="dlist" class="payment_form">14
<option value="Designer1">Designer1</option>15
<option value="Designer2">Designer2</option>16
<option value="Designer3">Designer3</option>17
</select>18
<br><br>19
<input type="hidden" name="on1" value="Style"> Style: 20
<select name="os1" id="os1" class="payment_form">21
<option value="Tshirt" data-base-price="10">T-shirt</option>22
<option value="LSleeve" data-base-price="15">L Sleeve</option>23
<option value="Sweater" data-base-price="20">Sweater</option>24
</select>25
<br><br>26
<input type="hidden" name="on2" value="Size"> Size: 27
<!-- *************************** -->28
<SELECT name="os2" id="os0" class="payment_form">29
<!-- *************************** -->30
<OPTION value="S" data-item-number="Small">S</OPTION>31
<OPTION value="M" data-item-number="W-T-Medium">M</OPTION>32
<OPTION value="LG" data-item-number="W-T-LG">LG</OPTION>33
<OPTION value="XL" data-item-number="W-T-XL">XL</OPTION>34
<OPTION value="2XL" data-item-number="W-T-2XL">2XL</OPTION>35
<OPTION value="3XL" data-item-number="W-T-3XL">3XL</OPTION>36
<OPTION value="4XL" data-item-number="W-T-4XL">4XL</OPTION>37
<OPTION value="5XL" data-item-number="W-T-5XL">5XL</OPTION>38
</SELECT>39
<br><br>40
<input type="hidden" name="on3" value="Color"> Color: 41
<!-- *************************** -->42
<select name="os3" class="payment_form">43
<!-- *************************** -->44
<option value="Gray">Gray</option>45
<option value="White">White</option>46
</select>47
48
<input type="hidden" name="add" value="1">49
<input type="hidden" name="cmd" value="_cart">50
<input type="hidden" name="business" value="abc.com">51
<input type="hidden" name="item_name" value="Shirts">52
<input type="hidden" name="amount">53
<input type="hidden" name="item_number">54
<input type="hidden" name="no_shipping" value="2">55
<input type="hidden" name="shipping">56
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">57
<input type="hidden" name="shopping_url" value="http://example.com/store.html">58
<input type="hidden" name="return" value="http://www.example.com/">59
<input type="hidden" name="currency_code" value="USD">60
<input type="hidden" name="lc" value="US">61
<input type="hidden" name="bn" value="PP-ShopCartBF">62
63
</p>64
</p>65
<!-- *************************** -->66
<p id="priceP">$ 10</p>67
<!-- *************************** -->68
<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">69
</p>70
</div>71
</FORM>