Ajax is submiting the form data multiple times.

Question

jQuery with Dialog widget. When user clicks on the link dialog form opens up (I am using Dialog Widget for this). This form has few text fields and file field for file upload. When user clicks on “Add File” Ajax uploads the file first and then makes a second asynchronous connection to upload the form data. The issue I am having is that Ajax is submitting the form five times and I don't understand why and how to stop that. In image below I am showing what PHP echoed $_POST back. Below is my jQuery script:

(function(){
var form = $('#dialog_form form'),
    files = false,
    error_msg=false,
    this_cell,
    file_name=false;
    
    function uploadFile(){
        var data = new FormData();
        $.each(files, function(key, value)
        {
            data.append(key, value);
        });
        $.ajax({
            url: 'index.php?route=catalog/file/upload_file&files&token=<?php echo $token; ?>',
            type: 'POST',
            async: false,
            data: data,
            cache: false,
            dataType: 'json',
            processData: false,
            contentType: false,
            success: function(data, textStatus, jqXHR){
                if(typeof data.error === 'undefined'){
                    file_name = data.file_name;
                    //console.log(data);
                } else{
                    alert('ERRORS: ' + data.error);
                }
            },
            error: function(jqXHR, textStatus, errorThrown){
                alert('FILE ERRORS------: ' + textStatus+' | '+errorThrown);
                //alert(jqXHR.responseText);
            }
        });
    }
    
    function submitForm(){
        var form_data = $('#dialog_form form').serialize();
        $.ajax({
            url: 'index.php?route=catalog/file/submit&token=<?php echo $token; ?>',
            type: 'POST',
            data: form_data,
            cache: false,
            dataType: 'json',
            success: function(data, textStatus, jqXHR){
                if(typeof data.error === 'undefined'){
                    console.log(data);
                    alert(data);
                    //var new_li = $('<li></li>',{
                    //    text:data.formData.title});
                    //this_cell.find('li').last().before(new_li);
                } else{
                    alert('ERRORS: ' + data.error);
                }
            },
            error: function(jqXHR, textStatus, errorThrown){
                alert('SUBMIT ERRORS------: ' + textStatus+' | '+errorThrown);
                alert(jqXHR.responseText);
            }
        });
    }
    
    // lisen if file has been selected
    form.find('input[name="file"]').on('change',function(e){
        files=e.target.files;
    })
    
  $( "#dialog_form" ).dialog({
  autoOpen: false,
  height: 500,
  width: 500,
  modal: true,
  buttons: {
    "Add File": function() {
        $(this).find('button').unbind('click');
        console.log($(this));
        // if file has been selected to be uploaded
        if(form.find('input[name="file_type"]:checked').val()==='file'){
            uploadFile();
            form.find('input[name="file_name"]').val(file_name);
            submitForm();
        }else{
            submitForm();
        }
    },
    Cancel: function() {
      $( this ).dialog( "close" );
    }
  },
  close: function() {
  }
});

// toggle file and link fields based on radion button selection
$('#dialog_form input[name="file_type"]').on('change',function(){
    var $this = $(this),
        form =$this.closest('form');
    if($this.val()=="file"){
        form.find('[for="file"],[name="file"]').toggle();
        form.find('[for="link"],[name="link"]').toggle();
    }
    if($this.val()=="link"){
        form.find('[for="file"],[name="file"]').toggle();
        form.find('[for="link"],[name="link"]').toggle();
    }
})


// lisen for when the "add file" link is cliced on the page and open new dialog box with form
$('.product_id li:last-child').on('click',function(){
    this_cell=$(this).parent();
    var form_box = $( "#dialog_form" );
    form_box.find('input[name="product_id"]').val($(this).closest('td').data('product_id'));
    form_box.dialog( "open" );
})

})();
Guys please let me know what to change so Ajax doesn't submit multiple times!? Thank you

Answer 1

Unbid the "submit" action once you start execution

$('#dialog_form form').unbind('submit'); //to disable multiple submissions

and if u want to re-enable it

$('#dialog_form form').bind('submit')