JavaScript progress bar won’t animate and submit

Question

How can I get both the progress bar to animate then have the form submit?

This script below will show the progress bar in the in the modal and after the file is uploaded the screen will refresh. However, it does not seem to execute the ajax animation for the progress bar.

If I comment out the “//<-this” lines and uncomment $('form').on('submit', function(event) { the progress bar will animate however the form never submits.

I found this post (jQuery - prevent default, then continue default) and was hopeful to use $(this).submit(); But this sends it into an infinite loop and never submits.

{% extends "_layout.html" %}
{% block main %}

<section class="upload_file">

  <div class="title">
      Upload File
  </div>

  <div class="apple_body">

    <div class="common_primary_div add_xml_div ">

      <label>Upload File</label>

      <form method="POST" action="" enctype="multipart/form-data" id="form_apple_upload">

          <div class="apple_file">
              <input type="file" name="apple_health_data" accept=".zip, .csv, .iso" class="form-control"  >
          </div>
          
          <div class="submit_element_right">
              <input type="submit" value="Add Apple Data" class="btn btn-secondary btn_custom01" onclick="update()">
          </div>
      </form>
    </div>
  </div>
</section>
        

        <!-- ADD DATA Modal -->
<div class="modal fade apple_add_data_modal" id="addDataModal" tabindex="-1" aria-labelledby="largeModal" aria-hidden="true">
    <div class="modal-dialog apple_add_modal_dialog" role="document">
      <div class="modal-content apple_add_modal_content">
        <div class="modal-header">
          <h4 class="modal-title" id="myModalLabel">Loading File</h4>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
        
          <p>Upload status bar</p>

          <div class="progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" 
                aria-valuemin="0" aria-valuemax="100" style="width: 75%;"
                id="progressBar">0</div>
          </div>

        <p>This message will disappear when the app has successfully </p>
        </div>
        <div class="modal-footer">

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


<script>
  function update() {
    $('#addDataModal').modal('show'); 
  }
</script>

<script>
  // $('form').on('submit', function(event) {
    var on_submit_function = function(event){//<-this
      event.preventDefault();

      var formData = new FormData($('form')[0]);

      $.ajax({
        xhr: function() {
          var xhr = new window.XMLHttpRequest();

          xhr.upload.addEventListener('progress', function(e) {
            if (e.lengthComputable) {
              var percent = Math.round(e.loaded /e.total * 100);
              $('#progressBar').attr('aria-valuenow', percent).css('width', percent + '%').text(percent +'%')
            }
          });
          return xhr;
        },
        type : 'POST',
        url : '/',
        data : formData,
        processData : false,
        contentType : false,
          });
      
      $(this).off('submit', on_submit_function);//<-this
      $(this).submit();//<-this
    };//<-this
    $('form').on('submit', on_submit_function); //<-this

  // });

</script>

{% endblock %}