FormData is empty (in PHP) - php

Question

I have been using this to process a form via AJAX and jQuery
$("#uploadBtn").click(function()
{
var formData = new FormData($('form')[0]); //--FormData here, problem line
$.ajax({
url: 'resources/ajax/ajax_upload_video.php',
type: 'POST',
xhr: function()
{
xhr = $.ajaxSettings.xhr();
if (xhr.upload)
{
xhr.upload.addEventListener('progress', progressHandlingFunction, false);
}
return xhr;
},
success: function(msg)
{
log(msg);
},
data: formData,
cache: false,
contentType: false,
processData: false
});
});
It has been working fine. I added a second form on the page (Search on top, uploader on bottom)
I understand the $('form')[0] will grab the first form on the page, so naturally I changed my javascript to $('form')[1]. When I do a console.log on it, it is the correct form.
When I hit the upload button, but my php file says nothing was posted. For simplicity sake, my php file is this:
<?php
var_dump($_POST);
?>
I get just an empty array. I even gave the form I want an ID and called it this way $('#uploadForm').
I have 1 multi-select FILE input, a hidden field and a text input field.
What am I doing wrong with the FormData object?
One side not, I've been developing this page locally using WAMP and just moved it to our CentOS server that is online. Could this be a PHP setting that isn't the same as my local environment? I can't think of what PHP setting would have to do with POST
Upload Form
<form id="videoUploadForm" method="post" enctype="multipart/form-data" class="upload-form modal-edit-form">
<div class="modal-body">
<p>
<div align="center" id="fileSelect">
<input type="hidden" value="video" name="mediaType" id="mediaType" />
<input type="hidden" value="<?php echo $_GET['reelId']; ?>" name="reelId" id="reelId" />
<input type="file" name="videos[]" id="videos" accept="video/mp4" multiple />
</div>
<br>
</p>
<p>
<div id="dropbox">
<ul class="hide" id="filelist">
</ul>
<div align="center" id="nofiles">Select some file to begin</div>
</div><br>
</p>
<p>
<hr>
<label>Search Tags <small>[at least two tags separate by comma]</small></label>
<input type="text" class="span5" name="searchTags" id="searchTags" disabled />
</p>
<hr>
<p align="center">
<img src="resources/img/loader.gif" class="hide" id="loader" />
<button type="button" class="btn btn-info" name="uploadBtn" id="uploadBtn" disabled><i class="icon-circle-arrow-up icon-white"></i> Begin Upload</button>
<div id="successfulUpload" class="alert alert-success hide">
<b>The videos have been successfully uploaded.</b><br/>
</div>
</p>
</div>
</form>

Answer 1

Try accessing it this way:
var form = document.getElementById('form-id');
var formData = new FormData(form);
From this page on FormData.