Form data displays null object

Question

I have made a simple form and want to post the data using the jQuery function new FormData(). To me every thing seems to be good but when I am displaying the variable data in console.log, then I get FormData { append=append()} as output.

My code is:

<form action="" enctype="multipart/form-data" method="post" name="edit_user" id="edit_user">
   <input type="text" name="Fname" >
   <input type="file" name="image">
   <input type="submit" value="submit">
</form>

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $('#edit_user').submit(function(event) {
            event.preventDefault();
            var formdata = new FormData(this);
            console.log(formdata);
       });

`FormData()` is not a `jQuery API method/function`. https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects — emerson.marini, Oct 16 '14 at 12:10
If you're still after `jQuery`, this might help you: http://api.jquery.com/serialize/ — emerson.marini, Oct 16 '14 at 12:12
friends i need to upload a image file so how can that be possible with serialize — Anurag Singh, Oct 16 '14 at 12:21

score 3 · Accepted Answer · edited May 23 '17 at 11:57

Your code (included below) works fine. This is how FormData is supposed to work. The data can be posted using XHR or $.ajax (see this question for tying it to jQuery), but it is not serialised into a string for you. It is only converted into the appropriate format when the XHR request is made.

There is no way to see the data in a FormData object in the console without making the XHR request.

$(document).ready(function() {
  $('#edit_user').submit(function(event) {
    event.preventDefault();
    //enter code here
    var formdata = new FormData(this);

    console.log(formdata);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" enctype="multipart/form-data" method="post" name="edit_user" id="edit_user">
  <input type="text" name="Fname">
  <input type="file" name="image">
  <input type="submit" value="submit">
</form>

thanks dude you saved me... i was debugging this for a2 hours — Anurag Singh, Oct 16 '14 at 12:39
@lonesomeday Is there any way to console formdata values in http request? — Arjun, Jun 14 '19 at 09:54

score 0 · Answer 2 · answered Feb 15 '18 at 12:29

0

You can get the data by using get function of FormData like this:

console.log(formdata.get('Fname'));

answered Feb 15 '18 at 12:29

Jatin Bansal

171
2
10

Form data displays null object

2 Answers2