multiple addEventListener on submit for the same form

My stripe checkout page i have a section in the from for billing information using html (none stripe form)

when a user submits the form, this ajax is fired, to validate the billing information section (name, email etc)

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

if the form is valid, the input value is changed from false to success

<input type="text" name="stripe-isValid" id="stripe-isValid" value="success" />

now if the validation is successful, i have 2 addEventListener for 2 different types of payments.

for card payments (if user chooses to pay by card)

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;
                       ...
                       ...
                       ...
        }
    });

for FPX payments (if user chooses to pay using FPX)

$("#payment-form").on("submit", function(e) {
        if ($("#stripe-isValid").val() == "success" && $("#fpx-radio").is(":checked")) { 
            e.preventDefault();
                  ...
  }
});

so far, this logic flow works on my localhost.

validate form, return success on valid or false on invalid
if card payment selected and input value is success from step 1 … run stripe logic
if FPX payment selected and input value is success from step 1 … run stripe logic

Would having multiple on submits for the same form cause any issues? Even if i merge the stripe ones and have 2 instead of 3, would it would cause issues to some users, any better way to do this? Thanks

Answer

Why not combine them – processing after validation?

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

Advertisement

Answer