Simple FormData not working

Question

I am trying to test a simple FormData object but its not working at all. jsfiddle: https://jsfiddle.net/8j80898h/

html code:

<form id="createForm" name="createForm" novalidate enctype="multipart/form-data">
    <input type="hidden" name="name" value="Name1" />
    <input type="file" name="file" />
    <input type="button" id="submitIt" value="Submit" />
</form>

js:

$(document).ready(function() {
    $('#submitIt').click(function() {
        var fd =  new FormData($('#createForm')[0]);
        fd.append( 'name', $('input[name=name]').val());

        $.ajax({
            url: url,
            data: fd,
            processData: false,
            contentType: false,
            type: 'POST',
            success: function(data){                    
                alert(data);
            }
        });
    });
});

Server is always getting null values for name and file

similar problem is [here](http://stackoverflow.com/questions/21044798/how-to-use-formdata-for-ajax-file-upload) — The Reason, Aug 20 '15 at 08:42
http://stackoverflow.com/questions/6974684/how-to-send-formdata-objects-with-ajax-requests-in-jquery — Arun P Johny, Aug 20 '15 at 08:48
check the ajax request using the browser network tab(dveloper tools) — Arun P Johny, Aug 20 '15 at 08:59
Yes its sending correct values... I think the issue is on server. Posted a new question here http://stackoverflow.com/questions/32114269/dataform-posting-values-but-on-server-its-null — coure2011, Aug 20 '15 at 09:18

score 2 · Answer 1 · answered Aug 20 '15 at 08:44

2

FormData has a get method you should use:

$(document).ready(function() {
    $('#submitIt').click(function() {
        var d = new FormData($('form')[0]);        
        alert(d.get('name'));
    });
});

read more in MDN: https://developer.mozilla.org/en-US/docs/Web/API/FormData/get

answered Aug 20 '15 at 08:44

MoLow

2,990
2
17
39

2

only supported in Firefox - https://developer.mozilla.org/en-US/docs/Web/API/FormData/get#Browser_compatibility – Arun P Johny Aug 20 '15 at 08:44

score 0 · Answer 2 · answered Aug 20 '15 at 09:27

0

rather than making an FormData object you can access elements within an form like the code below shows :)

$(document).ready(function() {
  $('#submitIt').click(function() {
    var d = $('form').toArray();        
    alert(d[0].name);
  });
});

answered Aug 20 '15 at 09:27

Roy James Schumacher

636
1
11
27

then how u will post values and file? – coure2011 Aug 20 '15 at 09:35
ah the question had changed and i didnt see the ajax request part if you just do a standard submit without trying to handle it all then it will send up all the values that are set on the form including the file. – Roy James Schumacher Aug 20 '15 at 09:45

Simple FormData not working

2 Answers2