AjaxSubmit submits form twice (or three times or 20 times)

Question

I'm new here and new to JS :-) I'm using AJAX SUBMIT (jquery) to send files to my CDN. the first time - everything is ok, the file is sent and received. second time: the file is sent and received, only it does that twice. and the third time its three times etc... that's the console of the second time: https://prnt.sc/tluygu as you can see, it submits twice. That's the code of the submission: (it's in a modal)

$(document).on('click', '.add-video-btn', function() {

  $('#file').val('');
  $('#file-upload').trigger('reset');

  $('#video-uploading-modal').modal({
    backdrop: 'static',
    keyboard: false
  });

  $('#upload-btn').on('click', async function() {

    var vidRes = await getOneTimeUploadUrl();
    console.log(vidRes.result.uploadURL);
    var oneTimeUrl = vidRes.result.uploadURL;
    $('#file-upload').ajaxSubmit({
      url: oneTimeUrl,
      beforeSubmit: function(formData, formObject, formOptions) {
        console.log(formData);
        $('.progress').slideDown();
      },
      beforeSend: function() {},
      uploadProgress: function(event, position, total, precentComplete) {
        $('.progress-bar').css('width', precentComplete + '%');
        $('.progress-bar').html('%' + precentComplete);

      },
      success: function(response) {
        console.log(response);
        alert('success');

      },
    });

  });

});

Answer 1

The problem is that every time the modal is opened, a new submit listener gets added. To fix your problem, you need to split the event handlers:

Start with the modal click listener:

$(document).on('click', '.add-video-btn', function() {

        $('#file').val('');
        $('#file-upload').trigger('reset'); 

        $('#video-uploading-modal').modal({
            backdrop: 'static',
            keyboard: false
        });
});

Then, set the submit listener sepparately:

        $('#upload-btn').on('click', async function() {

            var vidRes = await getOneTimeUploadUrl();
            console.log(vidRes.result.uploadURL);
            var oneTimeUrl = vidRes.result.uploadURL;

            $('#file-upload').ajaxSubmit({
                url: oneTimeUrl,
                beforeSubmit : function(formData, formObject, formOptions)  {
                    console.log(formData);
                    $('.progress').slideDown();
                },
                beforeSend : function() {
                },
                uploadProgress : function(event, position, total, precentComplete) {
                    $('.progress-bar').css('width', precentComplete + '%');
                    $('.progress-bar').html('%' + precentComplete);
                    
                },
                success: function(response) {
                    console.log(response);
                    alert('success');
                },
            });
        }); 

That should solve your issue. Hope you've found this helpful.