表单提交时减去金额JavaScript / JQuery

Question

我有一个结帐页面，我想在其中实现一个新功能:从购物车总价值中减去一定的金额，在输入中引入。

购物车中有1件商品，价值10.00美元。如果用户在该输入中输入100，那么他将获得1美元的折扣(在本例中为100点= 1美元)，而购物车的最终价值将为9.00美元。因为我使用一些集成的应用程序来获取/计算项目价值，购物车总价值等。我想得到一些通用代码，我最终会调整，链接到我现有的代码，函数等。

我的函数应该有这些特征:

• 创建表单
• 获取输入值
• 从用户总数中减去使用点数(例如totalPts = 1000)
• 从购物车总价值中减去使用点数，转换成$ (100pts = 1$)

现在，我的函数看起来像这样:

function appendRefferalPoints() {
const totalPts = 1000;
// creating form - ok
$form = $('<form id="refForm" class="coupon-form" action></form>');
$form.append(
'<input type="text" id="refValue" name="refInput" class="coupon-value input-small" >'
);
$form.append('<button type="submit" class="btn">Aplica</button>');
$("body").append($form);
// get input value - not ok
$("#refForm").submit(function () {
let value = 0;
$.each($("#refForm").serializeArray(), function (i, field) {
value[field.name] = field.value;
});
});
// subtraction from totalPts logic - not ok
let rez = totalPts - value;
console.log("Final Rez: " + rez);

// subtraction converted pts from cart value logic

} 

现在当我提交表单时，我只有url从/checkout#/cart更改为/checkout/?refInput=512#/cart

Answer 1

function appendRefferalPoints() {
const totalPts = 1000;
let cartValue=10;
let discount=0;
let inputValue = 0;   
// creating form - ok
$form = $('<form id="refForm" class="refForm coupon-form" ></form>');
$form.append(
'<input type="text" id="refValue" name="refInput" class="coupon-value input-small"  value="100" >'
);
$form.append('<button id="btnClick" class="btn">Aplica</button>');
$("body").append($form);
$(document).on("submit", "#refForm", function(e){  
//getting input value while submitting form
inputValue=$("#refValue").val();
//converting 100 pts to 1 dallor
discount=inputValue/100;
//calculating balance pts
let balancePts = totalPts - parseInt(inputValue);
//calculating final amount
let finalCartValue=cartValue-discount;
alert("finalCartValue"+finalCartValue);
});
}
appendRefferalPoints();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>