javascript - 为同一表单提交多个 addEventListener
问题描述
我的条纹结帐页面我在 from 中有一个部分用于使用 html 的计费信息(无条纹形式)
当用户提交表单时,会触发此 ajax,以验证帐单信息部分(姓名、电子邮件等)
$(document).ready(function () {
var $form = $("#payment-form");
$form.on("submit", function (event, messages) {
event.preventDefault();
$.ajax({
"type":"POST",
"url":$form.attr('action'),
"data":$form.serialize(),
"beforeSend":function( xhr ) {
$('#stripe-isValid').val('false');
},
"dataType":"json",
"success":function(data){
if(data !== 'undefined' && data.validate == 'success') {
$('#stripe-isValid').val(data.validate);
}
},
});
return false;
});
});
如果表单有效,则输入值从 更改false
为success
<input type="text" name="stripe-isValid" id="stripe-isValid" value="success" />
现在如果验证成功,我有 2addEventListener
种不同类型的付款。
用于卡支付(如果用户选择用卡支付)
const cardElement = elements.create('card', { hidePostalCode: true, style: style });
cardElement.mount('#card-element');
//check if card is valid
cardElement.on('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
Swal.fire({
title: "Error!",
text: event.error.message,
type: "error"
});
} else {
displayError.textContent = '';
}
});
const paymentForm = document.querySelector('#payment-form');
paymentForm.addEventListener('submit', function(e) {
if (document.getElementById('stripe-isValid').value == 'success' && document.getElementById('card-radio').checked) {
e.preventDefault();
stripe.confirmCardPayment(
paymentIntent, {
payment_method: {
card: cardElement,
},
},
).then(function(result) {
if (result.error) {
// Display error.message in your UI.
Swal.fire({
title: "Error!",
text: result.error.message,
type: "error"
});
return false;
...
...
...
}
});
对于 FPX 付款(如果用户选择使用 FPX 付款)
$("#payment-form").on("submit", function(e) {
if ($("#stripe-isValid").val() == "success" && $("#fpx-radio").is(":checked")) {
e.preventDefault();
...
}
});
到目前为止,这个逻辑流程适用于我的本地主机。
- 验证表单,返回
success
有效或false
无效 - 如果选择了卡付款并且输入值
success
来自步骤 1 ...运行条带逻辑 - 如果选择了 FPX 付款并且输入值
success
来自步骤 1 ...运行条带逻辑
on submits
同一表格有多个会导致任何问题吗?即使我合并条带并有 2 个而不是 3 个,它会不会给某些用户带来问题,有更好的方法吗?谢谢
解决方案
为什么不将它们结合起来 - 验证后处理?
$(document).ready(function() {
var $form = $("#payment-form");
$form.on("submit", function(event, messages) {
event.preventDefault();
$.ajax({
"type": "POST",
"url": $form.attr('action'),
"data": $form.serialize(),
"beforeSend": function(xhr) {
$('#stripe-isValid').val('false');
},
"dataType": "json",
"success": function(data) {
if (data !== 'undefined' && data.validate == 'success') {
$('#stripe-isValid').val(data.validate);
}
if ($("#stripe-isValid").val() == "success" && $("#card-radio").is(":checked")) {
// process card
} else if ($("#stripe-isValid").val() == "success" && $("#fpx-radio").is(":checked")) {
// process fpx
} else {
// ?
}
},
});
return false;
});
});
推荐阅读
- php - CSV 数组更改的动画
- angular - 为什么我不能从 typescript 类的实例成员函数或方法中获取值?
- definition - Vulkan 术语中的“演示引擎”到底是什么?
- c++ - 访问启动线程的 Winform 控件
- python - 如何使用 smtplib 输入电子邮件地址
- python - 无法创建 Pandas 数据框
- python - Python DEAP 库,使用随机词作为个体
- android - 如何在 Android MVVM ViewModel 中获取上下文
- java - 如何导入 javax.annotation.Nullable?
- javascript - nil:NilClass 的未定义方法“公司”