ajax submitting forms using FormData

Question

I was trying to submit only specific inputs of a very large form and I wanted to do this using ajax. I had this and it was working fine. This will submit all inputs within #someDiv.

$(".save").click(function () {

    dat = $.param($('#someDiv').find('input'));

    $.ajax({
        type: "POST",
        url: "...",
        data: dat,
        success: function(data) {
            //success
        }
    });
});

I then remembered that some of these inputs are file inputs so this will not work. I did some research and found that using FormData was the way to go:

$(".save").click(function () {

    dat = new FormData($('#someDiv').find('input'));

    $.ajax({
        type: "POST",
        url: "...",
        data: dat,
        processData: false,
        contentType: false,
        success: function(data) {
            //success
        }
    });
});

But this function is not working, the success function is firing but nothing is saving so I assume the FormData is not being created properly. Any ideas? Thanks in advance

https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects — brso05, May 06 '15 at 12:21
http://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax — brso05, May 06 '15 at 12:21
i use `FormData` only when I include data like pictures, files, ... and if you want to create a new FormData it should be a Form and not regular data, use `new FormData($('form')[0])` instead. If you want to send strings use `$('form').serialize()` — Jonas Libbrecht, May 06 '15 at 12:23

sanjeev · Accepted Answer · 2015-05-06T12:24:49.547

5

You can't create a formData as below

dat = new FormData($('#someDiv').find('input'));

you need to pass the Javascript form reference to the form , for example if the id of the form is , singupForm then do it like below

dat = new FormData($('#singupForm')[0]);

Edit

In case you want to add only selected field you can do it as below

    var formData = new FormData();
    formData.append("variable", "First Value");
    formData.append("integerVariable", 987654321); 

    // For file, remember to pass the JavaScript reference
    formData.append("userfile", fileInputElement.files[0]);

edited May 06 '15 at 12:24

answered May 06 '15 at 12:20

sanjeev

4,405
2
19
27

1

So I can't pass only certain inputs of #signupForm to create formdata? – sharif9876 May 06 '15 at 12:22

ajax submitting forms using FormData

1 Answers1