提交同一表单时的多个addeventlistener

dy1byipe  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(301)

我的条带结账页面我在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;       
                });
            });

如果表单有效,则输入值将从 falsesuccess ```

现在,如果验证成功,我有2个 `addEventListener` 用于两种不同类型的付款。
用于卡支付(如果用户选择用卡支付)

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` 从第一步开始。。。运行条带逻辑
如果选择fpx付款且输入值为 `success` 从第一步开始。。。运行条带逻辑
有多个 `on submits` 对于相同的表单,是否会导致任何问题?即使我将条带合并为2而不是3,会不会给一些用户带来问题,有没有更好的方法?谢谢
ecbunoof

ecbunoof1#

为什么不合并它们-验证后处理?

$(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;
  });
});

相关问题