.ajaxSubmit from the jquery.form.js not working with data option

Question

I am using the plugin jquery.form.js and I want to programmatically submit a form and include a file with it. The code and options I have set up with work with $.ajax but not .ajaxSubmit. According to the jquery.form.js documentation you can pass any standard $.ajax options to .ajaxSubmit but I can't seem to get it to work. I'd like to use .ajaxSubmit if possible so I can utilize some of the other features it offers.

$(document).ready(function() {
    $('#file-form').submit(function(event) {
        event.preventDefault();
        var form = $("<form style='display:none;' method='post' action='video_upload.php' enctype='multipart/form-data'></form>");
        var fd = new FormData();    
        fd.append('uploadedfile', $('#file')[0].files[0]);

        var options = {
            url: 'video_upload.php',
            data: fd,
            processData: false,
            contentType: false,
            type: 'POST',
            beforeSend: function(xhr){
                alert('start');
            },
            success: function(data){
                alert(data);
            }
        };
        $.ajax(options);
        //form.ajaxSubmit(options);

        return false;
    }); 

});

Running $.ajax(options) works but form.ajaxSubmit(options) doesn't. What am I missing?

Thanks!

Alex Netkachov · Accepted Answer · 2014-06-12 21:18:58Z

1

If you check the source code of the method ajaxSubmit - http://malsup.github.io/jquery.form.js you can see that the property data of the options is serialised/deserialised and converted several times. So most likely the content really submitted will be quite different from what happens in .ajax call. Later on the ajaxSubmit collects the files from form and submits them differently.

Basically, for me the specifying data while submitting with ajaxSubmit goes against the concept of this plugin, which is described as "The main methods, ajaxForm and ajaxSubmit, gather information from the form element to determine how to manage the submit process." Idiomatic way of using ajaxSubmit would be applying this method for the form with controls.

answered Jun 12, 2014 at 21:18

Alex Netkachov

13.6k7 gold badges56 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

a3hill Over a year ago

So for my needs would you suggest that I just use the .ajax call? Mostly I wanted to use the ajaxSubmit so it would be easier to create a progress bar but I should be able to create one using .ajax. Thanks for your answer!

Alex Netkachov Over a year ago

If ajax works well for you then there is no need to use ajaxCall. See here for the progress bar examples: stackoverflow.com/questions/20095002/…

Collectives™ on Stack Overflow

.ajaxSubmit from the jquery.form.js not working with data option

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related