为同一表单提交多个 addEventListener

Posted 2023-03-21

【中文标题】为同一表单提交多个 addEventListener

【英文标题】：multiple addEventListener on submit for the same form

【发布时间】：2021-10-01 07:42:09

【问题描述】：

我的条纹结帐页面中有一个部分用于使用 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" />

现在，如果验证成功，我有 2 个addEventListener 用于 2 种不同类型的付款。

卡支付（如果用户选择用卡支付）

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 如果选择了卡支付并且输入值是来自步骤 1 的 success ... 运行条带逻辑 如果选择了 FPX 支付并且输入值是来自步骤 1 的 success ... 运行条带逻辑

对于同一个表单有多个on submits 会导致任何问题吗？即使我合并条带并有 2 个而不是 3 个，它会不会给某些用户带来问题，有更好的方法吗？谢谢

【参考方案1】：

为什么不将它们结合起来 - 验证后处理？

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

【讨论】：

更新问题，当我这样做时。每次用户输入信用卡号码时，Swal.fire(); 就会被触发

为什么？除非用户选择了条带并且您已经验证并准备好处理，否则它不应该运行，对吧？