javascript - 根据用户选择显示价格
问题描述
我似乎无法在带有图像的页面上显示价格。显示正确的图像并将正确的价格传递给 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:
<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>
我似乎无法在带有图像的页面上显示价格。显示正确的图像并将正确的价格传递给 PayPal,但我无法根据与图像一起显示的选择来获取价格。
解决方案
价格存储在 $("input[name='amount']" ).val()
您将函数CalculateOrder() 放在JQuery .change() 中。因此,当一个选择发生变化时,它会计算新的价格。
并且您将类“payment_form”应用于您想要触发计算的所有<select>。
国王问候。
_泰迪熊_
$(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>
推荐阅读
- android - Embarcadero RAD Delphi 10.3.3,无法使用适用于 64 位 Android 的 Box2D 库编译我的应用程序
- android-studio - 我在颤振中遇到错误,即在 null 上调用了方法“+”
- python - 如何压缩两个序列(一个由 N 个元素移动)?
- flutter - 如何将另一个图标的图标中心放在颤动中
- laravel - Laravel 为 Web 和 API 控制器分离文件夹导致错误
- mysql - JPA Hibernate 多对多 NestedServletException 问题
- http - 当 HTTP 标头和元标记中都存在 Content-Security-Policy 时的问题
- node.js - Node.js 中是否有支持 `addEventListener()` 的工作人员?
- html - 如何编辑 ul li 字体大小和样式?
- python-3.x - 用于将 *args 转换为字符串的 Python 打印函数