如何防止表格提交？

let ApprovePayment = document.getElementById('uploadReceiptButton')
if (ApprovePayment) {

  CancelConfirmation = document.getElementById('CancelSubmission')
  if (CancelConfirmation) {

    CancelConfirmation.addEventListener('click', function(event) {
      // Prevent the form submission            
      event.preventDefault();

    });

  }
  ApprovePayment.addEventListener('click', ApprovePaymentFunction);
}

function ApprovePaymentFunction(event) {

  event.preventDefault(); // prevent the link from opening immediately
  var receiptUploadForm = document.getElementById('receiptUploadForm')


  Swal.fire({
    title: 'Are you sure?',
    text: 'Confirm that the correct Receipt is sent to the Applicant',
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Yes!'
  }).then((result) => {

    // Remove the Cancel listener, so the form submits when "Yes" is clicked
    CancelConfirmation.removeEventListener('click');
    if (result.isConfirmed) {

      receiptUploadForm.submit();
    }
  });

}

<div class="row">

  <div class="modal fade" id="confirmationModal" aria-hidden="true" aria-labelledby="confirmationModalLabel" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="confirmationModalLabel">Are you sure?</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          Confirm the required amount is received for this service
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button class="btn btn-primary" data-bs-target="#fileUploadModal" data-bs-toggle="modal" data-bs-dismiss="modal">Yes</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="fileUploadModal" aria-hidden="true" aria-labelledby="fileUploadModalLabel" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <form method="POST" action="{% url 'approve-centre-renewal-payment' query.centre_renewal.id %}" id="receiptUploadForm" enctype="multipart/form-data">

          <div class="modal-header">
            <h5 class="modal-title" id="fileUploadModalLabel">Receipt</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>

          <div class="modal-body">

            {% csrf_token %}
            <div class="form-group">
              <label for="receipt">Upload receipt</label>
              <input type="file" id="receipt" name="receipt" class="form-control" accept="application/pdf" required>
            </div>

          </div>
          <div class="modal-footer">
            <button class="btn btn-secondary" data-bs-dismiss="modal" id="CancelSubmission">Cancel</button>
            <button class="btn btn-primary" id="uploadReceiptButton">Upload</button>
          </div>

        </form>

      </div>
    </div>
  </div>

</div>